{% extends "base.html" %}

{% block title %}Mein Profil - Invario{% endblock %}

{% block content %}
<style>
    .profile-container {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 20px;
        font-family: Arial, sans-serif;
    }

    .profile-header {
        margin-bottom: 30px;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 15px;
    }

    .profile-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    @media (min-width: 768px) {
        .profile-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    .card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .card h3 {
        margin-top: 0;
        color: #1e293b;
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 6px;
    }

    .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: 0.95rem;
        box-sizing: border-box;
    }

    .form-control:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .form-control[readonly] {
        background-color: #f8fafc;
        color: #64748b;
        cursor: not-allowed;
    }

    .btn-submit {
        background-color: #3b82f6;
        color: white;
        border: none;
        padding: 10px 18px;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .btn-submit:hover {
        background-color: #2563eb;
    }

    .alert {
        padding: 12px 16px;
        border-radius: 6px;
        margin-bottom: 20px;
        font-size: 0.9rem;
    }

    .alert-success { background-color: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
    .alert-danger { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
    .alert-warning { background-color: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
</style>

<div class="profile-container">
    <div class="profile-header">
        <h1>Mein Profil</h1>
        <p style="color: #64748b;">Verwalten Sie Ihre persönlichen Informationen und Sicherheitseinstellungen.</p>
    </div>

    <!-- Flash-Nachrichten anzeigen -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="profile-grid">
        <!-- Karte 1: Allgemeine Informationen -->
        <div class="card">
            <h3>Persönliche Daten</h3>
            <form action="{{ url_for('user_profile') }}" method="POST">
                <input type="hidden" name="action" value="update_info">

                <div class="form-group">
                    <label for="username">Benutzername</label>
                    <input type="text" id="username" class="form-control" value="{{ session.get('username', '') }}" readonly>
                </div>

                <div class="form-group">
                    <label for="full_name">Vollständiger Name</label>
                    <input type="text" id="full_name" name="full_name" class="form-control" value="{{ session.get('full_name', '') }}" placeholder="Max Mustermann">
                </div>

                <div class="form-group">
                    <label for="email">E-Mail-Adresse</label>
                    <input type="email" id="email" name="email" class="form-control" value="{{ session.get('email', '') }}" required>
                </div>

                <button type="submit" class="btn-submit">Änderungen speichern</button>
            </form>
        </div>

        <!-- Karte 2: Passwort ändern -->
        <div class="card">
            <h3>Passwort ändern</h3>
            <form action="{{ url_for('user_profile') }}" method="POST">
                <input type="hidden" name="action" value="change_password">

                <div class="form-group">
                    <label for="current_password">Aktuelles Passwort</label>
                    <input type="password" id="current_password" name="current_password" class="form-control" required>
                </div>

                <div class="form-group">
                    <label for="new_password">Neues Passwort</label>
                    <input type="password" id="new_password" name="new_password" class="form-control" minlength="8" required>
                </div>

                <div class="form-group">
                    <label for="confirm_password">Neues Passwort bestätigen</label>
                    <input type="password" id="confirm_password" name="confirm_password" class="form-control" minlength="8" required>
                </div>

                <button type="submit" class="btn-submit">Passwort aktualisieren</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}