{{-- Fichier : resources/views/profile/edit.blade.php --}}
@extends("layouts.base")

@section("title", __("profile.title"))

@section("content")
    {{-- TODO: Conteneur principal de la page, centré et aéré --}}
    <div
        class="container mx-auto px-4 py-12 md:py-16 lg:py-20 max-w-4xl space-y-10"
    >
        {{-- TODO: Section d'en-tête de la page --}}
        <header class="text-center space-y-2">
            {{-- ? Titre principal avec icône pour une meilleure lisibilité --}}
            <h1
                class="text-4xl font-extrabold text-gray-900 leading-tight flex items-center justify-center space-x-3"
            >
                <span class="text-5xl">👤</span>
                <span>{{ __("profile.heading") }}</span>
            </h1>
            {{-- ? Description du contexte --}}
            <p class="text-xl text-gray-500 max-w-2xl mx-auto">
                {{ __("profile.profile_information_info") }}
            </p>
        </header>

        {{-- TODO: Carte pour la mise à jour des informations de profil --}}
        <div
            class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 space-y-6"
        >
            {{-- ! Titre du composant avec bordure discrète --}}
            <div class="border-b border-gray-200 pb-4">
                <h2 class="text-2xl font-bold text-gray-900">
                    {{ __("profile.update_profile_info_header") }}
                </h2>
                <p class="mt-1 text-sm text-gray-500">
                    {{ __("profile.update_profile_info_description") }}
                </p>
            </div>
            {{-- ? Inclusion du formulaire de mise à jour des informations --}}
            @include("profile.partials.update-profile-information-form")
        </div>

        {{-- * Carte pour la mise à jour du mot de passe --}}
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 space-y-6">
            <div class="border-b border-gray-200 pb-4">
                <h2 class="text-2xl font-bold text-gray-900">
                    {{ __("profile.change_password_header") }}
                </h2>
                <p class="mt-1 text-sm text-gray-500">
                    {{ __("profile.update_password_info") }}
                </p>
            </div>

            {{-- ? Inclusion du formulaire de changement de mot de passe --}}
            @include("profile.partials.update-password-form")
        </div>

        {{-- TODO: Carte pour la suppression du compte --}}
        {{-- ! Attention : La bordure rouge sert à attirer l'attention sur l'action dangereuse --}}
        <div
            class="bg-white rounded-3xl shadow-xl border-2 border-red-300 p-8 space-y-6"
        >
            {{-- ! Titre du composant (couleur rouge pour l'action dangereuse) --}}
            <div class="border-b border-red-300 pb-4">
                <h2 class="text-2xl font-bold text-red-700">
                    {{ __("profile.delete_account_header") }}
                </h2>
                <p class="mt-1 text-sm text-red-500">
                    {{ __("profile.delete_account_description") }}
                </p>
            </div>
            {{-- ? Inclusion du formulaire de suppression de l'utilisateur --}}
            @include("profile.partials.delete-user-form")
        </div>
    </div>
@endsection