{% set toast = toast|default({}) %}
{% set type = toast.type|default('info') %}
{% set icon = {
    success: 'ti ti-circle-check',
    error: 'ti ti-alert-circle',
    warning: 'ti ti-alert-triangle',
    info: 'ti ti-info-circle'
}[type]|default('ti ti-info-circle') %}
{% set color = {
    success: 'success',
    error: 'danger',
    warning: 'warning',
    info: 'primary'
}[type]|default('primary') %}

<div
    id="{{ toast.id|default('toast_' ~ random()) }}"
    class="toast app-toast border-0 shadow{% if type == 'success' %} bg-success text-white{% endif %}"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    data-toast-target="item"
    data-toast-delay-param="{{ toast.delay|default(5000) }}"
>
    <div class="toast-body d-flex align-items-start gap-3">
        <span class="rounded-circle bg-{{ color }}-subtle text-{{ color }} app-toast-icon">
            <i class="{{ icon }}"></i>
        </span>
        <span class="flex-grow-1">
            <span class="fw-semibold d-block">{{ toast.title|default('Information') }}</span>
            <span class="{{ type == 'success' ? 'text-white' : 'text-body-secondary' }}">{{ toast.message|default('Operation effectuee.') }}</span>
        </span>
        <button type="button" class="btn-close{{ type == 'success' ? ' btn-close-white' : '' }} ms-auto" data-action="toast#close" aria-label="Fermer"></button>
    </div>
</div>