{#- chirp-ui: Alert component
    Status alerts with variant styling and optional dismiss.
    When collapsible=true, renders as <details>/<summary> (collapsed by default if open=false).

    Named slot: actions (e.g. Retry button).

    Usage:
        from "chirpui/alert.html" import alert

        call alert(variant="success")
            Done! Your changes have been saved.
        end

        call alert(variant="error", dismissible=true)
            Something went wrong.
            {% slot actions %}<button>Retry</button>{% end %}
        end

        call alert(variant="warning", collapsible=true, open=false, icon="↑", title="Shortcut collisions")
            Long warning content revealed on expand.
        end

    Variants: info (default), success, warning, error
-#}

{% def alert(variant="info", dismissible=false, icon=none, title=none, cls="", collapsible=false, open=true) %}
{% set alert_class = "alert" | bem(variant=variant, cls=cls) %}
{% if collapsible %}
<details class="{{ alert_class }}" role="alert"{% if open %} open{% endif %}>
    <summary class="chirpui-alert__body">
        {% if icon %}<span class="chirpui-alert__icon">{{ icon | icon }}</span>{% endif %}
        {% if title %}<span class="chirpui-alert__title">{{ title }}</span>{% endif %}
    </summary>
    <div class="chirpui-alert__body chirpui-mt-sm">
        {% slot %}
        {% slot actions %}
        {% if dismissible %}
        <button type="button" class="chirpui-alert__close" aria-label="Dismiss"
                @click="$el.closest('.chirpui-alert').remove()">&times;</button>
        {% endif %}
    </div>
</details>
{% else %}
<div class="{{ alert_class }}" role="alert" x-data>
    {% if icon %}
        <span class="chirpui-alert__icon">{{ icon | icon }}</span>
    {% end %}
    <div class="chirpui-alert__body">
        {% if title %}
            <div class="chirpui-alert__title">{{ title }}</div>
        {% end %}
        {% slot %}
        <div class="chirpui-alert__actions">{% slot actions %}</div>
    </div>
    {% if dismissible %}
        <button class="chirpui-alert__close"
                type="button"
                aria-label="Dismiss"
                @click="$el.closest('.chirpui-alert').remove()">&times;</button>
    {% end %}
</div>
{% endif %}
{% end %}