{% extends "base.html" %}
{% block title %}Roles · {{ app_name }}{% endblock %}
{% block body %}
{% include "_nav.html" %}
<main class="container">
  <h1>Roles &amp; permissions</h1>

  <div class="card">
    <h2>Create role</h2>
    <form hx-post="/admin/roles" hx-target="#role-list" hx-swap="outerHTML" class="form-grid">
      <label>Name <input type="text" name="name" required></label>
      <label>Description <input type="text" name="description"></label>
      <fieldset class="roles-field">
        <legend>Permissions</legend>
        {% if scopes %}
        <table class="perm-matrix">
          <thead>
            <tr>
              <th></th>
              {% for action in actions %}<th>{{ action }}</th>{% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for scope in scopes %}
            <tr>
              <td class="perm-scope">{{ scope }}</td>
              {% for action in actions %}
                {% set key = scope ~ ':' ~ action %}
                {% if key in perm_map %}
                  {% set p = perm_map[key] %}
                  <td class="perm-cell"><input type="checkbox" name="permission_ids" value="{{ p.id }}"></td>
                {% else %}
                  <td class="perm-cell perm-na">—</td>
                {% endif %}
              {% endfor %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
          <span class="muted">No permissions defined. Run the seed script.</span>
        {% endif %}
      </fieldset>
      <button type="submit" class="btn btn-primary">Add role</button>
    </form>
  </div>

  {% include "admin/_roles_table.html" %}
</main>
{% endblock %}