{% extends '@App/app.html.twig' %}

{% block title %}Mon profil{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set full_name = (account_user.prenom|default('') ~ ' ' ~ account_user.nom|default(''))|trim %}
<section class="user-profile-page">
    <header class="capsule-heading">
        <div>
            <h1 class="capsule-heading-title">Mon profil</h1>
            <p class="capsule-heading-subtitle">Gérez vos informations personnelles, votre avatar et la sécurité de votre compte.</p>
        </div>
    </header>

    <article class="user-profile-hero">
        <img class="user-profile-avatar user-profile-avatar--hero" src="{{ user_avatar_url(account_user) }}" alt="Avatar de {{ full_name ?: account_user.email }}">
        <div>
            <h2>{{ full_name ?: account_user.email }}</h2>
            <p>{{ account_user.fonction ?: 'Utilisateur Capsule' }}</p>
            <span><i class="ti ti-mail"></i>{{ account_user.email }}</span>
        </div>
    </article>

    <div class="user-profile-grid">
        <article class="card user-profile-card">
            <header>
                <div><h2>Image de profil</h2><p>Cette image est utilisée dans toute l’application.</p></div>
                <i class="ti ti-photo"></i>
            </header>
            <div class="user-profile-avatar-editor">
                <img class="user-profile-avatar user-profile-avatar--large" src="{{ user_avatar_url(account_user) }}" alt="Avatar actuel">
                <div>
                    <form method="post" action="{{ path('app_account_avatar_update') }}" enctype="multipart/form-data" data-turbo="false">
                        <input type="hidden" name="_token" value="{{ csrf_token('account_avatar') }}">
                        <label class="capsule-button capsule-button--primary">
                            <i class="ti ti-upload"></i>Choisir une image
                            <input class="visually-hidden" type="file" name="avatar" accept="image/jpeg,image/png,image/gif,image/webp" onchange="this.form.requestSubmit()" required>
                        </label>
                    </form>
                    {% if account_user.image %}
                        <form method="post" action="{{ path('app_account_avatar_delete') }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('account_avatar_delete') }}">
                            <button class="capsule-button capsule-button--secondary" type="submit"><i class="ti ti-trash"></i>Réinitialiser</button>
                        </form>
                    {% endif %}
                    <small>JPG, PNG, GIF ou WEBP · 3 Mo maximum.</small>
                </div>
            </div>
        </article>

        <form class="card user-profile-card" method="post" action="{{ path('app_account_password_update') }}" data-turbo="false">
            <input type="hidden" name="_token" value="{{ csrf_token('account_password') }}">
            <header>
                <div><h2>Mot de passe</h2><p>Confirmez votre mot de passe actuel avant de le modifier.</p></div>
                <i class="ti ti-lock"></i>
            </header>
            <label class="user-profile-field">
                <span>Mot de passe actuel</span>
                <span class="input-group" data-controller="password-visibility">
                    <input class="form-control" type="password" name="current_password" autocomplete="current-password" required data-password-visibility-target="input">
                    <button class="btn btn-outline-secondary" type="button" data-action="password-visibility#toggle" aria-label="Afficher le mot de passe"><iconify-icon icon="solar:eye-line-duotone" data-password-visibility-target="icon"></iconify-icon></button>
                </span>
            </label>
            <label class="user-profile-field">
                <span>Nouveau mot de passe</span>
                <span class="input-group" data-controller="password-visibility">
                    <input class="form-control" type="password" name="password" autocomplete="new-password" minlength="8" required data-password-visibility-target="input">
                    <button class="btn btn-outline-secondary" type="button" data-action="password-visibility#toggle" aria-label="Afficher le mot de passe"><iconify-icon icon="solar:eye-line-duotone" data-password-visibility-target="icon"></iconify-icon></button>
                </span>
            </label>
            <label class="user-profile-field">
                <span>Confirmation</span>
                <span class="input-group" data-controller="password-visibility">
                    <input class="form-control" type="password" name="password_confirmation" autocomplete="new-password" minlength="8" required data-password-visibility-target="input">
                    <button class="btn btn-outline-secondary" type="button" data-action="password-visibility#toggle" aria-label="Afficher la confirmation"><iconify-icon icon="solar:eye-line-duotone" data-password-visibility-target="icon"></iconify-icon></button>
                </span>
            </label>
            <p class="user-profile-help"><i class="ti ti-info-circle"></i>8 caractères minimum, avec minuscule, majuscule, chiffre et caractère spécial.</p>
            <footer><button class="capsule-button capsule-button--primary" type="submit"><i class="ti ti-device-floppy"></i>Modifier le mot de passe</button></footer>
        </form>
    </div>

    <form class="card user-profile-card user-profile-card--wide" method="post" action="{{ path('app_account_profile_update') }}" data-turbo="false">
        <input type="hidden" name="_token" value="{{ csrf_token('account_profile') }}">
        <header>
            <div><h2>Informations personnelles</h2><p>Mettez à jour les coordonnées associées à votre compte.</p></div>
            <i class="ti ti-user-edit"></i>
        </header>
        <div class="user-profile-form-grid">
            <label class="user-profile-field"><span>Prénom *</span><input class="form-control" name="prenom" maxlength="255" value="{{ account_user.prenom }}" required></label>
            <label class="user-profile-field"><span>Nom *</span><input class="form-control" name="nom" maxlength="255" value="{{ account_user.nom }}" required></label>
            <label class="user-profile-field"><span>Adresse e-mail</span><input class="form-control" type="email" value="{{ account_user.email }}" disabled><small>L’adresse e-mail est gérée par un administrateur.</small></label>
            <label class="user-profile-field"><span>Téléphone</span><input class="form-control" name="telephone" inputmode="tel" value="{{ account_user.telephone ?: '' }}"></label>
            <label class="user-profile-field user-profile-field--wide"><span>Adresse</span><input class="form-control" name="adresse" maxlength="255" value="{{ account_user.adresse|default('') }}"></label>
            <label class="user-profile-field"><span>Code postal</span><input class="form-control" name="code_postal" inputmode="numeric" value="{{ account_user.codePostal|default('') }}"></label>
            <label class="user-profile-field"><span>Ville</span><input class="form-control" name="ville" maxlength="255" value="{{ account_user.ville|default('') }}"></label>
            <label class="user-profile-field"><span>Pays</span><input class="form-control" name="pays" maxlength="255" value="{{ account_user.pays|default('France') }}"></label>
        </div>
        <footer><button class="capsule-button capsule-button--primary" type="submit"><i class="ti ti-device-floppy"></i>Enregistrer les informations</button></footer>
    </form>
</section>
{% endblock %}