{% load ui_classes ui_props %}

<c-vars level="info"
        variant="default"
        title=""
        duration="5000"
        dismissible="True"
        class=""
        content_class=""
        close_class="" />
{% ui_class "ui.toast" "content" class=content_class as content_class_resolved %}
{% ui_class "ui.toast" "title" as title_class %}
{% ui_class "ui.toast" "description" as description_class %}
{% ui_class "ui.toast" "close" class=close_class as close_class_resolved %}
{% ui_class "ui.toast" "closeIcon" as close_icon_class %}
{% with toast_level=level|ui_toast_level %}
    {% with toast_variant=variant|ui_toast_variant %}
        {% ui_class "ui.toast" "root" level=toast_level variant=toast_variant class=class as root_class %}
        {% ui_class "ui.toast" "marker" variant=toast_variant as marker_class %}
        <div x-data="UiToast"
             data-ui-toast
             data-level="{{ toast_level }}"
             data-variant="{{ toast_variant }}"
             data-duration="{{ duration }}"
             data-dismissible="{{ dismissible|ui_bool|yesno:'true,false' }}"
             data-state="open"
             role="{% if toast_level == 'danger' or toast_level == 'warning' %}alert{% else %}status{% endif %}"
             aria-live="{% if toast_level == 'danger' or toast_level == 'warning' %}assertive{% else %}polite{% endif %}"
             aria-atomic="true"
             class="{{ root_class }}"
             {{ attrs }}>
            <span data-ui-toast-marker aria-hidden="true" class="{{ marker_class }}"></span>
            <div data-ui-toast-content class="{{ content_class_resolved }}">
                {% if title %}
                    <c-ui.text as="strong"
                               size="sm"
                               weight="medium"
                               truncate
                               class="{{ title_class }}"
                               data-ui-toast-title>
                        {{ title }}
                    </c-ui.text>
                {% endif %}
                <c-ui.text as="div"
                           size="sm"
                           color="muted"
                           class="{{ description_class }}"
                           data-ui-toast-description>
                    {{ slot }}
                </c-ui.text>
            </div>
            {% if dismissible|ui_bool %}
                <button type="button"
                        aria-label="Dismiss notification"
                        data-ui-toast-close
                        class="{{ close_class_resolved }}">
                    <c-component is="icons.close"
                                 data-ui-toast-close-icon
                                 class="{{ close_icon_class }}"
                                 aria-hidden="true" />
                </button>
            {% endif %}
        </div>
    {% endwith %}
{% endwith %}