{% extends "base.html" %}
{% block title %}New Role — {{ library_name() }}{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
  <ul>
    <li><a href="/ui/roles">Roles</a></li>
    <li>New Role</li>
  </ul>
</nav>

<h2>Create Role</h2>

{% if error %}<p class="error-banner">{{ error }}</p>{% endif %}

<form method="post" action="/ui/roles/new">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required autofocus autocomplete="off">

  <fieldset id="perm-fieldset">
    <legend>Permissions</legend>
    <label>
      <input type="checkbox" id="full-access" name="full_access" value="on">
      <strong>Full access</strong> — grants all permissions (stores <code>["*"]</code>)
    </label>
    <p id="fa-restore-notice" class="warning-banner" hidden>
      Restored Librarian defaults — adjust as needed.
    </p>
    <hr>
    <div id="perm-groups">
      {% for category, perms in permission_groups %}
      <fieldset>
        <legend>{{ category }}</legend>
        {% set _scoped = namespace(v=false) %}
        {% for p in perms %}{% if p.endswith('.self') or p.endswith('.any') %}{% set _scoped.v = true %}{% endif %}{% endfor %}
        {% if _scoped.v %}
        <p><small>Permissions ending in <code>.self</code> apply only to the signed-in user's own records; <code>.any</code> applies to any patron's.</small></p>
        {% endif %}
        {% for perm in perms %}
        <label>
          <input type="checkbox" name="permissions" value="{{ perm }}" class="perm-check">
          {{ permission_descriptions.get(perm, perm) }}
          <code class="perm-token">{{ perm }}</code>
        </label>
        {% endfor %}
      </fieldset>
      {% endfor %}
    </div>
  </fieldset>

  <div style="margin-top:1rem; display:flex; gap:0.5rem">
    <button type="submit">Create Role</button>
    <a href="/ui/roles" role="button" class="outline secondary">Cancel</a>
  </div>
</form>
{% endblock %}
{% block scripts %}
<script nonce="{{ csp_nonce(request) }}">
var LIBRARIAN_DEFAULTS = {{ librarian_defaults | tojson }};
(function () {
  var fa = document.getElementById('full-access');
  if (!fa) return;
  var snapshot = null;
  function boxes() { return Array.prototype.slice.call(document.querySelectorAll('.perm-check')); }
  fa.addEventListener('change', function (e) {
    var bs = boxes();
    var notice = document.getElementById('fa-restore-notice');
    if (e.target.checked) {
      snapshot = bs.filter(function (b) { return b.checked; }).map(function (b) { return b.value; });
      bs.forEach(function (b) { b.disabled = true; b.checked = false; });
      if (notice) notice.hidden = true;
    } else {
      var usingFallback = !(snapshot && snapshot.length);
      var restore = usingFallback ? LIBRARIAN_DEFAULTS : snapshot;
      bs.forEach(function (b) { b.disabled = false; b.checked = restore.indexOf(b.value) !== -1; });
      if (notice) notice.hidden = !usingFallback;
    }
  });
})();
</script>
{% endblock %}