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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.</p>

<h2 class="font-heading-xl margin-top-4">Basic</h2>
<c-header type="basic" title="Agency of Digital Services">
    <c-header.nav_item href="/about" text="About" is_current="true" />
    <c-header.nav_item href="/programs" text="Programs" />
    <c-header.nav_item text="Services" type="dropdown" submenu_id="basic-nav-services">
        <c-header.nav_submenu id="basic-nav-services">
            <c-header.nav_submenu_item href="/services/benefits" text="Benefits" />
            <c-header.nav_submenu_item href="/services/permits" text="Permits and Licensing" />
            <c-header.nav_submenu_item href="/services/records" text="Records and Documents" />
        </c-header.nav_submenu>
    </c-header.nav_item>
    <c-header.nav_item href="/contact" text="Contact Us" />
</c-header>

<h2 class="font-heading-xl margin-top-4">Extended</h2>
<c-header type="extended" title="Agency of Digital Services">
    <c-header.nav_item href="/about" text="About" is_current="true" />
    <c-header.nav_item text="Programs" type="dropdown" submenu_id="extended-nav-programs">
        <c-header.nav_submenu id="extended-nav-programs">
            <c-header.nav_submenu_item href="/programs/grants" text="Grants and Funding" />
            <c-header.nav_submenu_item href="/programs/research" text="Research Initiatives" />
            <c-header.nav_submenu_item href="/programs/training" text="Training and Education" />
        </c-header.nav_submenu>
    </c-header.nav_item>
    <c-header.nav_item text="Services" type="dropdown" submenu_id="extended-nav-services">
        <c-header.nav_submenu id="extended-nav-services">
            <c-header.nav_submenu_item href="/services/benefits" text="Benefits" />
            <c-header.nav_submenu_item href="/services/permits" text="Permits and Licensing" />
            <c-header.nav_submenu_item href="/services/records" text="Records and Documents" />
            <c-header.nav_submenu_item href="/services/forms" text="Forms" />
        </c-header.nav_submenu>
    </c-header.nav_item>
    <c-header.nav_item href="/data" text="Open Data" />
    <c-header.nav_item href="/contact" text="Contact Us" />

    <c-slot name="secondary_links">
        <c-header.secondary_link href="/espanol" text="En Espanol" />
        <c-header.secondary_link href="/help" text="Help" />
    </c-slot>
</c-header>
{% endblock %}