<?php $pager->setSurroundCount(2) ?>

<nav aria-label="Page navigation" style="display: flex; justify-content: center; margin-top: 20px;">
    <ul style="display: flex; list-style: none; padding: 0; margin: 0; gap: 5px;">
    <?php if ($pager->hasPrevious()) : ?>
        <li>
            <a href="<?= $pager->getFirst() ?>" aria-label="<?= lang('Pager.first') ?>" style="display: block; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #475569; text-decoration: none; background: #fff; transition: background 0.2s;">
                <i class='bx bx-chevrons-left'></i> Awal
            </a>
        </li>
        <li>
            <a href="<?= $pager->getPrevious() ?>" aria-label="<?= lang('Pager.previous') ?>" style="display: block; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #475569; text-decoration: none; background: #fff; transition: background 0.2s;">
                <i class='bx bx-chevron-left'></i>
            </a>
        </li>
    <?php endif ?>

    <?php foreach ($pager->links() as $link) : ?>
        <li>
            <a href="<?= $link['uri'] ?>" style="display: block; padding: 8px 14px; border: 1px solid <?= $link['active'] ? '#4f46e5' : '#cbd5e1' ?>; border-radius: 6px; color: <?= $link['active'] ? '#fff' : '#475569' ?>; text-decoration: none; background: <?= $link['active'] ? '#4f46e5' : '#fff' ?>; font-weight: <?= $link['active'] ? 'bold' : 'normal' ?>; transition: background 0.2s;">
                <?= $link['title'] ?>
            </a>
        </li>
    <?php endforeach ?>

    <?php if ($pager->hasNext()) : ?>
        <li>
            <a href="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>" style="display: block; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #475569; text-decoration: none; background: #fff; transition: background 0.2s;">
                <i class='bx bx-chevron-right'></i>
            </a>
        </li>
        <li>
            <a href="<?= $pager->getLast() ?>" aria-label="<?= lang('Pager.last') ?>" style="display: block; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #475569; text-decoration: none; background: #fff; transition: background 0.2s;">
                Akhir <i class='bx bx-chevrons-right'></i>
            </a>
        </li>
    <?php endif ?>
    </ul>
</nav>
