{{- /*gotype: assistant/components.Toast*/ -}}
{{ define "toast" }}
    <div class="toastComponent {{ .ToastPosition }} transition-opacity fixed flex items-center w-full max-w-xs p-4 space-x-4 text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg shadow dark:text-gray-400 dark:divide-gray-700 dark:bg-gray-800" role="alert">
        <div class="text-sm font-normal">
            {{ .Label }}
        </div>
        <div class="flex items-center ms-auto space-x-2 rtl:space-x-reverse">
            <a class="toastClose text-sm font-medium text-blue-600 p-1.5 hover:bg-blue-100 rounded-lg dark:text-blue-500 dark:hover:bg-gray-700"
               hx-post="{{ .Url }}" href="#"
               {{ if .HasTarget }} hx-target="{{ .Target }}" {{ end }}
            >{{.LinkLabel}}</a>
            <button type="button" class="toastClose ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#archiveToast" aria-label="Close">
                <span class="sr-only">Close</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
            </button>
        </div>
    </div>
    <script>
        function hideToast() {
            document.querySelectorAll('.toastComponent').forEach(function (element) {
                element.style.display = 'none';
            });
        }

        document.querySelectorAll('.toastClose').forEach(function (element) {
            element.addEventListener('click', function () {
                hideToast();
            });
        });

        setTimeout(() => {
            hideToast();
        }, ({{or .TimeoutMs 5000}}));
    </script>
{{ end }}