{% extends "admin/_layout.html" %}
{% from "_macros.html" import icon %}
{% set section = "users" %}

{% block title %}Users - {{ brand.name }}{% endblock %}
{% block heading %}Users{% endblock %}

{% block admin_content %}
<p class="admin-lede">
  Every account on this instance. Open one to see what it can actually do and
  where each of those permissions came from. Group membership is edited from the
  <a href="/admin/groups">group's</a> own page — one control per value, so a save
  on one screen cannot undo a save on another.
</p>

{% if saved %}
<div class="alert alert--success">{{ icon("check", "icon--sm") }} <span>{{ saved }}</span></div>
{% endif %}

<div class="filter-bar">
  <form class="filter-form" method="get" action="/admin/users">
    <input class="input" type="search" name="q" value="{{ q }}"
           placeholder="Search by name or email…" aria-label="Search users">
    <button class="btn" type="submit">{{ icon("search", "icon--sm") }} Filter</button>
    {% if q %}<a class="btn btn--ghost" href="/admin/users">Clear</a>{% endif %}
  </form>
</div>

<div class="model-rows">
  {% for person in users %}
  <a class="model-row" href="/admin/users/{{ person.id }}">
    <div class="model-row__main">
      <span class="model-row__name">
        {{ person.name }}
        {% if person.role == "admin" %}<span class="badge badge--leaf">admin</span>{% endif %}
        {% if person.role == "pending" %}<span class="badge">pending</span>{% endif %}
        {% if not person.active %}<span class="badge">disabled</span>{% endif %}
      </span>
      <span class="model-row__id">{{ person.email }}</span>
    </div>
    <div class="model-row__meta">
      {% if person.groups %}
      <span class="text-xs faint">
        {{ person.groups | map(attribute="name") | join(", ") }}
      </span>
      {% endif %}
      {% set spent = usage[person.id] %}
      {% if spent.tokens %}
      <span class="badge" title="Tokens this month">{{ "{:,}".format(spent.tokens) }}</span>
      {% endif %}
    </div>
  </a>
  {% else %}
  <div class="empty" style="padding: var(--sp-8) 0">
    <p class="empty__text">{{ "Nobody matches that." if q else "No accounts yet." }}</p>
  </div>
  {% endfor %}
</div>

{% if pager.pages > 1 %}
<div class="btn-row" style="margin-top: var(--sp-5)">
  {% if pager.page > 1 %}
  <a class="btn btn--sm" href="/admin/users?page={{ pager.page - 1 }}{% if q %}&q={{ q|urlencode }}{% endif %}">
    {{ icon("chevron-left", "icon--sm") }} Previous
  </a>
  {% endif %}
  <span class="text-sm faint">Page {{ pager.page }} of {{ pager.pages }} · {{ pager.total }} accounts</span>
  {% if pager.page < pager.pages %}
  <a class="btn btn--sm" href="/admin/users?page={{ pager.page + 1 }}{% if q %}&q={{ q|urlencode }}{% endif %}">
    Next {{ icon("chevron-right", "icon--sm") }}
  </a>
  {% endif %}
</div>
{% endif %}

<section class="card" style="margin-top: var(--sp-8)">
  <h2 class="card__title">Add an account</h2>
  <p class="card__lede">
    Without going through registration — useful when sign-up is closed.
  </p>
  <form method="post" action="/admin/users" class="form-grid">
    <div class="field-row">
      <div class="field">
        <label class="field__label" for="new-name">Name</label>
        <input class="input" id="new-name" name="name" required>
      </div>
      <div class="field">
        <label class="field__label" for="new-email">Email</label>
        <input class="input" id="new-email" name="email" type="email" required>
      </div>
      <div class="field">
        <label class="field__label" for="new-password">Password</label>
        <input class="input" id="new-password" name="password" type="password" required>
      </div>
      <div class="field">
        <label class="field__label" for="new-role">Role</label>
        <select class="input" id="new-role" name="role">
          {% for role in roles %}<option value="{{ role }}">{{ role }}</option>{% endfor %}
        </select>
      </div>
    </div>
    <div class="btn-row">
      <button class="btn btn--primary" type="submit">
        {{ icon("plus", "icon--sm") }} Create account
      </button>
    </div>
  </form>
</section>
{% endblock %}