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

{% block title %}{{ nav.tr("perm-tab-roles") }}{% endblock %}

{% block content %}
<main>
  <section class="heading">
    <div>
      <p class="eyebrow">{{ nav.tr("perm-eyebrow") }}</p>
      <h1>{{ nav.tr("perm-tab-roles") }}</h1>
      <p>{{ nav.tr("roles-description") }}</p>
    </div>
  </section>

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

  {% if page.updated %}<p class="notice">{{ nav.tr("roles-updated-notice") }}</p>{% endif %}

  <section class="panel">
    <h2>{{ nav.tr("roles-new-heading") }}</h2>
    <p class="hint">{{ nav.tr("roles-new-hint") }}</p>
    <form hx-post="/permissions/roles/create" hx-target="#permission-status" class="form-grid">
      <label>{{ nav.tr("roles-name") }}<input name="name" required maxlength="50" placeholder="sales"></label>
      <label>{{ nav.tr("roles-inherits-from") }}
        <select name="parent">
          <option value="">{{ nav.tr("roles-inherits-none") }}</option>
          {% for parent in page.parents %}<option value="{{ parent }}">{{ parent }}</option>{% endfor %}
        </select>
      </label>
      <label>{{ nav.tr("roles-starter-access") }}
        <select name="access">
          <option value="none">{{ nav.tr("roles-access-none") }}</option>
          <option value="read">{{ nav.tr("roles-access-read") }}</option>
          <option value="full">{{ nav.tr("roles-access-full") }}</option>
        </select>
      </label>
      <div class="form-actions"><button type="submit">{{ nav.tr("roles-create-button") }}</button></div>
    </form>
  </section>

  <section class="panel">
    <h2>{{ nav.tr("roles-existing") }}<span class="count">{{ page.roles.len() }}</span></h2>
    <div class="table-scroll">
      <table class="builder-table">
        <thead><tr><th>{{ nav.tr("roles-th-role") }}</th><th>{{ nav.tr("roles-th-kind") }}</th><th>{{ nav.tr("roles-th-inherits") }}</th><th>{{ nav.tr("roles-th-people") }}</th><th>{{ nav.tr("roles-th-access") }}</th><th>{{ nav.tr("roles-th-remove") }}</th></tr></thead>
        <tbody>
          {% for role in page.roles %}
          <tr>
            <td>{{ role.name }}{% if role.built_in %} <span class="tag">{{ nav.tr("roles-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 }}">{{ nav.tr("roles-edit-access") }}</a>
              {% else %}
                <span class="hint">{{ nav.tr("perm-role-reason-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">{{ nav.tr("common-remove") }}</button>
              </form>
              {% else %}
                <span class="hint">{{ role.keeps_reason(nav.locale) }}</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

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