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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A modal disables page content and focuses the user's attention on a single task or message.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-modal id="default-modal" href="#default-modal" button_text="Open default modal" heading_id="default-modal-heading" body_id="default-modal-body">
    <c-modal.modal_header heading_id="default-modal-heading">
        Are you sure you want to continue?
    </c-modal.modal_header>
    <c-modal.modal_body>
        <p id="default-modal-body">You have unsaved changes that will be lost. This action cannot be undone.</p>
    </c-modal.modal_body>
    <c-modal.modal_footer>
        <ul class="usa-button-group">
            <li class="usa-button-group__item">
                <c-modal.modal_close_button text="Continue without saving" />
            </li>
            <li class="usa-button-group__item">
                <c-modal.modal_close_button text="Go back" type="unstyled" />
            </li>
        </ul>
    </c-modal.modal_footer>
</c-modal>

<h2 class="font-heading-xl margin-top-4">Large</h2>
<c-modal id="large-modal" href="#large-modal" button_text="Open large modal" type="large" heading_id="large-modal-heading" body_id="large-modal-body">
    <c-modal.modal_header heading_id="large-modal-heading">
        Terms and conditions
    </c-modal.modal_header>
    <c-modal.modal_body>
        <p id="large-modal-body">By accessing and using this federal government system, you acknowledge that you are consenting to system monitoring for law enforcement and other purposes. Unauthorized use of this system is prohibited and subject to criminal and civil penalties, including all penalties applicable to unauthorized access (trespass) to computer systems.</p>
        <p>Use of this system constitutes consent to monitoring for these purposes. Any information collected through monitoring may be used for authorized civil and criminal investigations and for other authorized purposes. Information about misuse of this computer system may be reported to appropriate management officials and law enforcement for criminal prosecution.</p>
    </c-modal.modal_body>
    <c-modal.modal_footer>
        <ul class="usa-button-group">
            <li class="usa-button-group__item">
                <c-modal.modal_close_button text="I accept" />
            </li>
            <li class="usa-button-group__item">
                <c-modal.modal_close_button text="I decline" type="unstyled" />
            </li>
        </ul>
    </c-modal.modal_footer>
</c-modal>

<h2 class="font-heading-xl margin-top-4">Forced action</h2>
<c-modal id="forced-modal" href="#forced-modal" button_text="Open forced action modal" is_forced_action="true" heading_id="forced-modal-heading" body_id="forced-modal-body">
    <c-modal.modal_header heading_id="forced-modal-heading">
        Your session will expire
    </c-modal.modal_header>
    <c-modal.modal_body>
        <p id="forced-modal-body">You have been inactive for 15 minutes. For your security, your session will expire in 5 minutes. Any unsaved work will be lost. Would you like to continue your session?</p>
    </c-modal.modal_body>
    <c-modal.modal_footer>
        <ul class="usa-button-group">
            <li class="usa-button-group__item">
                <c-modal.modal_close_button text="Continue session" />
            </li>
            <li class="usa-button-group__item">
                <c-modal.modal_close_button text="Sign out" type="unstyled" />
            </li>
        </ul>
    </c-modal.modal_footer>
</c-modal>
{% endblock %}