<!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] 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 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.user-playlists')
                        </div>
                    </div>
                    @include('modals.create-playlist')
                </div>
            </div>
        </main>
        @include('layouts.footer')
    </div>
</body>
</html>
