{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Create one Pure-FTPd account. The login prefix and the chroot root are both
   server-side facts; the operator only chooses the suffix and a sub-directory. {% endcomment %}

{% block title %}Create FTP account{% endblock %}

{% block content %}
<div ng-controller="createFTPAccountController">

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-folder-tree"></i> Create FTP account</h1>
      <p class="cp-page-head__sub">
        Every account is chrooted into the website's home directory and logs in
        over FTPS &mdash; plain FTP is refused by the server.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/ftp/listFTPAccounts">
        <i class="fa-solid fa-list"></i> All accounts
      </a>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-user-plus"></i> New account</h2>
      <p class="cp-card__sub" ng-cloak>
        <span ng-show="!context.limit">Accounts used: <strong ng-bind="context.used"></strong> (package limit: unlimited)</span>
        <span ng-show="context.limit">Accounts used: <strong ng-bind="context.used + ' of ' + context.limit"></strong> allowed by the package</span>
      </p>
    </div>

    <div class="cp-card__body">

      <div class="cp-alert cp-alert--danger" ng-show="errorMessage" ng-cloak role="alert">
        <i class="fa-solid fa-triangle-exclamation"></i>
        <p ng-bind="errorMessage"></p>
      </div>

      <div class="cp-alert cp-alert--warning" ng-show="quotaReached" ng-cloak role="status">
        <i class="fa-solid fa-gauge-high"></i>
        <p>
          This website already uses every FTP account its package allows.
          Delete one first, or move the site to a larger package.
        </p>
      </div>

      <form novalidate ng-submit="submit()">
        <div class="cp-form-grid">

          <div>
            <label class="cp-label" for="cpDomain">Website <span class="cp-req">*</span></label>
            <select class="cp-select" id="cpDomain" ng-model="domainName"
                    ng-change="loadContext()" required>
              <option value="">Select a website&hellip;</option>
              {% for site in websites %}
                <option value="{{ site }}">{{ site }}</option>
              {% endfor %}
            </select>
            <p class="cp-help">The account is locked to this site's files.</p>
          </div>

          <div>
            <label class="cp-label" for="cpUser">FTP user name <span class="cp-req">*</span></label>
            <div class="cp-input-group">
              <span class="cp-input-group__addon" ng-bind="(context.prefix || 'siteuser') + '_'"></span>
              <input type="text" class="cp-input" id="cpUser" ng-model="userName"
                     maxlength="24" autocomplete="off" spellcheck="false"
                     placeholder="backup" required>
            </div>
            <p class="cp-help">
              Letters, digits and underscores. The site prefix is added
              automatically; the whole login must stay within {{ maxUserName }}
              characters.
            </p>
          </div>

          <div>
            <label class="cp-label" for="cpPassword">Password <span class="cp-req">*</span></label>
            <div class="cp-input-group">
              <input type="text" class="cp-input" id="cpPassword" ng-model="password"
                     autocomplete="new-password" spellcheck="false" required>
              <button type="button" class="cp-btn cp-btn--ghost" ng-click="generate()">
                <i class="fa-solid fa-dice"></i> Generate
              </button>
            </div>
            <p class="cp-help">
              At least 10 characters mixing three of: lowercase, uppercase,
              digits, symbols. Copy it now &mdash; only its hash is stored.
            </p>
          </div>

          <div>
            <label class="cp-label" for="cpPath">Home directory</label>
            <input type="text" class="cp-input" id="cpPath" ng-model="path"
                   spellcheck="false" ng-attr-placeholder="{$ context.defaultPath $}">
            <p class="cp-help">
              Must stay inside <code ng-bind="context.home || '/home/&lt;domain&gt;'"></code>.
              Leave empty for <code>{{ defaultSubdir }}</code>.
            </p>
          </div>

          <div>
            <label class="cp-label" for="cpQuotaSize">Disk quota (MB)</label>
            <input type="number" class="cp-input" id="cpQuotaSize" ng-model="quotaSize"
                   min="0" step="1">
            <p class="cp-help">0 means unlimited.</p>
          </div>

          <div>
            <label class="cp-label" for="cpQuotaFiles">File count quota</label>
            <input type="number" class="cp-input" id="cpQuotaFiles" ng-model="quotaFiles"
                   min="0" step="1">
            <p class="cp-help">0 means unlimited.</p>
          </div>

        </div>

        <div class="cp-btn-group" style="margin-top:18px">
          <button type="submit" class="cp-btn cp-btn--primary"
                  ng-disabled="busy || quotaReached || !domainName">
            <i class="fa-solid fa-circle-plus" ng-hide="busy"></i>
            <span ng-bind="busy ? 'Creating…' : 'Create account'"></span>
          </button>
          <button type="button" class="cp-btn cp-btn--ghost" ng-click="reset()" ng-disabled="busy">
            Clear
          </button>
        </div>
      </form>

      <div class="cp-alert cp-alert--success" ng-show="created.userName" ng-cloak style="margin-top:18px">
        <i class="fa-solid fa-circle-check"></i>
        <p>
          <strong ng-bind="created.userName"></strong> is ready.
          Connect with FTPS to <code>{{ request.get_host|default:"cp.a1hosting.net" }}</code>
          on port 21, home <code ng-bind="created.path"></code>.
        </p>
      </div>

    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'ftpManager/ftpManager.js' %}"></script>
{% endblock %}