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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A footer serves site visitors who arrive at the bottom of a page without finding what they want.</p>

<h2 class="font-heading-xl margin-top-4">Slim</h2>
<c-footer type="slim" agency_name="Agency of Digital Services">
    <c-footer.link href="/about" text="About" type="slim" />
    <c-footer.link href="/accessibility" text="Accessibility" type="slim" />
    <c-footer.link href="/foia" text="FOIA" type="slim" />
    <c-footer.link href="/privacy" text="Privacy Policy" type="slim" />

    <c-slot name="contact_info">
        <c-footer.address type="slim">
            <c-footer.contact_item href="tel:+12025551234" text="(202) 555-1234" type="slim" />
            <c-footer.contact_item href="mailto:info@agency.gov" text="info@agency.gov" type="slim" />
        </c-footer.address>
    </c-slot>
</c-footer>

<h2 class="font-heading-xl margin-top-4">Medium</h2>
<c-footer type="medium" agency_name="Agency of Digital Services" contact_heading="Contact Us">
    <c-footer.link href="/about" text="About" />
    <c-footer.link href="/accessibility" text="Accessibility Support" />
    <c-footer.link href="/foia" text="FOIA Requests" />
    <c-footer.link href="/no-fear" text="No FEAR Act Data" />
    <c-footer.link href="/report" text="Office of the Inspector General" />
    <c-footer.link href="/performance" text="Performance Reports" />
    <c-footer.link href="/privacy" text="Privacy Policy" />

    <c-slot name="social_links">
        <c-footer.social_link>
            <c-footer.social_link_item href="https://facebook.com" icon="facebook" alt="Facebook" />
            <c-footer.social_link_item href="https://twitter.com" icon="twitter" alt="Twitter" />
            <c-footer.social_link_item href="https://youtube.com" icon="youtube" alt="YouTube" />
            <c-footer.social_link_item href="https://instagram.com" icon="instagram" alt="Instagram" />
        </c-footer.social_link>
    </c-slot>

    <c-slot name="contact_info">
        <c-footer.address>
            <c-footer.contact_item href="tel:+12025551234" text="(202) 555-1234" />
            <c-footer.contact_item href="mailto:info@agency.gov" text="info@agency.gov" />
        </c-footer.address>
    </c-slot>
</c-footer>

<h2 class="font-heading-xl margin-top-4">Big</h2>
<c-footer type="big" agency_name="Agency of Digital Services" contact_heading="Contact Us" show_signup="true" signup_heading="Sign up for email updates" signup_label="Your email address">
    <c-footer.nav_column title="About Us">
        <c-footer.secondary_link href="/mission" text="Our Mission" />
        <c-footer.secondary_link href="/leadership" text="Leadership" />
        <c-footer.secondary_link href="/budget" text="Budget and Performance" />
        <c-footer.secondary_link href="/careers" text="Careers" />
    </c-footer.nav_column>
    <c-footer.nav_column title="Programs">
        <c-footer.secondary_link href="/grants" text="Grants and Loans" />
        <c-footer.secondary_link href="/benefits" text="Benefit Programs" />
        <c-footer.secondary_link href="/data" text="Open Data" />
        <c-footer.secondary_link href="/research" text="Research Initiatives" />
    </c-footer.nav_column>
    <c-footer.nav_column title="Resources">
        <c-footer.secondary_link href="/forms" text="Forms and Applications" />
        <c-footer.secondary_link href="/faq" text="Frequently Asked Questions" />
        <c-footer.secondary_link href="/contact" text="Contact Us" />
        <c-footer.secondary_link href="/glossary" text="Glossary" />
    </c-footer.nav_column>
    <c-footer.nav_column title="Policies">
        <c-footer.secondary_link href="/accessibility" text="Accessibility" />
        <c-footer.secondary_link href="/foia" text="FOIA" />
        <c-footer.secondary_link href="/privacy" text="Privacy Policy" />
        <c-footer.secondary_link href="/no-fear" text="No FEAR Act Data" />
    </c-footer.nav_column>

    <c-slot name="social_links">
        <c-footer.social_link>
            <c-footer.social_link_item href="https://facebook.com" icon="facebook" alt="Facebook" />
            <c-footer.social_link_item href="https://twitter.com" icon="twitter" alt="Twitter" />
            <c-footer.social_link_item href="https://youtube.com" icon="youtube" alt="YouTube" />
            <c-footer.social_link_item href="https://instagram.com" icon="instagram" alt="Instagram" />
            <c-footer.social_link_item href="https://rss.gov" icon="rss_feed" alt="RSS Feed" />
        </c-footer.social_link>
    </c-slot>

    <c-slot name="contact_info">
        <c-footer.address>
            <c-footer.contact_item href="tel:+12025551234" text="(202) 555-1234" />
            <c-footer.contact_item href="mailto:info@agency.gov" text="info@agency.gov" />
        </c-footer.address>
    </c-slot>
</c-footer>
{% endblock %}