<x-app-layout>
    @include('partials.background')
    <div
        class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
        <div class="grid md:grid-flow-col gap-4 xl:w-5/6 flex-row">
            @include('profile.partials.sidebar')
            <div class="flex flex-col gap-2">

                @forelse($notifications as $notification)
                    <div
                        class="bg-white/40 dark:bg-neutral-950/40 backdrop-blur border border-gray-200 dark:border-neutral-700 rounded-xl shadow-sm p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-x-4 transition hover:shadow-md">

                        <!-- Content -->
                        <div class="flex flex-col gap-2 w-full h-full mt-2">
                            <div class="flex items-center justify-between flex-none h-2">
                                <span class="text-xs font-semibold uppercase tracking-wide text-sky-600 dark:text-rose-500">
                                    {{ $notification->data['type'] ?? 'Notification' }}
                                </span>
                            </div>

                            <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 leading-relaxed h-full">
                                {{ $notification->data['message'] ?? '' }}
                            </p>
                        </div>

                        <!-- Actions -->
                        <div class="flex gap-2 sm:gap-2 shrink-0">
                            <a href="{{ $notification->data['url'] }}"
                                class="text-center rounded-lg bg-sky-600 px-3 py-2 text-xs sm:text-sm font-medium text-white hover:bg-sky-700 transition">
                                Open
                            </a>

                            <form method="POST" action="{{ route('profile.notifications.delete') }}">
                                @csrf
                                @method('delete')
                                <input type="hidden" value="{{ $notification->id }}" name="id">

                                <button type="submit"
                                        class="w-full rounded-lg bg-rose-600 px-3 py-2 text-xs sm:text-sm font-medium text-white hover:bg-rose-700 transition">
                                    Delete
                                </button>
                            </form>
                        </div>

                    </div>
                @empty
                    <div class="text-center py-16 text-gray-500 dark:text-gray-400">
                        <p class="text-lg">No notifications</p>
                        <p class="text-sm opacity-70">(╥﹏╥)</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</x-app-layout>
