{% extends "base.html" %}
{% block title %}Login — lazyflat{% endblock %}
{% block body %}
<main class="flex min-h-screen items-center justify-center p-4">
    <div class="card w-full max-w-sm p-8">
        <h1 class="text-2xl font-semibold mb-1">lazyflat</h1>
        <p class="text-sm text-slate-400 mb-6">Anmeldung erforderlich</p>

        {% if error %}
            <div class="chip chip-bad inline-block mb-4">{{ error }}</div>
        {% endif %}

        <form method="post" action="/login" class="space-y-4">
            <div>
                <label class="block text-xs uppercase tracking-wide text-slate-400 mb-1">Benutzer</label>
                <input type="text" name="username" autocomplete="username" required
                       class="w-full bg-[#0b0d12] border border-[#1e2335] rounded-lg px-3 py-2 focus:outline-none focus:border-[#5b8def]">
            </div>
            <div>
                <label class="block text-xs uppercase tracking-wide text-slate-400 mb-1">Passwort</label>
                <input type="password" name="password" autocomplete="current-password" required
                       class="w-full bg-[#0b0d12] border border-[#1e2335] rounded-lg px-3 py-2 focus:outline-none focus:border-[#5b8def]">
            </div>
            <button type="submit" class="btn btn-primary w-full">Anmelden</button>
        </form>
    </div>
</main>
{% endblock %}