{% extends "base.html" %}
{% block title %}Setup - FireTracker{% endblock %}
{% block content %}
<div class="max-w-lg mx-auto mt-12">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-green-400 mb-2">Willkommen bei FireTracker</h1>
        <p class="text-slate-400">3 Zahlen — und du siehst dein FI-Datum.</p>
    </div>

    <form action="/api/setup" method="POST" class="bg-slate-800 rounded-xl p-8 border border-slate-700 space-y-6">
        <div>
            <label class="block text-sm font-medium text-slate-300 mb-2">Monatliches Netto-Einkommen</label>
            <div class="relative">
                <input type="number" name="monthly_income" step="50" required
                    class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-lg text-white focus:border-green-400 focus:ring-1 focus:ring-green-400 outline-none"
                    placeholder="2.500">
                <span class="absolute right-4 top-3.5 text-slate-400">EUR</span>
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-300 mb-2">Monatliche Ausgaben</label>
            <div class="relative">
                <input type="number" name="monthly_expenses" step="50" required
                    class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-lg text-white focus:border-green-400 focus:ring-1 focus:ring-green-400 outline-none"
                    placeholder="1.500">
                <span class="absolute right-4 top-3.5 text-slate-400">EUR</span>
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-300 mb-2">Geburtsjahr</label>
            <input type="number" name="birth_year" min="1950" max="2010" required
                class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-lg text-white focus:border-green-400 focus:ring-1 focus:ring-green-400 outline-none"
                placeholder="2002">
        </div>

        <button type="submit" class="w-full fire-gradient text-white font-semibold py-3 rounded-lg text-lg hover:opacity-90 transition">
            Zeig mir mein FI-Datum
        </button>

        <p class="text-center text-sm text-slate-500">Du kannst alles spaeter aendern. Assets kommen danach.</p>
    </form>
</div>
{% endblock %}