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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">An accordion is a list of headers that hide or reveal additional content when selected.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-accordion>
    <c-accordion_item heading="First Amendment" control_id="default-a1" :is_expanded="True">
        <p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
    </c-accordion_item>
    <c-accordion_item heading="Second Amendment" control_id="default-a2">
        <p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
    </c-accordion_item>
    <c-accordion_item heading="Third Amendment" control_id="default-a3">
        <p>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>
    </c-accordion_item>
    <c-accordion_item heading="Fourth Amendment" control_id="default-a4">
        <p>The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.</p>
    </c-accordion_item>
</c-accordion>

<h2 class="font-heading-xl margin-top-4">Bordered</h2>
<c-accordion type="bordered">
    <c-accordion_item heading="How do I apply for a federal grant?" control_id="bordered-a1" :is_expanded="True">
        <p>To apply for a federal grant, visit Grants.gov to search for available funding opportunities. Each listing includes eligibility requirements, application deadlines, and submission instructions. You will need to create an account and register your organization before submitting an application.</p>
    </c-accordion_item>
    <c-accordion_item heading="What documents do I need to submit?" control_id="bordered-a2">
        <p>Required documents typically include a project narrative, budget justification, organizational capability statement, and any required certifications. Specific requirements vary by program, so review the Notice of Funding Opportunity carefully for a complete list.</p>
    </c-accordion_item>
    <c-accordion_item heading="When will I hear back about my application?" control_id="bordered-a3">
        <p>Review timelines vary by agency and program. Most agencies will notify applicants within 90 to 180 days after the application deadline. You can check the status of your application through your Grants.gov account at any time.</p>
    </c-accordion_item>
</c-accordion>

<h2 class="font-heading-xl margin-top-4">Multiselectable</h2>
<c-accordion type="multiselectable">
    <c-accordion_item heading="Eligibility requirements" control_id="multi-a1" :is_expanded="True">
        <p>To be eligible for this program, applicants must be U.S. citizens or permanent residents, at least 18 years of age, and have a valid Social Security number. Additional requirements may apply depending on the specific benefit.</p>
    </c-accordion_item>
    <c-accordion_item heading="Application process" control_id="multi-a2" :is_expanded="True">
        <p>Applications can be submitted online through our secure portal or in person at your local field office. Processing times are typically 4 to 6 weeks. You will receive a confirmation number upon successful submission.</p>
    </c-accordion_item>
    <c-accordion_item heading="Appeals and reconsiderations" control_id="multi-a3">
        <p>If your application is denied, you have 60 days from the date of the decision letter to file an appeal. Appeals must be submitted in writing and include any additional documentation that supports your case.</p>
    </c-accordion_item>
    <c-accordion_item heading="Contact information" control_id="multi-a4">
        <p>For questions about your application or eligibility, contact our help desk at 1-800-555-0199 between 8:00 a.m. and 6:00 p.m. ET, Monday through Friday. You can also email us at support@agency.gov.</p>
    </c-accordion_item>
</c-accordion>
{% endblock %}