<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
@include('partials.head')

<body class="font-sans antialiased">
    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
        @include('layouts.navigation')
        <!-- Page Content -->
        <main>
            @include('partials.background')
            <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] mb-14 flex flex-row">
                <div class="flex flex-col md:flex-row">
                    @include('profile.partials.sidebar')
                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-8 md:mt-0 space-y-6">
                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
                            @include('profile.partials.update-profile-information-form')
                        </div>
                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
                            <livewire:passkeys />
                        </div>
                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
                            @include('profile.partials.update-password-form')
                        </div>
                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
                            @include('profile.partials.update-blacklist-form')
                        </div>
                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
                            @include('profile.partials.update-design-form')
                        </div>
                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
                            @include('profile.partials.delete-user-form')
                        </div>
                        @include('profile.partials.delete-user-modal')
                    </div>
                    @vite(['resources/js/user-blacklist.js'])
                </div>
            </div>
        </main>
        @include('layouts.footer')
    </div>
</body>

</html>
