<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-primary-600 dark:text-primary-300">Conta</p>
                <h1 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Meu Perfil</h1>
                <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-400">Atualize seus dados, foto de perfil e senha de acesso ao portal.</p>
            </div>

            <div class="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-900">
                <x-user-avatar :user="$user" size="md" />
                <div class="min-w-0">
                    <p class="truncate text-sm font-bold text-slate-950 dark:text-white">{{ $user->name }}</p>
                    <p class="truncate text-xs text-slate-500 dark:text-slate-400">{{ $user->departamento->nome ?? 'Sem departamento' }}</p>
                </div>
            </div>
        </div>
    </x-slot>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_420px]">
        <div class="space-y-5">
            <section class="rounded-lg border border-slate-200 bg-white p-5 shadow-soft dark:border-slate-800 dark:bg-slate-900">
                @include('profile.partials.update-profile-information-form')
            </section>

            <section class="rounded-lg border border-slate-200 bg-white p-5 shadow-soft dark:border-slate-800 dark:bg-slate-900">
                @include('profile.partials.update-password-form')
            </section>
        </div>

        <aside class="space-y-5">
            <section class="rounded-lg border border-slate-200 bg-white p-5 shadow-soft dark:border-slate-800 dark:bg-slate-900">
                <div class="text-center">
                    <x-user-avatar :user="$user" size="xl" class="mx-auto" />
                    <h2 class="mt-4 text-lg font-bold text-slate-950 dark:text-white">{{ $user->name }}</h2>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $user->email }}</p>
                </div>

                <div class="mt-5 grid gap-3 text-sm">
                    <div class="rounded-lg border border-slate-200 p-3 dark:border-slate-800">
                        <span class="block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Departamento</span>
                        <span class="mt-1 block font-semibold text-slate-950 dark:text-white">{{ $user->departamento->nome ?? 'Sem departamento' }}</span>
                    </div>
                    <div class="rounded-lg border border-slate-200 p-3 dark:border-slate-800">
                        <span class="block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Perfil de acesso</span>
                        <span class="mt-1 block font-semibold text-slate-950 dark:text-white">{{ $user->roles->first()?->name ?? 'Sem papel' }}</span>
                    </div>
                </div>
            </section>

            <section class="rounded-lg border border-rose-200 bg-white p-5 shadow-soft dark:border-rose-950 dark:bg-slate-900">
                @include('profile.partials.delete-user-form')
            </section>
        </aside>
    </div>
</x-app-layout>
