{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Edit an owned account. The three rules the UI must make visible:
   you cannot change your own ACL, you cannot grant more than you hold, and
   only an administrator may change an owner. {% endcomment %}

{% block title %}Modify user{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Modify an account</h1>
      <p class="text-muted mb-0 small">
        Only accounts you own are listed.
      </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>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <label class="form-label" for="muSelect">Account</label>
      <div class="d-flex flex-wrap gap-2">
        <select class="form-select" id="muSelect" style="max-width:420px"
                ng-model="selectedName" ng-change="select()"
                ng-options="u.userName as (u.userName + ' — ' + u.type) for u in users">
          <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>
  </div>

  <form novalidate ng-submit="save()" ng-show="user.userName" ng-cloak>
    <div class="row g-4">

      <div class="col-lg-7">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h6 mb-3">
              Details for <code ng-bind="user.userName"></code>
            </h2>

            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="muFirst">First name</label>
                <input type="text" class="form-control" id="muFirst" maxlength="50"
                       ng-model="user.firstName">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="muLast">Last name</label>
                <input type="text" class="form-control" id="muLast" maxlength="50"
                       ng-model="user.lastName">
              </div>
              <div class="col-sm-8">
                <label class="form-label" for="muEmail">Email</label>
                <input type="email" class="form-control" id="muEmail" maxlength="254"
                       ng-model="user.email">
              </div>
              <div class="col-sm-4">
                <label class="form-label" for="muLimit">Website allowance</label>
                <input type="number" min="0" step="1" class="form-control" id="muLimit"
                       ng-model="user.initWebsitesLimit">
              </div>
            </div>

            <hr class="my-4">

            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="muState">Account state</label>
                <select class="form-select" id="muState" ng-model="user.state"
                        ng-disabled="user.isSelf"
                        ng-options="option.value as option.label for option in states">
                </select>
                <div class="form-text" ng-show="user.isSelf">
                  You cannot suspend your own account.
                </div>
              </div>
              <div class="col-sm-6">
                <label class="form-label">Sites owned</label>
                <div class="form-control-plaintext">
                  <span ng-bind="user.websites"></span> website(s)
                </div>
              </div>
            </div>

            {% if canSuspendWebsite %}
            <div class="form-check mt-2" ng-show="!user.isSelf && user.websites">
              <input class="form-check-input" type="checkbox" id="muCascade"
                     ng-model="cascadeWebsites">
              <label class="form-check-label small" for="muCascade">
                Also suspend/unsuspend this account's <span ng-bind="user.websites"></span>
                website(s) when the state above changes.
              </label>
            </div>
            {% endif %}

            <hr class="my-4">

            <h3 class="h6 mb-2">Reset password</h3>
            <div class="row g-3" ng-hide="user.isSelf">
              <div class="col-sm-8">
                <label class="form-label" for="muPass">New password</label>
                <div class="input-group">
                  <input type="{$ showPassword ? 'text' : 'password' $}" class="form-control"
                         id="muPass" ng-model="user.newPassword"
                         autocomplete="new-password"
                         placeholder="Leave blank to keep the current password">
                  <button class="btn btn-outline-secondary" type="button"
                          ng-click="showPassword = !showPassword"
                          aria-label="Toggle password visibility">
                    <i class="fas" ng-class="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                  </button>
                </div>
                <div class="form-text">
                  Setting a password here signs the account out everywhere. At
                  least 10 characters mixing three of: lowercase, uppercase,
                  digits, symbols.
                </div>
              </div>
            </div>
            <div class="alert alert-secondary py-2 px-3 small mb-0" ng-show="user.isSelf">
              <i class="fas fa-lock me-1"></i>
              To change your own password use
              <a href="/users/changePassword">Change password</a> &mdash; it requires
              your current password, so a hijacked session cannot lock you out.
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-5">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <h2 class="h6 mb-3">Permissions and ownership</h2>

            <div class="mb-3">
              <label class="form-label" for="muAcl">ACL</label>
              <select class="form-select" id="muAcl" ng-model="user.aclName"
                      ng-change="describeACL()" ng-disabled="user.isSelf"
                      ng-options="a.name as (a.name + ' (' + a.role + ')') for a in acls">
              </select>
              <div class="alert alert-warning py-2 px-3 small mt-2 mb-0" ng-show="user.isSelf">
                <i class="fas fa-lock me-1"></i>
                Nobody may change their own ACL &mdash; administrators included.
                Ask another administrator.
              </div>
              <div class="form-text" ng-hide="user.isSelf">
                You can only assign an ACL no more privileged than your own.
              </div>
            </div>

            <div class="border rounded p-2 mb-3 small" ng-show="selectedACL" ng-cloak
                 style="max-height:180px; overflow:auto">
              <div class="text-muted mb-1">
                <span ng-bind="selectedACL.grantedCount"></span> permission(s) granted:
              </div>
              <span class="badge text-bg-light border me-1 mb-1"
                    ng-repeat="perm in selectedACL.granted" ng-bind="perm"></span>
            </div>

            {% if isAdmin %}
            <div class="mb-3">
              <label class="form-label" for="muOwner">Owner</label>
              <select class="form-select" id="muOwner" ng-model="user.owner">
                {% for owner in owners %}
                  <option value="{{ owner }}">{{ owner }}</option>
                {% endfor %}
              </select>
              <div class="form-text">
                Reparenting moves the account and its websites to another tenant.
                Administrators only.
              </div>
            </div>
            {% else %}
            <div class="mb-3">
              <label class="form-label">Owner</label>
              <div class="form-control-plaintext" ng-bind="user.owner"></div>
              <div class="form-text">
                Only an administrator may change an account's owner.
              </div>
            </div>
            {% endif %}

            <div class="mt-auto pt-2">
              <button type="submit" class="btn btn-primary w-100" ng-disabled="busy">
                <span ng-show="busy" class="spinner-border spinner-border-sm me-1"
                      role="status" aria-hidden="true"></span>
                <span ng-bind="busy ? 'Saving…' : 'Save changes'"></span>
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </form>
</div>
{% endblock %}

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