@props([
    'title',
    'body' => '',
    'createdAt' => null,
    'read' => false,
    'category' => null,
    'markReadUrl' => null,
    'compact' => false,
    'notificationId' => null,
    'bulkSelect' => false,
])

@php
    $time = $createdAt ? $createdAt->diffForHumans() : '';
@endphp

<div @class(['list-group-item list-group-item-action border-0 border-bottom', 'py-2' => $compact, 'py-3' => ! $compact])>
    <div class="d-flex gap-2 align-items-start">
        @if ($bulkSelect && $notificationId && ! $read)
            <input
                class="form-check-input mt-1 flex-shrink-0"
                type="checkbox"
                form="notif-bulk-form"
                name="ids[]"
                value="{{ $notificationId }}"
            >
        @endif
        <div class="flex-grow-1 min-w-0">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <span class="fw-semibold text-truncate" style="color: {{ config('theme.colors.text') }};">{{ $title }}</span>
                @if (! $read)
                    <span class="badge rounded-pill" style="background: {{ config('theme.colors.accent') }};">{{ __('notifications.unread') }}</span>
                @endif
                @if ($category)
                    <span class="badge bg-light text-dark border">{{ __('notifications.category.'.$category) }}</span>
                @endif
            </div>
            @if ($body !== '')
                <div class="small text-muted mt-1">{{ $body }}</div>
            @endif
            @if ($time !== '')
                <div class="small text-muted mt-1">{{ $time }}</div>
            @endif
        </div>
        @if ($markReadUrl && ! $read)
            <form method="POST" action="{{ $markReadUrl }}" class="flex-shrink-0">
                @csrf
                <button type="submit" class="btn btn-link btn-sm p-0">{{ __('notifications.mark_read') }}</button>
            </form>
        @endif
    </div>
</div>
