@forelse($notifications as $n)
    @if($n->redirect_to)
        <a href="{{ $n->redirect_to }}" class="list-group-item list-group-item-action" target="_blank">
    @endif
        <div class="list-group-item list-group-item-action p-2" style="cursor: pointer; border-bottom: 1px solid #ddd">
            <div class="d-flex align-items-start w-100">
                <!-- Optional Image -->
                <div class="rounded {{ $n->redirect_to ? 'bg-primary' : 'bg-secondary' }} text-white d-flex align-items-center justify-content-center me-2"
                        style="width:40px; height:40px; font-weight:bold; text-transform:uppercase;">
                    {{ $loop->iteration }}
                </div>

                <!-- Message and timestamp -->
                <div class="flex-grow-1">
                    <div class="d-flex w-100 justify-content-between">
                        <p class="mb-1">{!! $n->message !!}</p>
                        <small class="text-muted">{{ \Carbon\Carbon::parse($n->created_at)->diffForHumans() }}</small>
                    </div>
                </div>
            </div>
        </div>
    @if($n->redirect_to)
        </a>
    @endif
@empty
    <div class="text-center text-muted p-3">No notifications</div>
@endforelse