{% comment %}
    * Parameters *
    class: optional class for the inner dialog div
    open_var: string (optional) - Alpine.js variable name for open state
    open: boolean (optional) - static boolean for open state, used if open_var not provided
    show_backdrop: boolean (optional) - default: True
    close_on_input_events: whether to close the dialog on mouse clicks or esc keys
    size: size variant of the dialog
{% endcomment %}

<c-vars
    class=""
    open_var=""
    :open=False
    :show_backdrop=True
    :close_on_input_events=False
    size="large"
    :size_variants="{
        'large': 'max-w-[560px] min-w-[280px]',
        'small': 'max-w-[400px] min-w-[260px]',
    }"
    base_class="fixed inset-0 z-100"
    dialog_container_class="flex min-h-full items-center justify-center p-4"
    dialog_base_class="absolute flex flex-col p-5 gap-5 bg-dialog-background rounded-xl shadow-xl max-h-[560px]"
/>

{% if open_var %}
<div
    x-show="{{ open_var }}"
    x-cloak
    class="{{ base_class }}"
    role="dialog"
    aria-modal="true"
    {{ attrs }}
>
{% else %}
<div
    x-data="{ open: {{ open|yesno:'true,false' }} }"
    x-show="open"
    x-cloak
    class="{{ base_class }}"
    role="dialog"
    aria-modal="true"
    {{ attrs }}
>
{% endif %}
    {% if show_backdrop %}
        <c-v1.backdrop open_var="{{ open_var|default:"open" }}" :close_on_input_events="close_on_input_events" />
    {% endif %}


    <div class="{{ dialog_container_class }}">
        <div
            {% if open_var %}x-show="{{ open_var }}"{% else %}x-show="open"{% endif %}
            class="{{ dialog_base_class }} {{ size_variants|get_item:size }} {{ class }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            >
            {{ slot }}
        </div>
    </div>
</div>