{% extends "base.html" %}
{% block title %}Mein Profil{% endblock %}
{% block content %}

<div class="page-header">
    <h2>Mein Profil</h2>
    <p class="page-lead"><a href="/dashboard">← Zurück zum Dashboard</a></p>
</div>

{% if success_message %}
<p class="hint" style="color:var(--tk-success);font-weight:600;">{{ success_message }}</p>
{% endif %}

<div class="layout-2col">
    <div class="main-col">
        <section class="card card-accent-orange">
            <div class="card-header">
                <h3>Profil bearbeiten</h3>
            </div>
            {% if error_message %}
            <p class="error">{{ error_message }}</p>
            {% endif %}
            <form method="post" action="/profil" class="form-grid">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <div class="form-row">
                    <label>Vollständiger Name
                        <input type="text" name="full_name" required minlength="2" value="{{ user.full_name }}">
                    </label>
                    <label>E-Mail
                        <input type="email" name="email" required value="{{ user.email }}">
                    </label>
                </div>
                <button type="submit" class="btn-primary">Profil speichern</button>
            </form>
        </section>

        <section class="card">
            <div class="card-header">
                <h3>Passwort ändern</h3>
            </div>
            {% if pw_error_message %}
            <p class="error">{{ pw_error_message }}</p>
            {% endif %}
            <form method="post" action="/profil/passwort" class="form-grid">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <label>Aktuelles Passwort
                    <input type="password" name="current_password" required autocomplete="current-password">
                </label>
                <div class="form-row">
                    <label>Neues Passwort
                        <input type="password" name="new_password" required minlength="10" autocomplete="new-password" placeholder="Mindestens 10 Zeichen">
                    </label>
                    <label>Neues Passwort bestätigen
                        <input type="password" name="confirm_password" required minlength="10" autocomplete="new-password">
                    </label>
                </div>
                <button type="submit" class="btn-primary">Passwort ändern</button>
            </form>
        </section>
    </div>

    <aside class="sidebar-col">
        <div class="sidebar-card">
            <h4>Konto</h4>
            <ul>
                <li><strong>Rolle:</strong> {{ user.role }}</li>
                <li><strong>Status:</strong> {{ "Aktiv" if user.is_active else "Inaktiv" }}</li>
            </ul>
            <p class="hint">Die Rolle kann nur ein Administrator ändern.</p>
        </div>
    </aside>
</div>

{% endblock %}