{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">Pagination is navigation for paginated content.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-pagination aria_label="Pagination for search results">
    <c-pagination.item type="previous" href="/results?page=3" aria_label="Previous page">Previous</c-pagination.item>
    <c-pagination.item page_number="1" href="/results?page=1" aria_label="Page 1" />
    <c-pagination.item page_number="2" href="/results?page=2" aria_label="Page 2" />
    <c-pagination.item page_number="3" href="/results?page=3" aria_label="Page 3" />
    <c-pagination.item page_number="4" href="/results?page=4" is_current="true" aria_label="Page 4, current page" />
    <c-pagination.item page_number="5" href="/results?page=5" aria_label="Page 5" />
    <c-pagination.item type="overflow" />
    <c-pagination.item page_number="10" href="/results?page=10" aria_label="Last page, page 10" />
    <c-pagination.item type="next" href="/results?page=5" aria_label="Next page">Next</c-pagination.item>
</c-pagination>

<h2 class="font-heading-xl margin-top-4">Unbounded</h2>
<p class="margin-top-1">When the total number of pages is unknown, show only previous and next controls.</p>
<c-pagination aria_label="Pagination for document listing">
    <c-pagination.item type="previous" href="/documents?page=2" aria_label="Previous page">Previous</c-pagination.item>
    <c-pagination.item type="next" href="/documents?page=4" aria_label="Next page">Next</c-pagination.item>
</c-pagination>
{% endblock %}