{% extends 'base.html.twig' %}

{% block title %}{{ 'user_profile.title'|trans }} - {{ parent() }}{% endblock %}

{% block body %}
<div class="container py-5">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('user_dashboard') }}">{{ 'user_dashboard.title'|trans }}</a></li>
            <li class="breadcrumb-item active">{{ 'user_profile.title'|trans }}</li>
        </ol>
    </nav>

    <!-- En-tête -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card aef-texture-section border-0 shadow-sm">
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="aef-title h3 mb-2">
                                <i class="fas fa-user-cog me-2" style="color: var(--aef-blue-primary);"></i>
                                {{ 'user_profile.title'|trans }}
                            </h1>
                            <p class="aef-text-muted mb-0">
                                {{ 'user_profile.description'|trans }}
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <span class="badge" style="background-color: var(--aef-blue-primary); font-size: 1rem;">
                                <i class="fas fa-user me-1"></i>{{ 'user_profile.user_type'|trans }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Informations personnelles -->
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header" style="background: var(--aef-gradient-blue); color: white;">
                    <h4 class="mb-0">
                        <i class="fas fa-user me-2"></i>{{ 'user_profile.personal_info.title'|trans }}
                    </h4>
                </div>
                <div class="card-body p-4">
                    <form>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">{{ 'user_profile.personal_info.email'|trans }} *</label>
                                <input type="email" class="form-control" id="email" value="{{ user.email }}" readonly>
                                <small class="text-muted">{{ 'user_profile.personal_info.email_readonly'|trans }}</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="firstName" class="form-label">{{ 'user_profile.personal_info.first_name'|trans }}</label>
                                <input type="text" class="form-control" id="firstName" value="{{ user.firstName ?? '' }}" placeholder="{{ 'user_profile.personal_info.first_name_placeholder'|trans }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="lastName" class="form-label">{{ 'user_profile.personal_info.last_name'|trans }}</label>
                                <input type="text" class="form-control" id="lastName" value="{{ user.lastName ?? '' }}" placeholder="{{ 'user_profile.personal_info.last_name_placeholder'|trans }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="phone" class="form-label">{{ 'user_profile.personal_info.phone'|trans }}</label>
                                <input type="tel" class="form-control" id="phone" value="{{ user.phone ?? '' }}" placeholder="{{ 'user_profile.personal_info.phone_placeholder'|trans }}">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="address" class="form-label">{{ 'user_profile.personal_info.address'|trans }}</label>
                            <input type="text" class="form-control" id="address" value="{{ user.address ?? '' }}" placeholder="{{ 'user_profile.personal_info.address_placeholder'|trans }}">
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="city" class="form-label">{{ 'user_profile.personal_info.city'|trans }}</label>
                                <input type="text" class="form-control" id="city" value="{{ user.city ?? '' }}" placeholder="{{ 'user_profile.personal_info.city_placeholder'|trans }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="postalCode" class="form-label">{{ 'user_profile.personal_info.postal_code'|trans }}</label>
                                <input type="text" class="form-control" id="postalCode" value="{{ user.postalCode ?? '' }}" placeholder="{{ 'user_profile.personal_info.postal_code_placeholder'|trans }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="country" class="form-label">{{ 'user_profile.personal_info.country'|trans }}</label>
                                <select class="form-select" id="country">
                                    <option value="FR" selected>{{ 'countries.france'|trans }}</option>
                                    <option value="BE">{{ 'countries.belgium'|trans }}</option>
                                    <option value="CH">{{ 'countries.switzerland'|trans }}</option>
                                    <option value="LU">{{ 'countries.luxembourg'|trans }}</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="d-flex gap-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>{{ 'user_profile.personal_info.save_changes'|trans }}
                            </button>
                            <button type="reset" class="btn btn-outline-secondary">
                                <i class="fas fa-undo me-2"></i>{{ 'common.cancel'|trans }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Actions rapides -->
        <div class="col-lg-4">
            <!-- Sécurité -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header" style="background: var(--aef-gradient-beige); color: white;">
                    <h5 class="mb-0">
                        <i class="fas fa-shield-alt me-2"></i>{{ 'user_profile.security.title'|trans }}
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <h6>{{ 'user_profile.security.password'|trans }}</h6>
                        <p class="small text-muted mb-2">{{ 'user_profile.security.last_modified'|trans }}: {{ 'user_profile.security.never'|trans }}</p>
                        <a href="{{ path('change_password') }}" class="btn btn-outline-primary btn-sm w-100">
                            <i class="fas fa-key me-2"></i>{{ 'user_profile.security.change_password'|trans }}
                        </a>
                    </div>
                    
                    <hr class="my-3">
                    
                    <div class="mb-3">
                        <h6>{{ 'user_profile.security.email_verification'|trans }}</h6>
                        {% if user.verified %}
                            <p class="small text-success mb-2">
                                <i class="fas fa-check-circle me-1"></i>{{ 'user_profile.security.email_verified'|trans }}
                            </p>
                        {% else %}
                            <p class="small text-warning mb-2">
                                <i class="fas fa-exclamation-triangle me-1"></i>{{ 'user_profile.security.email_not_verified'|trans }}
                            </p>
                            <button class="btn btn-outline-warning btn-sm w-100">
                                <i class="fas fa-envelope me-2"></i>{{ 'user_profile.security.resend_email'|trans }}
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Préférences -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header" style="background: var(--aef-gradient-blue); color: white;">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>{{ 'user_profile.preferences.title'|trans }}
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <a href="{{ path('user_alerts') }}" class="btn btn-outline-primary btn-sm w-100 mb-2">
                            <i class="fas fa-bell me-2"></i>{{ 'user_profile.preferences.manage_alerts'|trans }}
                        </a>
                        <a href="{{ path('user_newsletter') }}" class="btn btn-outline-primary btn-sm w-100 mb-2">
                            <i class="fas fa-envelope me-2"></i>{{ 'user_profile.preferences.newsletter_preferences'|trans }}
                        </a>
                        <a href="{{ path('user_favorites') }}" class="btn btn-outline-primary btn-sm w-100">
                            <i class="fas fa-heart me-2"></i>{{ 'user_profile.preferences.my_favorites'|trans }}
                        </a>
                    </div>
                </div>
            </div>

            <!-- Devenir antiquaire -->
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 text-center" style="background: linear-gradient(135deg, var(--aef-blue-light), var(--aef-beige-light));">
                    <i class="fas fa-store fa-3x mb-3" style="color: var(--aef-blue-primary);"></i>
                    <h5 style="color: var(--aef-blue-dark);">{{ 'user_profile.become_dealer.title'|trans }}</h5>
                    <p class="small mb-3" style="color: var(--aef-blue-dark);">
                        {{ 'user_profile.become_dealer.description'|trans }}
                    </p>
                    <a href="{{ path('app_register_antiquaire') }}" class="btn btn-primary">
                        <i class="fas fa-arrow-right me-2"></i>{{ 'user_profile.become_dealer.button'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}