{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Every ACL on the server. Deletion is refused server-side while an ACL
   is still assigned to an account, or while it is one of the three built-in
   roles the installer seeds -- the UI only echoes that, it does not decide it. {% endcomment %}

{% block title %}ACLs{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">ACLs</h1>
      <p class="text-muted mb-0 small">
        Permission sets. Assign one to an account from
        <a href="/users/modifyUser">Modify user</a>.
      </p>
    </div>
    <a href="/users/createACL" class="btn btn-primary">
      <i class="fas fa-shield-halved me-1"></i>New ACL
    </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">
    <div class="card-body">

      <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 ACLs&hellip;
      </div>

      <div class="table-responsive" ng-show="!busy && acls.length" ng-cloak>
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Role</th>
              <th scope="col" class="text-end">Permissions granted</th>
              <th scope="col" class="text-end">Assigned to</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="a in acls">
              <td>
                <strong ng-bind="a.name"></strong>
                <span class="badge text-bg-secondary ms-1" ng-show="a.builtin">built-in</span>
              </td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="{'text-bg-danger': a.role === 'admin',
                                 'text-bg-warning': a.role === 'reseller',
                                 'text-bg-secondary': a.role === 'user'}"
                      ng-bind="a.role"></span>
              </td>
              <td class="text-end" ng-bind="a.grantedCount"></td>
              <td class="text-end" ng-bind="a.assignedCount"></td>
              <td class="text-end text-nowrap">
                <a class="btn btn-sm btn-outline-secondary"
                   ng-href="/users/modifyACL?acl={$ a.name $}"
                   title="Modify"><i class="fas fa-pen"></i></a>
                <button type="button" class="btn btn-sm btn-outline-danger"
                        ng-hide="a.builtin" ng-click="remove(a)"
                        title="Delete"><i class="fas fa-trash-can"></i></button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="text-center text-muted py-4" ng-show="!busy && !acls.length" ng-cloak>
        No ACLs yet.
      </div>

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

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