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

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

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

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

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

  <section class="panel">
    <h2>{{ nav.tr("users-heading") }}<span class="count">{{ page.users.len() }}</span></h2>
    <p class="hint">{{ nav.tr_args("users-outrank-hint", [("editable", page.editable_users().to_string()), ("total", page.users.len().to_string())]) }}</p>
    <div class="table-scroll">
      <table class="builder-table">
        <thead><tr><th>{{ nav.tr("users-th-user") }}</th><th>{{ nav.tr("users-th-email") }}</th><th>{{ nav.tr("users-th-role") }}</th><th>{{ nav.tr("users-th-change") }}</th><th>{{ nav.tr("users-th-reset") }}</th></tr></thead>
        <tbody>
          {% for user in page.users %}
          <tr>
            <td>{{ user.username }}</td>
            <td>{% if user.email.is_empty() %}<span class="hint">—</span>{% else %}{{ user.email }}{% endif %}</td>
            <td>{{ user.role }}</td>
            {% if user.editable %}
            <td>
              <form hx-post="/permissions/users/role" hx-target="#permission-status" class="actions">
                <input type="hidden" name="username" value="{{ user.username }}">
                <select name="role">
                  {% for role in page.roles %}<option value="{{ role }}" {% if user.role == role.as_str() %}selected{% endif %}>{{ role }}</option>{% endfor %}
                </select>
                <button type="submit">{{ nav.tr("users-assign") }}</button>
              </form>
            </td>
            <td>
              <form hx-post="/permissions/users/password" hx-target="#permission-status" class="actions">
                <input type="hidden" name="username" value="{{ user.username }}">
                <input name="new_password" type="password" autocomplete="new-password" placeholder="{{ nav.tr("field-new-password") }}" required>
                <input name="new_password_confirmation" type="password" autocomplete="new-password" placeholder="{{ nav.tr("users-confirm") }}" required>
                <button type="submit">{{ nav.tr("users-reset") }}</button>
              </form>
            </td>
            {% else %}
            <td colspan="2"><span class="hint">{{ nav.tr("perm-role-reason-outranks-you") }}</span></td>
            {% endif %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

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