<div>
    @forelse ($notifications as $notification)
        <div class="d-flex align-items-center p-2 border rounded">
            <span class="me-2">
                <i class="bi bi-bell" style="font-size: x-large;"></i>
            </span>
            <div class="mx-3 flex-grow-1">
                <span class="fw-bold border-bottom border-warning">{{ $notification->data['title'] }}</span>
                <span class="d-block">{{ $notification->data['message'] }}</span>
            </div>
            <div class="text-end">
                <i class="bi bi-trash" role="button" style="cursor: pointer;" wire:confirm wire:click="delete('{{ $notification->id }}')"></i>
            </div>
        </div>    
    @empty
        <div class="darkandgray text-center mt-4 pt-4">
            No notifications yet. Notifcations will show up here.
        </div>
    @endforelse
</div>