{% 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>
    <hr>
    <div id="perm-groups">
      {% for category, perms in permission_groups %}
      <fieldset>
        <legend>{{ category }}</legend>
        {% for perm in perms %}
        <label>
          <input type="checkbox" name="permissions" value="{{ perm }}" class="perm-check">
          <code>{{ perm }}</code>{% if permission_descriptions.get(perm) %}<span class="field-hint" data-tooltip="{{ permission_descriptions[perm] }}">ⓘ</span>{% endif %}
        </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) }}">
function togglePerms(cb) {
  document.querySelectorAll('.perm-check').forEach(el => {
    el.disabled = cb.checked;
    if (cb.checked) el.checked = false;
  });
}
const _fa = document.getElementById('full-access');
if (_fa) _fa.addEventListener('change', (e) => togglePerms(e.target));
</script>
{% endblock %}