{% load static cotton %}
<c-vars
    type="page"
    page_number=""
    href="#"
    is_current=""
    aria_label=""
    extra_classes=""
/>

{% if type == "previous" %}
<li class="usa-pagination__item usa-pagination__arrow {{ extra_classes }}">
    <c-link href="{{ href }}" variant="pagination-previous" aria_label="{{ aria_label }}">
        <svg class="usa-icon" aria-hidden="true" role="img">
            <use href="{% static 'frontend/uswds/img/usa-icons/close.svg' %}#navigate_before"></use>
        </svg>
        <span class="usa-pagination__link-text">{{ slot }}</span>
    </c-link>
</li>
{% elif type == "next" %}
<li class="usa-pagination__item usa-pagination__arrow {{ extra_classes }}">
    <c-link href="{{ href }}" variant="pagination-next" aria_label="{{ aria_label }}">
        <span class="usa-pagination__link-text">{{ slot }}</span>
        <svg class="usa-icon" aria-hidden="true" role="img">
            <use href="{% static 'frontend/uswds/img/usa-icons/close.svg' %}#navigate_next"></use>
        </svg>
    </c-link>
</li>
{% elif type == "overflow" %}
<li class="usa-pagination__item usa-pagination__overflow {{ extra_classes }}" aria-label="ellipsis indicating non-visible pages">
    <span>…</span>
</li>
{% else %}
<li class="usa-pagination__item usa-pagination__page-no {{ extra_classes }}">
    <c-link href="{{ href }}" variant="pagination-page" is_current="{{ is_current }}" aria_label="{{ aria_label }}">
        {{ page_number }}
    </c-link>
</li>
{% endif %}