{% extends "layout.twig" %}

{% set errorMessages = {
    'self_demote': 'You cannot demote yourself — ask another admin.',
    'last_admin':  'Cannot demote the last remaining admin.',
    'not_found':   'User not found.',
    'db_error':    'Could not save. Try again.',
} %}
{% set flashMessages = {
    'promoted': 'Admin granted.',
    'demoted':  'Admin revoked.',
    'noop':     'Nothing changed.',
} %}

{% block content %}
<section class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold tracking-tight">Users</h1>
        <p class="text-slate-600 text-sm mt-1 max-w-prose dark:text-slate-400">
            Everyone who has ever signed in. Toggle admin status here; you
            cannot demote yourself or the last admin. Users are never deleted
            — inactive accounts simply stop signing in.
        </p>
    </div>

    {% if error and errorMessages[error] is defined %}
        <div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200">
            {{ errorMessages[error] }}
        </div>
    {% endif %}
    {% if flash and flashMessages[flash] is defined %}
        <div class="rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:bg-green-900 dark:border-green-800 dark:text-green-200">
            {{ flashMessages[flash] }}
        </div>
    {% endif %}

    <div class="rounded-lg border bg-white overflow-hidden dark:bg-slate-800 dark:border-slate-700">
        {% if users is empty %}
            <div class="p-8 text-center text-slate-500 text-sm dark:text-slate-400">No users yet.</div>
        {% else %}
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-slate-600 text-xs uppercase tracking-wider dark:bg-slate-700 dark:text-slate-300">
                    <tr>
                        <th class="text-left px-4 py-2 font-semibold">Email</th>
                        <th class="text-left px-4 py-2 font-semibold">Display name</th>
                        <th class="text-left px-4 py-2 font-semibold">Last login (UTC)</th>
                        <th class="text-left px-4 py-2 font-semibold">Admin</th>
                        <th class="text-right px-4 py-2 font-semibold">&nbsp;</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                    {% for u in users %}
                        {% set isSelf = u.id == currentUser.id %}
                        <tr>
                            <form method="post" action="/users/{{ u.id }}" hx-boost="true" hx-target="body" class="contents">
                                <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                                <td class="px-4 py-2 font-mono text-xs">
                                    {{ u.email }}
                                    {% if isSelf %}
                                        <span class="ml-1 inline-block px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider bg-slate-100 text-slate-700 rounded dark:bg-slate-700 dark:text-slate-200">you</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-2">{{ u.displayName }}</td>
                                <td class="px-4 py-2 text-slate-500 font-mono text-xs dark:text-slate-400">
                                    {% if u.lastLoginAt is not null %}{{ u.lastLoginAt }}{% else %}<span class="text-slate-400 dark:text-slate-500">—</span>{% endif %}
                                </td>
                                <td class="px-4 py-2">
                                    <label class="inline-flex items-center gap-2">
                                        <input name="is_admin" type="checkbox" value="1"
                                               {{ u.isAdmin ? 'checked' : '' }}
                                               {% if isSelf and u.isAdmin %}disabled title="You cannot demote yourself"{% endif %}
                                               class="rounded border-slate-300 dark:border-slate-600">
                                        <span class="text-slate-600 dark:text-slate-400">admin</span>
                                    </label>
                                </td>
                                <td class="px-4 py-2 text-right">
                                    <button type="submit"
                                            class="rounded-md border border-slate-300 bg-white text-slate-700 px-3 py-1 text-sm hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                                        Save
                                    </button>
                                </td>
                            </form>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
</section>
{% endblock %}