{#- chirp-ui: Toast component
    htmx OOB toast notifications.

    Usage:
        from "chirpui/toast.html" import toast, toast_container

        Place the container once in your base template:
            toast_container()

        Return a toast from any htmx response (OOB swap):
            toast("Item saved successfully!", variant="success")
            toast("Something went wrong.", variant="error", dismissible=true)
-#}

{% def toast_container(id="chirpui-toasts", cls="") %}
<div id="{{ id }}" class="chirpui-toast-container{{ " " ~ cls if cls else "" }}" aria-live="polite">
</div>
{% end %}

{% def toast(message, variant="info", id=none, dismissible=true, oob=true, container_id="chirpui-toasts", cls="") %}
{% set variant = variant | validate_variant(("info","success","warning","error"), "info") %}
<div {% if oob %}hx-swap-oob="beforeend:#{{ container_id }}"{% end %}>
    <div {% if id %}id="{{ id }}"{% end %}
         class="chirpui-toast chirpui-toast--{{ variant }}{{ " " ~ cls if cls else "" }}"
         role="alert" x-data>
        <span class="chirpui-toast__message">{{ message }}</span>
        {% if dismissible %}
            <button class="chirpui-toast__close"
                    type="button"
                    aria-label="Dismiss"
                    @click="$el.parentElement.remove()">&times;</button>
        {% end %}
    </div>
</div>
{% end %}