{% set firstLabel %}
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"></svg>
Newest{% endset %}

{% set prevLabel %}
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
Newer{% endset %}

{% set nextLabel %}Older
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
{% endset %}

{% set lastLabel %}Oldest
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>
{% endset %}

<nav aria-labelledby="pagination-title" class="pagination__wrapper">
    <h2 class="visually-hidden" id="pagination-title">Pagination</h2>
    <ul class="pagination">
        <li>
            {% if pagination.href.first %}
                <a href="{{ pagination.href.first }}">
                    {{ firstLabel | safe }}
                </a>
            {% else %}
                {{ firstLabel | safe }}
            {% endif %}
        </li>
        <li>
            {% if pagination.href.previous %}
                <a href=" {{ pagination.href.previous }}">
                    <i class="fa-solid fa-angle-left"></i>
                    {{ prevLabel | safe }}
                </a>
            {% else %}
                {{ prevLabel | safe }}
            {% endif %}
        </li>
        <li>
             {% if pagination.href.next %}
                <a href=" {{ pagination.href.next }}">
                    {{ nextLabel | safe }}
                </a>
            {% else %}
                {{ nextLabel | safe }}
            {% endif %}
        </li>
        <li>
            {% if pagination.href.last %}
                <a href=" {{ pagination.href.last }}">
                    {{ lastLabel | safe }}
                </a>
            {% else %}
                {{ lastLabel | safe }}
            {% endif %}
        </li>
    </ul>
</nav>

{%- css %}
    .pagination__wrapper {
        display: grid;
        place-content: center;
        margin-top: 3em;
    }

    .pagination {
        list-style-type: "";
        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; }
{% endcss %}