{# @description A dialog laid out as a card, built around c-card. #}
{# @prop id:text | description:"Dialog id, used to open/close it via showModal()/close()." #}
{# @prop size:select['sm','md','lg','xl','full'] | default:"md" | description:"Dialog width." #}
{# @prop position:select['top','bottom','start','end'] | description:"Dialog placement; unset uses daisyUI's centred placement." #}
{# @prop closable:boolean | description:"Show a close button in the top corner." #}
{# @prop class:text | description:"Extra classes appended to the inner card surface." #}
{# @slot The dialog's body content. — Forwarded to the inner card's default slot. #}
{# @slot:actions <c-button text="Save" /> — Forwarded to the inner card's actions slot. #}
{# @slot:footer <c-button text="Cancel" /> — Forwarded to the inner card's footer slot. #}
{# @slot:footer_end <c-button text="Submit" /> — Forwarded to the inner card's footer_end slot. #}
{% load i18n mvp %}
<c-vars id size="md" position closable class />
<dialog {% if id %}id="{{ id }}"{% endif %}
        class="modal {% variation position "modal" "top,bottom,start,end" %}">
  <div class="modal-box bg-transparent p-0 shadow-none {% if position == "top" or position == "bottom" %}w-full max-w-none{% else %}w-11/12 {% if size == "sm" %}max-w-md{% elif size == "lg" %}max-w-4xl{% elif size == "xl" %}max-w-6xl{% elif size == "full" %}max-w-none{% else %}max-w-2xl{% endif %}{% endif %}">
    <c-card class="w-full h-full {{ class }}" :attrs="attrs">
      {{ slot }}
      {% if actions %}<c-slot name="actions">{{ actions }}</c-slot>{% endif %}
      {% if footer %}<c-slot name="footer">{{ footer }}</c-slot>{% endif %}
      {% if footer_end %}<c-slot name="footer_end">{{ footer_end }}</c-slot>{% endif %}
    </c-card>
    {% if closable %}
      <form method="dialog">
        <button class="btn btn-sm btn-circle btn-ghost absolute end-3 top-3"
                aria-label="{% trans "Close" %}">✕</button>
      </form>
    {% endif %}
  </div>
  <form method="dialog" class="modal-backdrop">
    <button aria-label="{% trans "Close" %}">{% trans "Close" %}</button>
  </form>
</dialog>