{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Account deletion. CloudPanel BLOCKS rather than cascades: the server refuses
   while the account still owns websites or sub-accounts, and names them. The
   page says so before the operator types anything. {% endcomment %}

{% block title %}Delete user{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Delete an account</h1>
      <p class="text-muted mb-0 small">
        Only accounts you own are listed, and you can never delete the account
        you are signed in with.
      </p>
    </div>
    <a href="/users/listUsers" class="btn btn-outline-secondary">
      <i class="fas fa-users me-1"></i>All accounts
    </a>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    <span ng-bind="errorMessage"></span>
    <ul class="mb-0 mt-2 small" ng-show="blockers.length">
      <li ng-repeat="item in blockers" ng-bind="item"></li>
    </ul>
  </div>

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card">
        <div class="card-body">

          <label class="form-label" for="duSelect">Account</label>
          <div class="d-flex flex-wrap gap-2 mb-3">
            <select class="form-select" id="duSelect" style="max-width:420px"
                    ng-model="selectedName" ng-change="select()"
                    ng-options="u.userName as (u.userName + ' — ' + u.type) for u in deletableUsers">
              <option value="">Choose an account…</option>
            </select>
            <button type="button" class="btn btn-outline-secondary" ng-click="load()"
                    ng-disabled="busy">
              <i class="fas fa-rotate me-1"></i>Refresh
            </button>
          </div>

          <div ng-show="user" ng-cloak>
            <dl class="row small mb-3">
              <dt class="col-5">Full name</dt>
              <dd class="col-7" ng-bind="user.fullName"></dd>
              <dt class="col-5">Email</dt>
              <dd class="col-7" ng-bind="user.email"></dd>
              <dt class="col-5">Role / ACL</dt>
              <dd class="col-7">
                <span ng-bind="user.type"></span> &middot;
                <span ng-bind="user.aclName"></span>
              </dd>
              <dt class="col-5">Owner</dt>
              <dd class="col-7" ng-bind="user.owner"></dd>
              <dt class="col-5">Websites owned</dt>
              <dd class="col-7">
                <span class="badge rounded-pill"
                      ng-class="user.websites ? 'text-bg-danger' : 'text-bg-success'"
                      ng-bind="user.websites"></span>
              </dd>
              <dt class="col-5">Created</dt>
              <dd class="col-7" ng-bind="user.dateCreated"></dd>
            </dl>

            <div class="alert alert-warning py-2 px-3 small" ng-show="user.websites">
              <i class="fas fa-triangle-exclamation me-1"></i>
              This account still owns websites. CloudPanel will refuse the
              deletion until they are transferred or deleted.
            </div>

            <div class="mb-3">
              <label class="form-label" for="duConfirm">
                Type <code ng-bind="user.userName"></code> to confirm
              </label>
              <input type="text" class="form-control" id="duConfirm"
                     ng-model="confirmUserName" autocomplete="off" spellcheck="false"
                     placeholder="{$ user.userName $}">
            </div>

            <button type="button" class="btn btn-danger"
                    ng-click="remove()"
                    ng-disabled="busy || confirmUserName !== user.userName">
              <span ng-show="busy" class="spinner-border spinner-border-sm me-1"
                    role="status" aria-hidden="true"></span>
              <i class="fas fa-user-slash me-1" ng-hide="busy"></i>
              <span ng-bind="busy ? 'Deleting…' : 'Delete account'"></span>
            </button>
          </div>

        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card h-100 border-danger-subtle">
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-shield-halved me-1 text-danger"></i>
            CloudPanel blocks, it does not cascade
          </h2>
          <ul class="small text-muted ps-3 mb-3">
            <li class="mb-2">
              <strong>Websites are never deleted with their owner.</strong> If the
              account still owns a site, the deletion is refused and the error
              names the domains. Transfer or delete them first.
            </li>
            <li class="mb-2">
              <strong>Sub-accounts are never deleted either.</strong> A reseller
              with customers beneath it cannot be removed until those accounts
              are moved or deleted.
            </li>
            <li class="mb-2">
              The username must be typed back exactly. There is no undo.
            </li>
            <li>
              Any live session belonging to the account is destroyed as part of
              the deletion, and the whole action is written to the audit log.
            </li>
          </ul>
          <p class="small text-muted mb-0">
            The reason for blocking rather than cascading: an orphaned vhost
            keeps serving traffic with no owner and no limits, which is a worse
            outcome than a failed delete.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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