{% extends "admin/_base.html" %}
{% from "admin/_row_actions.html" import row_actions %}
{% block content %}
<nav class="rio-crumbs"><a href="/admin">Home</a><span class="rio-crumb-sep">·</span><span class="rio-crumb-current">Users</span></nav>
<div class="rio-masthead-top">
<div>
<h1>Users</h1>
<p class="rio-masthead-desc">Operator accounts — role, last sign-in, and MFA enrolment.</p>
</div>
<div class="rio-masthead-cta">
<a class="rio-btn rio-btn--primary rio-btn--md" href="/admin/users/new">{{ icon("plus") }} Add user</a>
</div>
</div>
<div class="rio-board">
{% if users %}
<div style="overflow:auto">
<table class="rio-dtable">
<thead><tr><th>User</th><th>Role</th><th>Active</th><th>Created</th><th class="col-act"> </th></tr></thead>
<tbody>
{% for u in users %}
<tr>
<td>
<div class="rio-prod">
<span class="rio-mono-tile">{{ u.email | first | upper }}</span>
<span class="rio-prod-text"><a class="rio-prod-name" href="/admin/users/{{ u.id }}">{{ u.email }}</a><span class="rio-prod-cat">#{{ u.id }}</span></span>
</div>
</td>
<td>{{ u.role }}</td>
<td><span class="rio-pill rio-pill--{% if u.is_active %}on{% else %}off{% endif %}">{% if u.is_active %}Active{% else %}Inactive{% endif %}</span></td>
<td style="font-family:var(--rio-font-mono);font-size:var(--rio-text-13);color:var(--rio-text-mute)">{{ u.created_at }}</td>
<td class="col-act">{{ row_actions("users", u.id) }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="rio-board-foot"><span style="font-size:13px;color:var(--rio-text-mute)">Showing <strong style="color:var(--rio-text-hi);font-weight:600">{{ users|length }}</strong> account{% if users|length != 1 %}s{% endif %}</span></div>
{% else %}
<div class="rio-empty">
{{ icon("users") }}
<div class="rio-empty-title">No users yet</div>
<div>Add an account to grant admin access — role controls what they can see and change.</div>
<div style="margin-block-start:14px"><a class="rio-btn rio-btn--primary rio-btn--md" href="/admin/users/new">{{ icon("plus") }} Add user</a></div>
</div>
{% endif %}
</div>
{% endblock %}