<x-profile-layout>
    <div class="space-y-5">
        {{-- Header --}}
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                <i class="fa-solid fa-rectangle-list text-rose-500"></i>
                {{ __('nav.playlists') }}
            </h2>
            <button
                data-te-toggle="modal"
                data-te-target="#modalCreatePlaylist"
                class="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-sm shadow-rose-600/20 hover:bg-rose-700 transition-colors">
                <i class="fa-solid fa-plus text-xs"></i>
                New Playlist
            </button>
        </div>

        {{-- Content --}}
        @include('profile.partials.user-playlists')

        {{-- Modal --}}
        @include('modals.create-playlist')
    </div>
</x-profile-layout>