{% 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>
        {% for perm in permissions %}
          <label class="check"><input type="checkbox" name="permission_ids" value="{{ perm.id }}"> {{ perm.name }}</label>
        {% else %}
          <span class="muted">No permissions defined. Run the seed script.</span>
        {% endfor %}
      </fieldset>
      <button type="submit" class="btn btn-primary">Add role</button>
    </form>
  </div>

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