{% extends "admin/_base.html" %}
{% from "admin/_row_actions.html" import row_actions %}
{% block content %}
{# v0.19 โ unified page header pattern (cards.css). The previous
# variation across users / groups / history / notifications pages
# was the single biggest source of "feels random" cross-page
# inconsistency. #}
<header class="rio-page-header">
<nav class="rio-breadcrumbs"><a href="/admin">Home</a> ยท <span>Users</span></nav>
<div class="rio-page-actions">
<h1>Users</h1>
<a class="rio-button rio-button--primary" href="/admin/users/new">{{ icon("plus", class="rio-icon") }} Add user</a>
</div>
<p class="rio-page-header__lead">Operator accounts โ role, last sign-in, MFA enrolment.</p>
</header>
<section class="rio-section" aria-label="Users">
<header class="rio-section__header">
<div class="rio-section__heading">
<span class="rio-section__label">All users</span>
<h2 class="rio-section__title">{{ users|length }} account{% if users|length != 1 %}s{% endif %}</h2>
</div>
</header>
<div class="rio-card rio-card--quiet rio-list">
{% if users %}
<table class="rio-table rio-table--striped">
<thead>
<tr>
<th class="rio-th">ID</th>
<th class="rio-th">Email</th>
<th class="rio-th">Role</th>
<th class="rio-th">Active</th>
<th class="rio-th">Created</th>
<th class="rio-th rio-th--actions">Actions</th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr>
<td class="rio-td rio-td--number"><a href="/admin/users/{{ u.id }}">{{ u.id }}</a></td>
<td class="rio-td rio-td--text" title="{{ u.email }}"><a href="/admin/users/{{ u.id }}">{{ u.email }}</a></td>
<td class="rio-td">{{ u.role }}</td>
<td class="rio-td">{% if u.is_active %}Yes{% else %}No{% endif %}</td>
<td class="rio-td rio-td--datetime">{{ u.created_at }}</td>
<td class="rio-td rio-td--actions">{{ row_actions("users", u.id) }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="rio-empty-state">
<div class="rio-empty-state__icon">{{ icon("users", class="rio-icon") }}</div>
<h3 class="rio-empty-state__title">No users yet</h3>
<p class="rio-empty-state__lead">
Add an account to grant access to the admin panel โ role
controls what they can see and change.
</p>
<a class="rio-button rio-button--primary" href="/admin/users/new">{{ icon("plus", class="rio-icon") }} Add user</a>
</div>
{% endif %}
</div>
</section>
{% endblock %}