{% set firstLabel = "Newest" %}
{% set prevLabel = "Newer" %}
{% set nextLabel = "Older" %}
{% set lastLabel = "Oldest" %}

<nav aria-label="pagination" class="pagination__wrapper">
    <ul class="pagination">
        <li>
            {% if pagination.href.first %}
                <a href=" {{ pagination.href.first }}">
                    <i class="fa-solid fa-angles-left"></i>
                    {{ firstLabel }}
                </a>
            {% else %}
                <i class="fa-solid fa-angles-left"></i>
                {{ firstLabel }}
            {% endif %}
        </li>
        <li>
            {% if pagination.href.previous %}
                <a href=" {{ pagination.href.previous }}">
                    <i class="fa-solid fa-angle-left"></i>
                    {{ prevLabel }}
                </a>
            {% else %}
                <i class="fa-solid fa-angle-left"></i>
                {{ prevLabel }}
            {% endif %}
        </li>
        <li>
             {% if pagination.href.next %}
                <a href=" {{ pagination.href.next }}">
                    {{ nextLabel }}
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            {% else %}
                {{ nextLabel }}
                <i class="fa-solid fa-angle-right"></i>
            {% endif %}
        </li>
        <li>
            {% if pagination.href.last %}
                <a href=" {{ pagination.href.last }}">
                    {{ lastLabel }}
                    <i class="fa-solid fa-angles-right"></i>
                </a>
            {% else %}
                {{ lastLabel }}
                <i class="fa-solid fa-angles-right"></i>
            {% endif %}
        </li>
    </ul>
</nav>

<style>
    .pagination__wrapper {
        display: grid;
        place-content: center;
        margin-top: 3em;
    }

    .pagination {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 0.5em;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination li {
        text-align: center;
        padding: 0.3em 0.7em;
        color: var(--clr-title-border);
        background-color: var(--clr-code-bg);
    }

    .pagination li:has(a) {
        background-color: var(--clr-title-border);
    }

    .pagination li:has(a):hover {
        cursor: pointer;
        background-color: var(--clr-link-hover);
    }

    .pagination li:has(a):focus-within {
        outline: 0.2em solid var(--clr-title-border);
        outline-offset: 0.15em;
    }

    .pagination li a {
        color: var(--clr-link-btn-hover);
        text-decoration: none;
    }

    .pagination li a:focus {
        outline: none;
    }
</style>