{% extends "layout.twig" %}

{% block content %}
<section class="max-w-md mx-auto mt-6">
    <div class="rounded-lg border bg-white p-6 dark:bg-slate-800 dark:border-slate-700">
        <div class="flex justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="144" height="144" aria-hidden="true" class="block" fill="none">
                <defs>
                    <radialGradient id="brand-cycle-glow-card" cx="32" cy="32" r="20" gradientUnits="userSpaceOnUse">
                        <stop offset="0"   stop-color="#6366f1" stop-opacity="0.55"/>
                        <stop offset="0.6" stop-color="#6366f1" stop-opacity="0.12"/>
                        <stop offset="1"   stop-color="#6366f1" stop-opacity="0"/>
                    </radialGradient>
                </defs>
                <circle cx="32" cy="32" r="20" fill="url(#brand-cycle-glow-card)"/>
                <path d="M52 32 A20 20 0 1 1 32 12" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
                <path d="M44 8 L52 12 L48 20" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="32" cy="32" r="5"  fill="#6366f1"/>
                <circle cx="48" cy="20" r="2.5" fill="currentColor" opacity="0.55"/>
                <circle cx="52" cy="40" r="2.5" fill="currentColor" opacity="0.55"/>
                <circle cx="40" cy="50" r="2.5" fill="currentColor" opacity="0.55"/>
                <circle cx="20" cy="48" r="2.5" fill="currentColor" opacity="0.55"/>
                <circle cx="14" cy="32" r="2.5" fill="#10b981"/>
            </svg>
        </div>
        <h1 class="text-xl font-semibold tracking-tight">Local admin sign-in</h1>
        <p class="text-slate-600 text-sm mt-1 dark:text-slate-400">
            Use this form only while Entra ID is not yet configured. Credentials
            come from the <code>LOCAL_ADMIN_*</code> environment variables.
        </p>

        {% if error %}
            <div class="mt-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200">
                Email or password did not match.
            </div>
        {% endif %}

        {% if throttled %}
            <div class="mt-4 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:bg-amber-900 dark:border-amber-800 dark:text-amber-200">
                Too many failed attempts. Please wait a few minutes before trying again.
            </div>
        {% endif %}

        <form method="post" action="/auth/local" hx-boost="true" hx-target="body"
              class="mt-4 space-y-3" autocomplete="off">
            <input type="hidden" name="_csrf" value="{{ csrfToken }}">

            <label class="block">
                <span class="text-sm text-slate-700 dark:text-slate-300">Email</span>
                <input type="email" name="email" required
                       value="{{ email }}"
                       class="mt-1 block w-full rounded-md border-slate-300 shadow-sm
                              px-3 py-2 border focus:outline-none focus:ring-2
                              focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
            </label>

            <label class="block">
                <span class="text-sm text-slate-700 dark:text-slate-300">Password</span>
                <input type="password" name="password" required autofocus
                       class="mt-1 block w-full rounded-md border-slate-300 shadow-sm
                              px-3 py-2 border focus:outline-none focus:ring-2
                              focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
            </label>

            <button type="submit"
                    class="w-full rounded-md bg-slate-900 text-white px-4 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
                Sign in
            </button>
        </form>

        <p class="text-xs text-slate-500 mt-4 dark:text-slate-400">
            <a href="/" class="hover:underline">← Back</a>
        </p>
    </div>
</section>
{% endblock %}