{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Every account the signed-in tenant may administer. The row set comes from
   the server already filtered by the ownership walk — this page never asks
   for "all users". {% endcomment %}

{% block title %}Users{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Accounts</h1>
      <p class="text-muted mb-0 small">
        {% if isAdmin %}
          Every account on this server.
        {% else %}
          The accounts you own, walked down the ownership chain from
          <strong>{{ userName }}</strong>.
        {% endif %}
      </p>
    </div>
    {% if canCreateUser %}
      <a href="/users/createUser" class="btn btn-primary">
        <i class="fas fa-user-plus me-1"></i>New account
      </a>
    {% endif %}
  </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">
    <div class="card-body">

      <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
        <div class="input-group" style="max-width:320px">
          <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
          <input type="search" class="form-control" placeholder="Filter accounts"
                 ng-model="search" aria-label="Filter accounts">
        </div>
        <select class="form-select" style="max-width:200px" ng-model="roleFilter"
                aria-label="Filter accounts by role">
          <option value="">All roles</option>
          <option value="admin">Administrators</option>
          <option value="reseller">Resellers</option>
          <option value="user">Customers</option>
        </select>
        <span class="text-muted small ms-auto" ng-cloak>
          <span ng-bind="(users | filter:search | filter:{type: roleFilter}).length"></span>
          of <span ng-bind="users.length"></span> shown
        </span>
        <button type="button" class="btn btn-outline-secondary btn-sm"
                ng-click="load()" ng-disabled="busy">
          <i class="fas fa-rotate me-1"></i>Refresh
        </button>
      </div>

      <div ng-show="busy" class="text-center py-4" ng-cloak>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Loading accounts…
      </div>

      <div class="table-responsive" ng-show="!busy && users.length" ng-cloak>
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th scope="col">User</th>
              <th scope="col">Role / ACL</th>
              <th scope="col">Owner</th>
              <th scope="col" class="text-end">Sites</th>
              <th scope="col">State</th>
              <th scope="col">API</th>
              <th scope="col">Last login</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="u in users | filter:search | filter:{type: roleFilter}">
              <td>
                <strong ng-bind="u.userName"></strong>
                <span class="badge text-bg-primary ms-1" ng-show="u.isSelf">you</span>
                <div class="small text-muted">
                  <span ng-bind="u.fullName"></span> &middot; <span ng-bind="u.email"></span>
                </div>
              </td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="{'text-bg-danger': u.type === 'admin',
                                 'text-bg-warning': u.type === 'reseller',
                                 'text-bg-secondary': u.type === 'user'}"
                      ng-bind="u.type"></span>
                <div class="small text-muted" ng-bind="u.aclName"></div>
              </td>
              <td class="small" ng-bind="u.owner"></td>
              <td class="text-end" ng-bind="u.websites"></td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="u.state === 1 ? 'text-bg-success' : 'text-bg-dark'"
                      ng-bind="u.stateLabel"></span>
                <i class="fas fa-shield-halved text-success ms-1" ng-show="u.twoFA"
                   title="Two-factor enabled"></i>
              </td>
              <td>
                <code class="small" ng-show="u.tokenPrefix"
                      ng-bind="u.tokenPrefix + '…'"></code>
                <span class="text-muted small" ng-hide="u.tokenPrefix">none</span>
              </td>
              <td class="small" ng-bind="u.lastLogin"></td>
              <td class="text-end text-nowrap">
                <a class="btn btn-sm btn-outline-secondary"
                   ng-href="/users/securityLog?user={$ u.userName $}"
                   title="Login history"><i class="fas fa-clock-rotate-left"></i></a>
                {% if canCreateUser %}
                  <button type="button" class="btn btn-sm btn-outline-primary"
                          ng-click="logInAs(u.userName)"
                          ng-hide="u.isSelf || u.type === 'admin'"
                          title="Log in as this account"><i class="fas fa-user-secret"></i></button>
                {% endif %}
                {% if canChangeACL %}
                  <a class="btn btn-sm btn-outline-secondary"
                     ng-href="/users/modifyUser?user={$ u.userName $}"
                     title="Modify"><i class="fas fa-pen"></i></a>
                {% endif %}
                {% if canDeleteUser %}
                  <a class="btn btn-sm btn-outline-danger"
                     ng-href="/users/deleteUser?user={$ u.userName $}"
                     ng-hide="u.isSelf"
                     title="Delete"><i class="fas fa-user-slash"></i></a>
                {% endif %}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

  <p class="text-muted small mt-3 mb-0">
    <i class="fas fa-circle-info me-1"></i>
    API tokens are shown as a prefix only. The full value is displayed once, at
    the moment it is issued.
  </p>
</div>
{% endblock %}

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