{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:toast" %}

<c-vars id="ui-toast-root"
        position="top-right"
        duration="5000"
        include_messages="True"
        max_items="3"
        class="" />
{% ui_class "ui.toast" "outlet" position=position class=class as outlet_class %}
<div id="{{ id }}"
     x-data="UiToastOutlet"
     data-ui-toast-outlet
     data-id="{{ id }}"
     data-ui-key="{{ id }}"
     data-position="{{ position }}"
     data-duration="{{ duration }}"
     data-max-items="{{ max_items }}"
     aria-label="Notifications"
     class="{{ outlet_class }}"
     {{ attrs }}>
    {% if include_messages|ui_bool %}
        {% for message in messages %}
            <c-ui.toast level="{{ message.tags|ui_toast_level }}"
                        variant="{{ message.tags|ui_toast_variant }}"
                        duration="{{ duration }}">
                {{ message }}
            </c-ui.toast>
        {% endfor %}
    {% endif %}
    {{ slot }}
</div>