{% extends "baseTemplate/index.html" %}
{% load static %}
{# Accounts of one website, with inline password rotation and chroot changes. #}

{% block title %}FTP accounts{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-list"></i> FTP accounts</h1>
      <p class="cp-page-head__sub">
        Rotate a password or move an account's home directory without
        recreating it.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--primary" href="/ftp/createFTPAccount">
        <i class="fa-solid fa-circle-plus"></i> New account
      </a>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-globe"></i> Website</h2>
    </div>
    <div class="cp-card__body">
      <div class="cp-form-grid">
        <div>
          <label class="cp-label" for="cpDomain">Select a website</label>
          <select class="cp-select" id="cpDomain" ng-model="domainName" ng-change="load()">
            <option value="">Select a website&hellip;</option>
            {% for site in websites %}
              <option value="{{ site }}">{{ site }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="cp-label">Package quota</label>
          <p class="cp-help" ng-cloak style="margin-top:9px">
            <span ng-show="!context.limit"><strong ng-bind="context.used"></strong> accounts &middot; unlimited</span>
            <span ng-show="context.limit"><strong ng-bind="context.used + ' of ' + context.limit"></strong> accounts used</span>
          </p>
        </div>
      </div>
    </div>
  </div>

  <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-card" ng-show="domainName" ng-cloak>
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-user-group"></i> Accounts</h2>
      <p class="cp-card__sub">Chroot directories are always inside <code ng-bind="context.home"></code>.</p>
    </div>

    <div class="cp-card__body cp-card__body--flush">

      <div class="cp-empty" ng-show="!busy && accounts.length === 0">
        <i class="fa-solid fa-folder-open"></i>
        <h4>No FTP accounts yet</h4>
        <p>This website has no FTP logins.</p>
        <a class="cp-btn cp-btn--primary cp-btn--sm" href="/ftp/createFTPAccount">Create one</a>
      </div>

      <div class="cp-table-wrap" ng-show="accounts.length">
        <table class="cp-table">
          <thead>
            <tr>
              <th scope="col">Login</th>
              <th scope="col">Home directory</th>
              <th scope="col" class="cp-num">Disk quota</th>
              <th scope="col" class="cp-num">File quota</th>
              <th scope="col">State</th>
              <th scope="col" style="text-align:right">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="account in accounts track by account.user">
              <td><code ng-bind="account.user"></code></td>
              <td>
                <span ng-hide="editing === account.user" ng-bind="account.path"></span>
                <span ng-show="editing === account.user">
                  <input type="text" class="cp-input" ng-model="editPath" spellcheck="false"
                         ng-attr-aria-label="Home directory for {$ account.user $}">
                </span>
              </td>
              <td class="cp-num" ng-bind="account.quotaSize ? account.quotaSize + ' MB' : '∞'"></td>
              <td class="cp-num" ng-bind="account.quotaFiles || '∞'"></td>
              <td>
                <span class="cp-badge"
                      ng-class="account.status ? 'cp-badge--success' : 'cp-badge--warning'"
                      ng-bind="account.status ? 'Enabled' : 'Disabled'"></span>
              </td>
              <td>
                <div class="cp-table__actions">
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                          ng-hide="editing === account.user"
                          ng-click="beginPath(account)">
                    <i class="fa-solid fa-folder"></i> Path
                  </button>
                  <button type="button" class="cp-btn cp-btn--primary cp-btn--sm"
                          ng-show="editing === account.user"
                          ng-click="savePath(account)" ng-disabled="busy">
                    Save
                  </button>
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                          ng-show="editing === account.user" ng-click="cancelEdit()">
                    Cancel
                  </button>
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                          ng-click="beginPassword(account)">
                    <i class="fa-solid fa-key"></i> Password
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="cp-card" ng-show="pwUser" ng-cloak>
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-key"></i> New password for <code ng-bind="pwUser"></code></h2>
      <p class="cp-card__sub">Only the hash is stored, so copy it before saving.</p>
    </div>
    <div class="cp-card__body">
      <form novalidate ng-submit="savePassword()">
        <div class="cp-form-grid">
          <div>
            <label class="cp-label" for="cpNewPassword">Password</label>
            <div class="cp-input-group">
              <input type="text" class="cp-input" id="cpNewPassword" ng-model="pwValue"
                     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, three character classes.</p>
          </div>
        </div>
        <div class="cp-btn-group" style="margin-top:14px">
          <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy">
            <span ng-bind="busy ? 'Saving…' : 'Change password'"></span>
          </button>
          <button type="button" class="cp-btn cp-btn--ghost" ng-click="pwUser = ''">Cancel</button>
        </div>
      </form>
    </div>
  </div>

</div>
{% endblock %}

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