<?= $this->extend('layouts/panel') ?>
<?= $this->section('sidebar') ?>
<?= $this->include('panel/_sidebar') ?>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<h5 class="mb-3">Notifications</h5>
<div id="notifList"></div>
<div id="notifEmpty" class="li-card li-card-body text-center text-muted py-5 d-none">
    <i class="bi bi-bell display-4 d-block mb-2"></i>No notifications yet.
</div>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
async function loadNotifications() {
    try {
        const res = await apiFetch('/notifications');
        const list = res.data.notifications || [];
        const el = document.getElementById('notifList');
        const empty = document.getElementById('notifEmpty');

        if (list.length === 0) { el.innerHTML = ''; empty.classList.remove('d-none'); return; }
        empty.classList.add('d-none');

        el.innerHTML = list.map(n => `
            <div class="li-card mb-2 ${n.is_read ? '' : 'border-primary'}">
                <div class="li-card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="fw-semibold">${escapeHtml(n.type.replace(/_/g,' '))}</span>
                        ${!n.is_read ? '<span class="li-pill li-pill-blue">New</span>' : ''}
                        <div class="text-muted small mt-1">${timeAgo(n.created_at)}</div>
                    </div>
                    ${!n.is_read ? `<button class="btn btn-li-ghost btn-sm" onclick="markRead(${n.id})">Mark read</button>` : ''}
                </div>
            </div>
        `).join('');
    } catch (e) { showToast(e.message, true); }
}

async function markRead(id) {
    try {
        await apiFetch(`/notifications/${id}/read`, { method: 'POST' });
        loadNotifications();
    } catch (e) { showToast(e.message, true); }
}

loadNotifications();
</script>
<?= $this->endSection() ?>
