{% extends "base.html" %}
{% block title %}Einstellungen - FireTracker{% endblock %}
{% block content %}
<div class="max-w-2xl space-y-6">
    <div>
        <h1 class="text-2xl font-bold">Einstellungen</h1>
        <p class="text-slate-400 mt-1">Profil und FIRE-Parameter anpassen</p>
    </div>

    <form action="/api/profile" method="POST" class="space-y-6">
        <!-- Income & Expenses -->
        <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
            <h2 class="text-lg font-semibold mb-4">Einkommen & Ausgaben</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Monatl. Netto-Einkommen (EUR)</label>
                    <input type="number" name="monthly_income" step="50" value="{{ profile.monthly_income }}"
                        class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Monatl. Ausgaben (EUR)</label>
                    <input type="number" name="monthly_expenses" step="50" value="{{ profile.monthly_expenses }}"
                        class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none">
                </div>
            </div>
        </div>

        <!-- Personal -->
        <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
            <h2 class="text-lg font-semibold mb-4">Persoenliche Daten</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Geburtsjahr</label>
                    <input type="number" name="birth_year" value="{{ profile.birth_year }}"
                        class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Ziel-Rentenalter</label>
                    <input type="number" name="target_retirement_age" value="{{ profile.target_retirement_age }}"
                        class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none">
                </div>
            </div>
        </div>

        <!-- FIRE Parameters -->
        <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
            <h2 class="text-lg font-semibold mb-4">FIRE-Parameter</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Safe Withdrawal Rate (%)</label>
                    <input type="number" name="swr" step="0.005" value="{{ profile.swr }}"
                        class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none">
                    <p class="text-xs text-slate-500 mt-1">Standard: 4% (0.04)</p>
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Erwartete Rendite (%)</label>
                    <input type="number" name="expected_return" step="0.01" value="{{ profile.expected_return }}"
                        class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none">
                    <p class="text-xs text-slate-500 mt-1">Standard: 7% (0.07)</p>
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Inflation (%)</label>
                    <input type="number" name="inflation" step="0.01" value="{{ profile.inflation }}"
                        class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none">
                    <p class="text-xs text-slate-500 mt-1">Standard: 2% (0.02)</p>
                </div>
            </div>
        </div>

        <!-- Export -->
        <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
            <h2 class="text-lg font-semibold mb-4">Daten</h2>
            <div class="flex gap-4">
                <a href="/api/export" target="_blank" class="bg-slate-600 hover:bg-slate-500 text-white px-4 py-2 rounded-lg transition text-sm">
                    JSON Export
                </a>
            </div>
        </div>

        <button type="submit" class="fire-gradient text-white font-semibold px-8 py-3 rounded-lg text-lg hover:opacity-90 transition">
            Speichern
        </button>
    </form>
</div>
{% endblock %}