{% extends "base.html" %}
{% block title %}Admin — {{ settings.APP_NAME }}{% endblock %}
{% block content %}
<div class="page">
  <h1 class="greeting">Admin</h1>
  <p style="margin:-4px 0 12px;font:var(--type-caption)">
    <a class="button-utility" href="/admin/pi">Pi Dashboard →</a>
  </p>
  <div class="admin-panel">
    <section class="stack">
      <h2 class="section-title">Users</h2>
      <table class="user-table">
        <thead>
          <tr>
            <th>User</th><th>Name</th><th>Role</th><th>Tools</th><th>Active</th>
          </tr>
        </thead>
        <tbody>
          {% for u in users %}
          <tr>
            <td>
              <strong>{{ u.username }}</strong>
              <form method="post" action="/admin/users/rename" style="display:flex;gap:4px;margin-top:6px">
                <input type="hidden" name="old_username" value="{{ u.username }}">
                <input class="text-input" name="new_username" value="{{ u.username }}" style="max-width:110px;padding:2px 6px" title="New username" aria-label="New username for {{ u.username }}">
                <button class="button-utility" type="submit" title="Rename user">↻</button>
              </form>
            </td>
            <td>{{ u.full_name }}</td>
            <td>
              {% if u.is_admin %}<span class="badge badge-admin">admin</span>
              {% else %}<span class="badge">member</span>{% endif %}
            </td>
            <td class="faint">
              {%- if u.can_chat %}{{ 'chat' }}{% if u.can_image or u.can_video or u.can_audio or u.can_docs %}, {% endif %}{% endif -%}
              {%- if u.can_image %}{{ 'image' }}{% if u.can_video or u.can_audio or u.can_docs %}, {% endif %}{% endif -%}
              {%- if u.can_video %}{{ 'video' }}{% if u.can_audio or u.can_docs %}, {% endif %}{% endif -%}
              {%- if u.can_audio %}{{ 'audio' }}{% if u.can_docs %}, {% endif %}{% endif -%}
              {%- if u.can_docs %}{{ 'docs' }}{% endif -%}
              {%- if not u.can_chat and not u.can_image and not u.can_video and not u.can_audio and not u.can_docs %}none{% endif -%}
            </td>
            <td>{{ 'yes' if u.is_active else 'no' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <p class="faint margin-top" style="font: var(--type-caption)">
        Renaming a user changes their login username; password, permissions and S3 bucket name are kept (files are not moved).
      </p>
    </section>

    <section class="linkout-card stack">
      <h2 class="section-title">Add user</h2>
      {% if error %}<div class="form-error">{{ error }}</div>{% endif %}
      <form method="post" action="/admin/users">
        <div class="form-field">
          <label for="nu">Username</label>
          <input class="text-input" id="nu" name="username" required>
        </div>
        <div class="form-field">
          <label for="nf">Full name</label>
          <input class="text-input" id="nf" name="full_name">
        </div>
        <div class="form-field">
          <label for="np">Password</label>
          <input class="text-input" type="password" id="np" name="password" required>
        </div>
        <button class="button button-primary width-full" type="submit">Create user</button>
      </form>
      <p class="faint margin-top" style="font: var(--type-caption)">
        New users can log in right away; their S3 bucket is created in the background.
      </p>
    </section>
  </div>
</div>
{% endblock %}