{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Create an account beneath the signed-in user. The ACL selector only ever
   offers ACLs the caller is allowed to grant — and the server checks again. {% endcomment %}

{% block title %}Create user{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Create an account</h1>
      <p class="text-muted mb-0 small">
        The new account is owned by <strong>{{ userName }}</strong>{% if isAdmin %}
        unless you pick another owner{% endif %}.
      </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>

  <form novalidate ng-submit="submit()">
    <div class="row g-4">

      <div class="col-lg-7">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h6 mb-3">Account</h2>

            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="nuName">Username</label>
                <input type="text" class="form-control" id="nuName" maxlength="32"
                       ng-model="user.userName" autocomplete="off" spellcheck="false" required>
                <div class="form-text">1&ndash;32 characters: letters, digits, underscore.</div>
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="nuEmail">Email</label>
                <input type="email" class="form-control" id="nuEmail" maxlength="254"
                       ng-model="user.email" autocomplete="off" required>
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="nuFirst">First name</label>
                <input type="text" class="form-control" id="nuFirst" maxlength="50"
                       ng-model="user.firstName" autocomplete="off">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="nuLast">Last name</label>
                <input type="text" class="form-control" id="nuLast" maxlength="50"
                       ng-model="user.lastName" autocomplete="off">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="nuPass">Password</label>
                <div class="input-group">
                  <input type="{$ showPassword ? 'text' : 'password' $}" class="form-control"
                         id="nuPass" ng-model="user.password" autocomplete="new-password" required>
                  <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">
                  At least 10 characters mixing three of: lowercase, uppercase,
                  digits, symbols.
                </div>
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="nuLimit">Website allowance</label>
                <input type="number" min="0" step="1" class="form-control" id="nuLimit"
                       ng-model="user.initWebsitesLimit">
                <div class="form-text">0 means unlimited.</div>
              </div>
            </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</h2>

            <div class="mb-3">
              <label class="form-label" for="nuAcl">ACL</label>
              <select class="form-select" id="nuAcl" ng-model="user.acl"
                      ng-change="describeACL()" required
                      ng-options="a.name as (a.name + ' (' + a.role + ')') for a in acls">
                <option value="">Choose an ACL…</option>
              </select>
              <div class="form-text">
                Only ACLs no more privileged than your own are listed, and the
                server re-checks that on submit.
              </div>
            </div>

            <div class="border rounded p-2 mb-3 small" ng-show="selectedACL" ng-cloak
                 style="max-height:220px; 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="nuOwner">Owner</label>
              <select class="form-select" id="nuOwner" ng-model="user.owner">
                <option value="">{{ userName }} (you)</option>
                {% for owner in owners %}
                  <option value="{{ owner }}">{{ owner }}</option>
                {% endfor %}
              </select>
              <div class="form-text">Administrators only.</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 ? 'Creating…' : 'Create account'"></span>
              </button>
            </div>
          </div>
        </div>
      </div>

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

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