{# Macro toast
   Uso:
     {% from "core/components/toast.html" import toast %}
     {{ toast("Guardado", level="success") }}

   level: info | success | warning | danger (error = danger)
   Se auto-elimina tras data-dismiss-after ms (static/js/toasts.js; 0 = no).
   Mismo marcado que window.dgToast() y que el aviso de error de htmx. Sin
   role propio: #dg-toasts ya es aria-live y una región anidada se anuncia
   dos veces.
#}
{% from "core/components/icon.html" import icon as _icon %}
{% set _TOAST_TONES = {"success": "success", "info": "info", "warning": "warning", "danger": "danger", "error": "danger"} %}
{% set _TOAST_ICONS = {"success": "circle-check", "info": "info"} %}

{% macro toast(message, level="info", dismiss_after=5000) %}
{%- set _tone = _TOAST_TONES.get(level, "info") %}
<div data-toast
     data-dismiss-after="{{ dismiss_after }}"
     class="dg-toast dg-toast-{{ level }} dg-tone-{{ _tone }}">
  {{ _icon(_TOAST_ICONS.get(level, "circle-alert")) }}
  <span class="dg-toast-text">{{ message }}</span>
  {# Sin toasts.js (host con layout propio) el botón sigue cerrando, sin fundido. #}
  <button type="button" class="btn-icon dg-toast-close" aria-label="Cerrar notificación"
          onclick="window.dgDismissToast ? window.dgDismissToast(this) : this.closest('[data-toast]').remove()">
    {{ _icon("x") }}
  </button>
</div>
{%- endmacro %}

{# Wrapper-region donde HTMX puede inyectar toasts con hx-swap-oob="beforeend".
   El container usa inset-x-4 en mobile para no desbordarse en viewports 375px,
   y en sm+ se ancla a la esquina inferior-derecha como siempre.

   NO usar con `core/layouts/sidebar_shell.html` ni `empty.html`: esos layouts
   ya montan su propio `#dg-toasts`. Dos `#dg-toasts` en la página harían que
   los OOB swaps caigan en el primer match (id duplicado). Solo para hosts con
   layout propio que no lo definan. #}
{% macro toast_region() %}
<div id="dg-toasts"
     class="fixed inset-x-4 bottom-4 sm:left-auto sm:right-4 sm:max-w-sm z-[60] flex flex-col gap-2"
     aria-live="polite" aria-atomic="false"></div>
{%- endmacro %}