{% load ui_classes %}
{% ui_class "ui.toast" "closeIcon" as close_icon_class %}
<template x-ui-toast:item>
    <div x-data="UiToast" data-ui-toast data-ui-toast-recipe data-ui-semantic-surface
         data-ui-surface="+3" data-ui-elevation="4" data-state="closed" aria-atomic="true"
         x-ui-transition:opening="$ui.motion($transition).animate($ui.motion.presets.toast.in).role('presence').play()"
         x-ui-transition:closing="$transition.data.reason === 'swipe' ? null : $ui.motion($transition).animate($ui.motion.presets.toast.out).role('presence').play()">
        <span data-ui-toast-marker aria-hidden="true"></span>
        <div data-ui-toast-content>
            <strong data-ui-toast-title x-show="$toast.title" x-text="$toast.title"></strong>
            <div data-ui-toast-description x-show="$toast.description" x-text="$toast.description"></div>
        </div>
        <button type="button" data-ui-toast-close aria-label="Dismiss notification">
            <c-icons.close data-ui-toast-close-icon class="{{ close_icon_class }}" aria-hidden="true" />
        </button>
    </div>
</template>