@props(['title'])

@php
    $links = [
        'account.dashboard' => 'Tableau de bord',
        'account.orders' => 'Mes commandes & factures',
        'account.addresses.index' => 'Mes adresses',
        'account.profile' => 'Profil & mot de passe',
    ];
@endphp

<x-layouts.app :over-light="true" :title="$title">
    <section class="mx-auto max-w-[1440px] px-5 pt-32 pb-24 sm:px-10 lg:px-14 lg:pt-40 xl:pt-48">
        <p class="kicker mb-5 text-rouge">Mon compte</p>
        <h1 class="font-serif text-[clamp(2.4rem,4.6vw,4.2rem)] leading-none">{{ $title }}</h1>

        <div class="mt-16 grid gap-16 lg:grid-cols-12">
            <aside class="lg:col-span-3">
                <nav aria-label="Mon compte" class="border-l border-filet">
                    @foreach ($links as $route => $label)
                        <a href="{{ route($route) }}" @class([
                            '-ml-px block border-l py-3 pl-5 font-serif text-lg transition-colors',
                            'border-rouge text-encre' => request()->routeIs(Str::beforeLast($route, '.index').'*'),
                            'border-transparent text-gris hover:text-encre' => ! request()->routeIs(Str::beforeLast($route, '.index').'*'),
                        ])>{{ $label }}</a>
                    @endforeach
                    @if (auth()->user()->is_admin)
                        <a href="{{ url('admin') }}" class="-ml-px block border-l border-transparent py-3 pl-5 font-serif text-lg text-gris hover:text-encre">Administration</a>
                    @endif
                    <form method="POST" action="{{ route('logout') }}" class="mt-6 pl-5">
                        @csrf
                        <button type="submit" class="kicker text-gris hover:text-rouge">Se déconnecter</button>
                    </form>
                </nav>
            </aside>
            <div class="lg:col-span-9">
                @if (session('status'))
                    <p class="alerte mb-10">{{ match (session('status')) { 'profile-information-updated' => 'Vos informations ont été mises à jour.', 'password-updated' => 'Votre mot de passe a été modifié.', default => session('status') } }}</p>
                @endif
                {{ $slot }}
            </div>
        </div>
    </section>
</x-layouts.app>