<!-- vim:set tabstop=4 softtabstop=4 expandtab :-->

<nav class="d-flex justify-content-center" aria-label="...">
    <ul class="pagination opacity-0">
        <?php if ($page > 1): ?>
            <li class="page-item deerjika-tail">
                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (1)">
                    <img src="./assets/page-first.png" />
                    <div class="page-link-text">|&lt;</div>
                </a>
            </li>
        <?php else: ?>
            <li class="page-item disabled deerjika-tail">
                <span class="page-link">
                    <img src="./assets/page-first.png" />
                    <div class="page-link-text"></div>
                </span>
            </li>
        <?php endif ?>

        <?php for ($i = max (min ($page + 10, $pages_max) - 20, 1); $i < $page; ++$i): ?>
            <li class="page-item page-<?= $page - $i ?>">
                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)">
                    <img src="./assets/page-body.png" />
                    <div class="page-link-text"><?= $i ?></div>
                </a>
            </li>
        <?php endfor ?>

        <li class="page-item active" aria-current="page">
            <span class="page-link">
                <img src="./assets/page-body.png" />
                <div class="page-link-text"><?= $page ?></div>
            </span>
        </li>

        <?php for ($i = $page + 1; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i): ?>
            <li class="page-item page-<?= $i - $page ?>">
                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)">
                    <img src="./assets/page-body.png" />
                    <div class="page-link-text"><?= $i ?></div>
                </a>
            </li>
        <?php endfor ?>

        <?php if ($page < $pages_max): ?>
            <li class="page-item">
                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">
                    <img src="./assets/page-last.png" />
                    <div class="page-link-text">&gt;|</div>
                </a>
            </li>
        <?php else: ?>
            <li class="page-item disabled">
                <span class="page-link">
                    <img src="./assets/page-last.png" />
                    <div class="page-link-text"></div>
                </span>
            </li>
        <?php endif ?>
    </ul>
</nav>