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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">An icon list reinforces the meaning and importance of individual list items with a leading icon.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-icon_list>
    <c-icon_list.item icon="check_circle" icon_color="text-green" title="Apply online">
        <p>Submit your application through our secure online portal. Most applications are processed within 5 to 7 business days.</p>
    </c-icon_list.item>
    <c-icon_list.item icon="check_circle" icon_color="text-green" title="Track your status">
        <p>Log in to your account to view real-time updates on the progress of your application and any required actions.</p>
    </c-icon_list.item>
    <c-icon_list.item icon="check_circle" icon_color="text-green" title="Receive your decision">
        <p>You will be notified by email and mail once a decision has been made. Approved applicants will receive further instructions.</p>
    </c-icon_list.item>
</c-icon_list>

<h2 class="font-heading-xl margin-top-4">With different icon colors</h2>
<c-icon_list>
    <c-icon_list.item icon="check_circle" icon_color="text-green" title="Eligible for benefits">
        <p>Based on the information provided, you meet the eligibility requirements for this program.</p>
    </c-icon_list.item>
    <c-icon_list.item icon="cancel" icon_color="text-red" title="Missing documentation">
        <p>Your application is incomplete. Please submit proof of residency and a valid photo ID to continue processing.</p>
    </c-icon_list.item>
    <c-icon_list.item icon="warning" icon_color="text-gold" title="Action required by March 31">
        <p>Your certification expires soon. Renew before the deadline to avoid an interruption in services.</p>
    </c-icon_list.item>
    <c-icon_list.item icon="info" icon_color="text-primary" title="New policy update">
        <p>Effective January 1, income thresholds have been adjusted. Review the updated guidelines to determine your eligibility.</p>
    </c-icon_list.item>
</c-icon_list>

<h2 class="font-heading-xl margin-top-4">Simple list without titles</h2>
<c-icon_list>
    <c-icon_list.item icon="check" icon_color="text-green">
        <p>You are a U.S. citizen or permanent resident</p>
    </c-icon_list.item>
    <c-icon_list.item icon="check" icon_color="text-green">
        <p>You are at least 18 years of age</p>
    </c-icon_list.item>
    <c-icon_list.item icon="check" icon_color="text-green">
        <p>You have a valid Social Security number</p>
    </c-icon_list.item>
    <c-icon_list.item icon="close" icon_color="text-red">
        <p>You have been convicted of a disqualifying offense</p>
    </c-icon_list.item>
</c-icon_list>
{% endblock %}