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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">Hierarchical, defined navigation to help users understand where they are within a site.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-side_nav aria_label="Program navigation">
    <c-side_nav.item text="Overview" href="/program/overview" />
    <c-side_nav.item text="Eligibility" href="/program/eligibility" />
    <c-side_nav.item text="How to Apply" href="/program/apply" />
    <c-side_nav.item text="Required Documents" href="/program/documents" />
    <c-side_nav.item text="Contact Us" href="/program/contact" />
</c-side_nav>

<h2 class="font-heading-xl margin-top-4">Current item</h2>
<c-side_nav aria_label="Benefits navigation">
    <c-side_nav.item text="Overview" href="/benefits/overview" />
    <c-side_nav.item text="Eligibility" href="/benefits/eligibility" is_current="true" />
    <c-side_nav.item text="How to Apply" href="/benefits/apply" />
    <c-side_nav.item text="Check Application Status" href="/benefits/status" />
    <c-side_nav.item text="Appeals Process" href="/benefits/appeals" />
</c-side_nav>

<h2 class="font-heading-xl margin-top-4">Nested navigation</h2>
<c-side_nav aria_label="Agency navigation">
    <c-side_nav.item text="About the Agency" href="/agency/about" />
    <c-side_nav.item text="Programs" href="/agency/programs" is_current="true">
        <c-side_nav.item text="Grants and Funding" href="/agency/programs/grants" />
        <c-side_nav.item text="Research Initiatives" href="/agency/programs/research" is_current="true">
            <c-side_nav.item text="Current Projects" href="/agency/programs/research/current" />
            <c-side_nav.item text="Past Projects" href="/agency/programs/research/past" />
            <c-side_nav.item text="Publications" href="/agency/programs/research/publications" />
        </c-side_nav.item>
        <c-side_nav.item text="Training and Education" href="/agency/programs/training" />
    </c-side_nav.item>
    <c-side_nav.item text="Open Data" href="/agency/data" />
    <c-side_nav.item text="Careers" href="/agency/careers" />
    <c-side_nav.item text="Contact Us" href="/agency/contact" />
</c-side_nav>
{% endblock %}