@extends('layouts.influencer', ['title' => 'Notificações'])

@section('content')
<div class="mb-5 flex items-center justify-between">
    <div>
        <h2 class="text-xl font-black">Notificações</h2>
        <p class="text-sm text-slate-500">Você tem {{ $unreadCount }} notificação(ões) não lida(s).</p>
    </div>
</div>

<div class="space-y-3">
    @forelse($notifications as $notification)
        <a href="{{ route('influencer.notifications.show', $notification) }}" class="card block transition hover:border-slate-400">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <div class="flex items-center gap-2">
                        @if(! $notification->read_at)
                            <span class="h-2.5 w-2.5 rounded-full bg-red-500"></span>
                        @endif
                        <h3 class="font-bold text-slate-950">{{ $notification->message->title }}</h3>
                    </div>
                    <p class="mt-1 line-clamp-2 text-sm text-slate-600">{{ Str::limit(strip_tags($notification->message->body), 180) }}</p>
                    <p class="mt-2 text-xs text-slate-400">Recebida em {{ $notification->received_at?->format('d/m/Y H:i') }}</p>
                </div>
                <div class="text-right text-sm">
                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ $notification->message->type->label() }}</span>
                    @if($notification->message->attachments->isNotEmpty())
                        <p class="mt-2 text-xs text-slate-500">{{ $notification->message->attachments->count() }} anexo(s)</p>
                    @endif
                </div>
            </div>
        </a>
    @empty
        <div class="card text-slate-500">Nenhuma notificação recebida.</div>
    @endforelse
</div>

<div class="mt-4">{{ $notifications->links() }}</div>
@endsection