<li class="nav-item dropdown no-arrow mx-1" style="list-style: none;">
    <a class="nav-link dropdown-toggle position-relative" href="#" id="alertsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-bell fa-fw text-primary fs-5"></i>
        <!-- Counter - Alerts -->
        <?php if($count > 0): ?>
            <span class="badge bg-danger badge-counter rounded-circle position-absolute translate-middle border border-light" style="font-size: 0.6rem; top: 10px; right: 0px;"><?= $count > 9 ? '9+' : $count ?></span>
        <?php endif; ?>
    </a>
    <!-- Dropdown - Alerts -->
    <div class="dropdown-list dropdown-menu dropdown-menu-end shadow animated--grow-in border-0" aria-labelledby="alertsDropdown" style="width: 320px; z-index: 1050;">
        <h6 class="dropdown-header bg-primary text-white py-3 px-3 fw-bold rounded-top">
            Notifikasi
        </h6>
        <div style="max-height: 300px; overflow-y: auto;">
            <?php if(empty($notif)): ?>
                <a class="dropdown-item d-flex align-items-center p-3" href="#">
                    <div class="me-3">
                        <div class="icon-circle bg-light text-muted p-2 rounded-circle" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-info-circle"></i>
                        </div>
                    </div>
                    <div>
                        <span class="small text-muted">Tidak ada notifikasi baru</span>
                    </div>
                </a>
            <?php else: ?>
                <?php foreach($notif as $n): ?>
                <a class="dropdown-item d-flex align-items-center py-3 border-bottom" href="#">
                    <div class="me-3">
                        <div class="icon-circle bg-primary bg-opacity-10 text-primary rounded-circle" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-file-alt"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1" style="min-width: 0;">
                        <div class="small text-muted mb-1"><?= date('d M Y, H:i', strtotime($n['created_at'])) ?></div>
                        <div class="fw-bold text-dark small text-truncate"><?= $n['judul'] ?></div>
                        <div class="small text-secondary text-truncate"><?= $n['pesan'] ?></div>
                    </div>
                </a>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <a class="dropdown-item text-center small text-secondary py-2 bg-light rounded-bottom fw-bold" href="<?= base_url('notifikasi/read_all') ?>">Tandai Semua Dibaca</a>
    </div>
</li>
