{# GET /permissions/roles — crate::pages::permissions::roles::ui::RolesTemplate #}
{% extends "ui/base.html" %}

{% block title %}Roles{% endblock %}

{% block content %}
<main>
  <section class="heading">
    <div>
      <p class="eyebrow">Permissions</p>
      <h1>Roles</h1>
      <p>A role is a named set of permissions. People are given roles; roles are given access.</p>
    </div>
  </section>

  {% include "pages/permissions/tabs.html" %}

  {% if page.updated %}<p class="notice">Roles updated. Signed-in sessions stay valid and pick up the change on their next request.</p>{% endif %}

  <section class="panel">
    <h2>New role</h2>
    <p class="hint">
      Inheriting from another role starts the new one with everything that role has, and keeps it in step
      as that role changes. Starter access is a shortcut for the two common cases; anything narrower is a
      few clicks on the Access tab.
    </p>
    <form hx-post="/permissions/roles/create" hx-target="#permission-status" class="form-grid">
      <label>Name<input name="name" required maxlength="50" placeholder="sales"></label>
      <label>Inherits from
        <select name="parent">
          <option value="">Nothing — starts empty</option>
          {% for parent in page.parents %}<option value="{{ parent }}">{{ parent }}</option>{% endfor %}
        </select>
      </label>
      <label>Starter access
        <select name="access">
          <option value="none">None — grant it on the Access tab</option>
          <option value="read">Read everything</option>
          <option value="full">Read and write everything</option>
        </select>
      </label>
      <div class="form-actions"><button type="submit">Create role</button></div>
    </form>
  </section>

  <section class="panel">
    <h2>Existing roles<span class="count">{{ page.roles.len() }}</span></h2>
    <div class="table-scroll">
      <table class="builder-table">
        <thead><tr><th>Role</th><th>Kind</th><th>Inherits from</th><th>People</th><th>Access</th><th>Remove</th></tr></thead>
        <tbody>
          {% for role in page.roles %}
          <tr>
            <td>{{ role.name }}{% if role.built_in %} <span class="tag">built in</span>{% endif %}</td>
            <td>{{ role.kind }}</td>
            <td>{% if role.parent.is_empty() %}<span class="hint">—</span>{% else %}{{ role.parent }}{% endif %}</td>
            <td>{% match role.users %}{% when Some with (count) %}{{ count }}{% when None %}<span class="hint">—</span>{% endmatch %}</td>
            <td>
              {% if role.editable %}
                <a class="link-action" href="/permissions/grants?role={{ role.name }}">Edit access</a>
              {% else %}
                <span class="hint">outranks you</span>
              {% endif %}
            </td>
            <td>
              {% if role.removable() %}
              <form hx-post="/permissions/roles/remove" hx-target="#permission-status">
                <input type="hidden" name="role" value="{{ role.name }}">
                <button type="submit" class="danger">Remove</button>
              </form>
              {% else %}
                <span class="hint">{{ role.keeps_reason() }}</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <div id="permission-status" aria-live="polite"></div>
</main>
{% endblock %}