{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Editing an ACL's flags is gated exactly like creating one: the ACL as it
   stands, and the flags being requested, must both stay inside what the
   signed-in account already holds (ACLManager.aclGrantable, checked twice). {% endcomment %}

{% block title %}Modify ACL{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Modify an ACL</h1>
      <p class="text-muted mb-0 small">
        You can only grant permissions your own account already holds.
      </p>
    </div>
    <a href="/users/listACLs" class="btn btn-outline-secondary">
      <i class="fas fa-shield-halved me-1"></i>All ACLs
    </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="maSelect">ACL</label>
      <div class="d-flex flex-wrap gap-2">
        <select class="form-select" id="maSelect" style="max-width:420px"
                ng-model="selectedName" ng-change="select()"
                ng-options="a.name as (a.name + ' (' + a.role + ')') for a in acls">
          <option value="">Choose an ACL&hellip;</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="acl.name" ng-cloak>
    <div class="alert alert-secondary py-2 px-3 small" ng-show="acl.builtin">
      <i class="fas fa-circle-info me-1"></i>
      This is a built-in ACL. Its permissions can still be tuned, but it cannot be deleted.
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h2 class="h6 mb-3">
          Permissions for <code ng-bind="acl.name"></code>
        </h2>
        {% for label, fields in groups %}
        <div class="mb-3">
          <h3 class="h6 text-muted small text-uppercase mb-2">{{ label }}</h3>
          <div class="row row-cols-2 row-cols-md-3 g-2">
            {% for field in fields %}
            <div class="col">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="ma_{{ field }}"
                       ng-model="acl.flags['{{ field }}']">
                <label class="form-check-label small" for="ma_{{ field }}">{{ field }}</label>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <button type="submit" class="btn btn-primary" 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>
  </form>
</div>
{% endblock %}

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