{% load ui_classes ui_props %}

<c-vars name=""
        open="False"
        mode="modal"
        side="right"
        size="md"
        dismissible="True"
        closable="True"
        disabled="False"
        autofocus_title="False"
        label=""
        description_id=""
        panel_class=""
        overlay_class=""
        class="" />
{% ui_class "ui.modal" "instance" as instance_class %}
{% ui_class "ui.modal" "root" mode=mode side=side size=size class=class as root_class %}
{% ui_class "ui.modal" "viewport" mode=mode side=side as viewport_class %}
{% ui_class "ui.modal" "overlay" class=overlay_class as overlay_class_resolved %}
{% ui_class "ui.modal" "panel" mode=mode side=side size=size class=panel_class as panel_class_resolved %}
{% ui_class "ui.modal" "close" as close_class %}
{% ui_class "ui.modal" "closeIcon" as close_icon_class %}
<div x-data="UiModal"
     x-bind="root"
     data-ui-modal-instance
     data-name="{{ name }}"
     data-open="{{ open }}"
     data-mode="{{ mode }}"
     data-side="{{ side }}"
     data-size="{{ size }}"
     data-dismissible="{{ dismissible }}"
     data-closable="{{ closable }}"
     {% if disabled|ui_bool %}data-disabled="true"{% endif %}
     {% if autofocus_title|ui_bool %}data-autofocus-title="true"{% endif %}
     data-label="{{ label }}"
     data-description-id="{{ description_id }}"
     data-panel-class="{{ panel_class }}"
     data-overlay-class="{{ overlay_class }}"
     data-class="{{ class }}"
     class="{{ instance_class }}">
    <dialog data-ui-modal
            data-state="closed"
            data-mode="{{ mode }}"
            data-side="{{ side }}"
            data-size="{{ size }}"
            role="dialog"
            aria-modal="true"
            {% if open|ui_bool %}open{% endif %}
            {% if label %}aria-label="{{ label }}"{% endif %}
            class="{{ root_class }}"
            {{ attrs }}>
        <div data-ui-modal-viewport
             data-state="closed"
             data-mode="{{ mode }}"
             data-side="{{ side }}"
             class="{{ viewport_class }}">
            <div data-ui-modal-overlay data-state="closed" class="{{ overlay_class_resolved }}"></div>
            <div data-ui-modal-panel
                 data-state="closed"
                 data-mode="{{ mode }}"
                 data-side="{{ side }}"
                 data-size="{{ size }}"
                 tabindex="-1"
                 class="{{ panel_class_resolved }}">
                {{ slot }}
                {% if closable|ui_bool %}
                    <button type="button" data-ui-modal-close class="{{ close_class }}" aria-label="Close">
                        <c-component is="icons.close"
                                     class="{{ close_icon_class }}"
                                     data-ui-modal-close-icon
                                     aria-hidden="true" />
                    </button>
                {% endif %}
            </div>
        </div>
    </dialog>
</div>