{% load ui_classes ui_props %}

<c-vars level="info"
        color="auto"
        variant="default"
        title=""
        description=""
        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" "closeIcon" as close_icon_class %}
{% with toast_level=level|ui_toast_level %}
    {% with toast_color=color|ui_toast_color:toast_level %}
        {% with toast_variant=variant|ui_toast_variant %}
            {% with has_description=description|ui_has_content|yesno:"true,false" has_slot=slot|ui_has_content|yesno:"true,false" %}
                {% if has_description == "true" or has_slot == "true" %}
                    {% with has_body=True %}
                        {% with has_marker=toast_color|ui_toast_marker:toast_variant %}
                            {% ui_class "ui.toast" "root" variant=toast_variant color=toast_color hasMarker=has_marker hasDescription=has_body class=class as root_class %}
                            {% ui_class "ui.toast" "marker" variant=toast_variant color=toast_color as marker_class %}
                            {% ui_class "ui.toast" "title" variant=toast_variant as title_class %}
                            {% ui_class "ui.toast" "description" variant=toast_variant as description_class %}
                            {% ui_class "ui.toast" "close" variant=toast_variant class=close_class as close_class_resolved %}
                            <div x-data="UiToast"
                                 data-ui-toast
                                 data-level="{{ toast_level }}"
                                 data-color="{{ toast_color }}"
                                 data-variant="{{ toast_variant }}"
                                 data-duration="{{ duration }}"
                                 data-dismissible="{{ dismissible|ui_bool|yesno:'true,false' }}"
                                 data-description="true"
                                 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>
                                        {% if description %}{{ description }}{% else %}{{ slot }}{% endif %}
                                    </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 %}
                {% else %}
                    {% with has_body=False %}
                        {% with has_marker=toast_color|ui_toast_marker:toast_variant %}
                            {% ui_class "ui.toast" "root" variant=toast_variant color=toast_color hasMarker=has_marker hasDescription=has_body class=class as root_class %}
                            {% ui_class "ui.toast" "marker" variant=toast_variant color=toast_color as marker_class %}
                            {% ui_class "ui.toast" "title" variant=toast_variant as title_class %}
                            {% ui_class "ui.toast" "close" variant=toast_variant class=close_class as close_class_resolved %}
                            <div x-data="UiToast"
                                 data-ui-toast
                                 data-level="{{ toast_level }}"
                                 data-color="{{ toast_color }}"
                                 data-variant="{{ toast_variant }}"
                                 data-duration="{{ duration }}"
                                 data-dismissible="{{ dismissible|ui_bool|yesno:'true,false' }}"
                                 data-description="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 %}
                                </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 %}
                {% endif %}
            {% endwith %}
        {% endwith %}
    {% endwith %}
{% endwith %}