{% load zooy %}
{# Carbon Design System Modal Panel #}
{# Block naming convention: #}
{#   - cds-component-name for element content #}
{#   - cds-component-name__attribute for element attributes #}
{#   - size options are: xs, sm, md, or lg  which only controls the width #}

<cds-modal open size="{% block cds-modal__size %}sm{% endblock %}">
    {% rand_id "modal-form" as form_id %}

    <cds-modal-header>
        {# Close button comes first - Carbon's recommended order #}
        <cds-modal-close-button></cds-modal-close-button>

        {# cds-modal-label: Optional category/context label #}
        <cds-modal-label>{% block cds-modal-label %}{% endblock %}</cds-modal-label>

        {# cds-modal-heading: Modal title #}
        <cds-modal-heading>
            {% block cds-modal-heading %}{% endblock %}
        </cds-modal-heading>
    </cds-modal-header>

    <cds-modal-body>
        {# cds-modal-body-content: Instructional/descriptive text #}
        <cds-modal-body-content description="{% block cds-modal-body-content__description %}{% endblock %}">
            {% block cds-modal-body-content %}{% endblock %}
            {% block jan-debug %}{% endblock %}
        </cds-modal-body-content>

        {# cds-modal-body: Main content (forms, inputs, etc.) #}
        {% block cds-modal-body %}{% endblock %}
    </cds-modal-body>

    {# cds-modal-footer: Optional footer for non-form modals #}
    {% block cds-modal-footer %}{% endblock %}
</cds-modal>