{% extends 'base.html' %}
{% block title %}Anmelden · Setup-Portal{% endblock %}

{% block content %}
<section class="mx-auto max-w-md animate-[fadeInUp_.4s_ease]">
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h1 class="text-2xl font-bold tracking-tight mb-1">Anmelden</h1>
        <p class="text-sm text-slate-600 mb-6">Melde dich mit deiner E-Mail und deinem Passwort an.</p>

        <form id="loginForm" class="space-y-4" autocomplete="off">
            <div>
                <label for="email" class="block text-sm font-medium text-slate-700 mb-1">E-Mail</label>
                <input id="email" name="email" type="email" required
                    class="w-full rounded-xl border-slate-300 focus:border-brand-500 focus:ring-brand-500" />
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-slate-700 mb-1">Passwort</label>
                <input id="password" name="password" type="password" required
                    class="w-full rounded-xl border-slate-300 focus:border-brand-500 focus:ring-brand-500" />
            </div>

            <button class="w-full rounded-xl bg-brand-600 py-2.5 text-white font-medium hover:bg-brand-700">
                Anmelden
            </button>
        </form>

        <p id="msg" class="mt-4 text-sm"></p>

        <p class="mt-6 text-sm text-slate-600">
            Noch kein Konto?
            <a href="/signup" class="text-brand-700 hover:text-brand-800 underline underline-offset-2">Registrieren</a>
        </p>
    </div>
</section>

<script>
    const f = document.getElementById('loginForm');
    const msg = document.getElementById('msg');

    f.addEventListener('submit', async (e) => {
        e.preventDefault();
        msg.textContent = '';
        msg.className = 'mt-4 text-sm';

        const fd = new FormData(f);
        const payload = { email: fd.get('email'), password: fd.get('password') };

        try {
            const r = await fetch('/auth/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const j = await r.json().catch(() => ({}));
            if (r.ok && j.ok) {
                window.location.href = '/';
            } else {
                msg.textContent = j.detail || 'Anmeldung fehlgeschlagen.';
                msg.className = 'mt-4 text-sm text-red-600';
            }
        } catch (err) {
            msg.textContent = 'Netzwerkfehler.';
            msg.className = 'mt-4 text-sm text-red-600';
        }
    });
</script>
{% endblock %}