{% extends "base.html" %}
{% block title %}Mein Profil | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">Mein Profil</p>
        <h1>{{ g.user.display_name or g.user.username }}</h1>
        <p class="lead">Dein Zugang bleibt bewusst schlicht. Hier kannst du Namen, Login-Daten und Passwort pflegen.</p>
    </div>
    <div class="intro-pills">
        <span class="status-pill">{{ role_labels[g.user.role] }}</span>
        {% if g.user.household_name %}
            <span class="status-pill status-soft">{{ g.user.household_name }}</span>
        {% endif %}
    </div>
</section>

<section class="panel compact-form-panel">
    <div class="panel-head">
        <h2>Optionen</h2>
        <a href="{{ url_for('main.settings_view') }}">Zu den Einstellungen</a>
    </div>
</section>

<section class="two-column">
    <article class="panel">
        <div class="panel-head">
            <h2>Basisdaten</h2>
        </div>
        <form method="post" class="stack-form">
            {{ csrf_input() }}
            <label>
                Anzeigename
                <input type="text" name="display_name" value="{{ g.user.display_name or '' }}" autocomplete="name">
            </label>
            <label>
                Benutzername
                <input type="text" name="username" value="{{ g.user.username }}" autocomplete="username" required>
            </label>
            <label>
                E-Mail
                <input type="email" name="email" value="{{ g.user.email or '' }}" autocomplete="email">
            </label>
            <button type="submit">Speichern</button>
        </form>
    </article>

    <article class="panel">
        <div class="panel-head">
            <h2>Passwort ändern</h2>
        </div>
        <form method="post" action="{{ url_for('auth.change_password') }}" class="stack-form">
            {{ csrf_input() }}
            <label>
                Aktuelles Passwort
                <input type="password" name="current_password" autocomplete="current-password" required>
            </label>
            <label>
                Neues Passwort
                <input type="password" name="new_password" autocomplete="new-password" required>
            </label>
            <label>
                Neues Passwort wiederholen
                <input type="password" name="new_password_repeat" autocomplete="new-password" required>
            </label>
            <button type="submit">Passwort ändern</button>
        </form>
    </article>
</section>
{% endblock %}