{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Delete an FTP login. The home directory is never removed: it is the website's
   own content and is shared with the web server. {% endcomment %}

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-user-minus"></i> Delete FTP account</h1>
      <p class="cp-page-head__sub">
        Removing a login revokes access immediately. Files stay where they are.
      </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-alert cp-alert--info">
    <i class="fa-solid fa-circle-info"></i>
    <p>
      Deleting an account only removes the login from Pure-FTPd's database.
      The directory it was chrooted to is left untouched, because it holds the
      live website.
    </p>
  </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>
    </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>
    </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>Nothing to delete</h4>
        <p>This website has no FTP logins.</p>
      </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" style="text-align:right">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="account in accounts track by account.user">
              <td><code ng-bind="account.user"></code></td>
              <td ng-bind="account.path"></td>
              <td>
                <div class="cp-table__actions">
                  <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                          ng-click="remove(account)" ng-disabled="busy">
                    <i class="fa-solid fa-trash-can"></i> Delete
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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