{% extends 'layout.twig' %}

{% block title %}My identity — IRDB{% endblock %}

{% block content %}
<div class="mx-auto max-w-3xl">
    <h1 class="text-2xl font-semibold tracking-tight">My identity</h1>
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
        How the API sees the request you're making right now. Source of truth is <code>GET /api/v1/admin/me</code>.
    </p>

    {% if not api_reachable %}
        <div class="mt-4 rounded-md border border-amber-300 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300">
            Could not reach the API; values below are from your session cache.
        </div>
    {% endif %}

    <dl class="mt-6 grid grid-cols-1 gap-y-4 rounded-2xl border border-slate-200 bg-white p-6 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:grid-cols-3 sm:gap-x-6">
        <dt class="font-medium text-slate-500 dark:text-slate-400">User ID</dt>
        <dd class="font-mono text-slate-900 dark:text-slate-100 sm:col-span-2">{{ user_id }}</dd>

        <dt class="font-medium text-slate-500 dark:text-slate-400">Display name</dt>
        <dd class="text-slate-900 dark:text-slate-100 sm:col-span-2">{{ display_name }}</dd>

        <dt class="font-medium text-slate-500 dark:text-slate-400">Email</dt>
        <dd class="text-slate-900 dark:text-slate-100 sm:col-span-2">{{ email|default('—') }}</dd>

        <dt class="font-medium text-slate-500 dark:text-slate-400">Role</dt>
        <dd class="sm:col-span-2">
            <span class="rounded bg-indigo-100 px-2 py-0.5 font-mono text-xs uppercase text-indigo-800 dark:bg-indigo-950 dark:text-indigo-300">{{ role }}</span>
        </dd>

        <dt class="font-medium text-slate-500 dark:text-slate-400">Source</dt>
        <dd class="text-slate-900 dark:text-slate-100 sm:col-span-2">{{ source }}</dd>
    </dl>

    <form method="post" action="/logout" class="mt-6">
        {% include 'partials/csrf.twig' %}
        <button type="submit"
                class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800">
            Sign out
        </button>
    </form>
</div>
{% endblock %}