@php($layout = auth()->user()->role === 'reseller' ? 'reseller-layout' : 'app-layout')
<x-dynamic-component :component="$layout" title="Notifications">
    <x-slot name="header"><x-ui.page-title title="Notifications" :subtitle="$unreadCount > 0 ? $unreadCount.' non lue(s)' : 'Tout est lu'" /></x-slot>
    <x-slot name="actions">
        <x-ui.btn variant="secondary" :href="route('notifications.index', $unreadOnly ? [] : ['unread' => 1])">{{ $unreadOnly ? 'Voir toutes' : 'Non lues seulement' }}</x-ui.btn>
        @if ($unreadCount > 0)
            <form method="POST" action="{{ route('notifications.read-all') }}">@csrf<x-ui.btn type="submit" icon="check">Tout marquer comme lu</x-ui.btn></form>
        @endif
    </x-slot>

    <x-ui.card flush>
        <ul class="divide-y divide-slate-100">
            @forelse ($notifications as $n)
                <li>
                    <form method="POST" action="{{ route('notifications.read', $n->id) }}">@csrf
                        <button type="submit" class="flex w-full items-start gap-3 px-5 py-4 text-left hover:bg-slate-50">
                            <span class="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full {{ $n->read_at ? 'bg-slate-300' : (['danger' => 'bg-red-500', 'warning' => 'bg-amber-500'][$n->data['level'] ?? 'info'] ?? 'bg-blue-500') }}"></span>
                            <span class="min-w-0 flex-1 {{ $n->read_at ? 'opacity-70' : '' }}">
                                <span class="block text-sm font-semibold text-slate-900">{{ $n->data['title'] ?? '' }}</span>
                                <span class="block text-sm text-slate-600">{{ $n->data['body'] ?? '' }}</span>
                                <span class="mt-1 block text-xs text-slate-400">{{ $n->created_at->format('d/m/Y H:i') }}{{ $n->read_at ? ' · lue' : '' }}</span>
                            </span>
                        </button>
                    </form>
                </li>
            @empty
                <li><x-ui.empty>{{ $unreadOnly ? 'Aucune notification non lue.' : 'Aucune notification pour le moment.' }}</x-ui.empty></li>
            @endforelse
        </ul>
        @if ($notifications->hasPages())<div class="border-t border-slate-100 p-4">{{ $notifications->links() }}</div>@endif
    </x-ui.card>
</x-dynamic-component>