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

{% block title %}People{% endblock %}

{% block content %}
<main>
  <section class="heading">
    <div>
      <p class="eyebrow">Permissions</p>
      <h1>People</h1>
      <p>Give a user a role. What that role may do is decided once, on the Access tab.</p>
    </div>
  </section>

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

  {% if page.updated %}<p class="notice">Updated. The person's next request uses the new role; they do not have to sign in again.</p>{% endif %}

  <section class="panel">
    <h2>Users<span class="count">{{ page.users.len() }}</span></h2>
    <p class="hint">
      You can only change someone whose role you outrank — {{ page.editable_users() }} of {{ page.users.len() }} here.
    </p>
    <div class="table-scroll">
      <table class="builder-table">
        <thead><tr><th>User</th><th>Email</th><th>Role</th><th>Change role</th><th>Reset password</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">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="New password" required>
                <input name="new_password_confirmation" type="password" autocomplete="new-password" placeholder="Confirm" required>
                <button type="submit">Reset</button>
              </form>
            </td>
            {% else %}
            <td colspan="2"><span class="hint">outranks you</span></td>
            {% endif %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

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