{% extends "base.html" %}
{% block title %}Login — MemoryLens{% endblock %}
{% block content %}
<div class="flex items-center justify-center min-h-[80vh]">
    <div class="w-full max-w-sm px-6">
        <div class="mb-8 text-center">
            <h1 class="text-2xl font-bold text-white mb-1">MemoryLens</h1>
            <p class="text-xs text-white/40">Enter your API key to continue</p>
        </div>

        {% if error %}
        <div class="mb-4 px-4 py-3 rounded bg-red-500/15 border border-red-500/20 text-red-400 text-xs">
            {{ error }}
        </div>
        {% endif %}

        <form method="post" action="/login" class="flex flex-col gap-4">
            <div>
                <label class="block text-xs text-white/50 mb-1.5" for="key">API Key</label>
                <input
                    id="key"
                    name="key"
                    type="password"
                    placeholder="ml_..."
                    autocomplete="current-password"
                    class="w-full px-3 py-2 rounded bg-white/5 border border-white/10 text-sm text-white placeholder-white/20 focus:outline-none focus:border-indigo-500/60 focus:bg-white/8"
                    required
                />
            </div>
            <button
                type="submit"
                class="w-full py-2 rounded bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold transition-colors"
            >
                Sign in
            </button>
        </form>

        <p class="mt-6 text-center text-[11px] text-white/20">
            No key? Run <code class="bg-white/5 px-1 rounded">memorylens auth create-key "admin" --role admin</code>
        </p>
    </div>
</div>
{% endblock %}