{% load static %}

<style>
    .bp-toast-container {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        pointer-events: none;
    }

    .bp-toast {
        width: 390px;
        max-width: calc(100vw - 36px);
        min-height: 74px;
        background: #ffffff;
        border-radius: 14px;
        box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18);
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 42px 14px 14px;
        position: relative;
        overflow: hidden;
        pointer-events: auto;
        animation: bpToastIn 0.28s ease;
        border: 1px solid rgba(15, 23, 42, 0.07);
    }

    .bp-toast-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bp-toast-icon svg {
        width: 21px;
        height: 21px;
        display: block;
    }

    .bp-toast-content {
        flex: 1;
        padding-top: 1px;
    }

    .bp-toast-title {
        font-size: 15px;
        font-weight: 700;
        color: #111827;
        line-height: 1.2;
        margin-bottom: 5px;
    }

    .bp-toast-message {
        font-size: 13.5px;
        font-weight: 400;
        color: #667085;
        line-height: 1.35;
        word-break: break-word;
    }

    .bp-toast-close {
        position: absolute;
        top: 17px;
        right: 18px;
        border: none;
        background: transparent;
        color: #667085;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        opacity: 0.9;
    }

    .bp-toast-close:hover {
        opacity: 1;
        color: #111827;
    }

    .bp-toast-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        animation: bpToastProgress var(--bp-duration, 3000ms) linear forwards;
        transform-origin: left;
    }

    .bp-toast-success .bp-toast-icon {
        background: #dcfce7;
        border: 1px solid #86efac;
        color: #16a34a;
    }

    .bp-toast-success .bp-toast-progress {
        background: #22c55e;
    }

    .bp-toast-error .bp-toast-icon,
    .bp-toast-danger .bp-toast-icon {
        background: #fee2e2;
        border: 1px solid #fecaca;
        color: #dc2626;
    }

    .bp-toast-error .bp-toast-progress,
    .bp-toast-danger .bp-toast-progress {
        background: #dc2626;
    }

    .bp-toast-warning .bp-toast-icon {
        background: #fef3c7;
        border: 1px solid #fde68a;
        color: #d97706;
    }

    .bp-toast-warning .bp-toast-progress {
        background: #f59e0b;
    }

    .bp-toast-info .bp-toast-icon {
        background: #dbeafe;
        border: 1px solid #bfdbfe;
        color: #2563eb;
    }

    .bp-toast-info .bp-toast-progress {
        background: #2563eb;
    }

    .bp-toast-hide {
        animation: bpToastOut 0.28s ease forwards;
    }

    @keyframes bpToastIn {
        from {
            opacity: 0;
            transform: translateX(35px) scale(0.98);
        }

        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    @keyframes bpToastOut {
        from {
            opacity: 1;
            transform: translateX(0) scale(1);
        }

        to {
            opacity: 0;
            transform: translateX(35px) scale(0.98);
        }
    }

    @keyframes bpToastProgress {
        from {
            transform: scaleX(1);
        }

        to {
            transform: scaleX(0);
        }
    }

    @media (max-width: 576px) {
        .bp-toast-container {
            top: 12px;
            left: 12px;
            right: 12px;
        }

        .bp-toast {
            width: 100%;
            max-width: 100%;
            min-height: 70px;
            padding: 13px 40px 13px 13px;
            border-radius: 13px;
        }

        .bp-toast-icon {
            width: 36px;
            height: 36px;
            min-width: 36px;
        }

        .bp-toast-icon svg {
            width: 20px;
            height: 20px;
        }

        .bp-toast-title {
            font-size: 14.5px;
        }

        .bp-toast-message {
            font-size: 13px;
        }

        .bp-toast-close {
            top: 16px;
            right: 15px;
        }
    }
</style>

<div class="bp-toast-container" id="bpToastContainer">
    {% if messages %}
        {% for message in messages %}
            {% with toast_type=message.level_tag|default:"info" %}
                <div class="bp-toast bp-toast-{{ toast_type }}" role="alert" style="--bp-duration: 3000ms;">

                    <div class="bp-toast-icon">
                        {% if toast_type == "success" %}
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6Z"></path>
                            </svg>
                        {% elif toast_type == "error" or toast_type == "danger" %}
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 14h-2v-2h2v2Zm0-4h-2V6h2v6Z"></path>
                            </svg>
                        {% elif toast_type == "warning" %}
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z"></path>
                            </svg>
                        {% else %}
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M11 17h2v-6h-2v6Zm1-14a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-12h2V7h-2v2Z"></path>
                            </svg>
                        {% endif %}
                    </div>

                    <div class="bp-toast-content">
                        <div class="bp-toast-title">
                            {% if toast_type == "success" %}
                                Success
                            {% elif toast_type == "error" or toast_type == "danger" %}
                                Error
                            {% elif toast_type == "warning" %}
                                Warning
                            {% else %}
                                Info
                            {% endif %}
                        </div>

                        <div class="bp-toast-message">
                            {{ message }}
                        </div>
                    </div>

                    <button type="button" class="bp-toast-close" onclick="bpCloseToast(this)">
                        &times;
                    </button>

                    <div class="bp-toast-progress"></div>
                </div>
            {% endwith %}
        {% endfor %}
    {% endif %}
</div>

<script>
    (function () {
        function bpEscapeHtml(value) {
            return String(value)
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        function bpNormalizeType(type) {
            type = String(type || "info").toLowerCase();

            if (type === "danger") {
                return "error";
            }

            if (["success", "error", "warning", "info"].indexOf(type) === -1) {
                return "info";
            }

            return type;
        }

        function bpDefaultTitle(type) {
            const titles = {
                success: "Success",
                error: "Error",
                warning: "Warning",
                info: "Info"
            };

            return titles[type] || "Info";
        }

        function bpGetIcon(type) {
            if (type === "success") {
                return `
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6Z"></path>
                    </svg>
                `;
            }

            if (type === "error") {
                return `
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 14h-2v-2h2v2Zm0-4h-2V6h2v6Z"></path>
                    </svg>
                `;
            }

            if (type === "warning") {
                return `
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z"></path>
                    </svg>
                `;
            }

            return `
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M11 17h2v-6h-2v6Zm1-14a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-12h2V7h-2v2Z"></path>
                </svg>
            `;
        }

        function bpGetToastContainer() {
            let container = document.getElementById("bpToastContainer");

            if (!container) {
                container = document.createElement("div");
                container.className = "bp-toast-container";
                container.id = "bpToastContainer";
                document.body.appendChild(container);
            }

            return container;
        }

        function bpRemoveToast(toast) {
            if (!toast) {
                return;
            }

            toast.classList.add("bp-toast-hide");

            setTimeout(function () {
                toast.remove();
            }, 280);
        }

        window.bpCloseToast = function (button) {
            const toast = button.closest(".bp-toast");
            bpRemoveToast(toast);
        };

        function bpShowToast(type, message, options) {
            type = bpNormalizeType(type);
            options = options || {};

            const title = options.title || bpDefaultTitle(type);
            const duration = Number(options.duration || 3000);
            const container = bpGetToastContainer();

            const toast = document.createElement("div");
            toast.className = "bp-toast bp-toast-" + type;
            toast.setAttribute("role", "alert");
            toast.style.setProperty("--bp-duration", duration + "ms");

            toast.innerHTML = `
                <div class="bp-toast-icon">
                    ${bpGetIcon(type)}
                </div>

                <div class="bp-toast-content">
                    <div class="bp-toast-title">${bpEscapeHtml(title)}</div>
                    <div class="bp-toast-message">${bpEscapeHtml(message)}</div>
                </div>

                <button type="button" class="bp-toast-close">
                    &times;
                </button>

                <div class="bp-toast-progress"></div>
            `;

            toast.querySelector(".bp-toast-close").addEventListener("click", function () {
                bpRemoveToast(toast);
            });

            container.appendChild(toast);

            if (duration > 0) {
                setTimeout(function () {
                    bpRemoveToast(toast);
                }, duration);
            }

            return toast;
        }

        window.toast = {
            show: bpShowToast,

            success: function (message, options) {
                return bpShowToast("success", message, options);
            },

            error: function (message, options) {
                return bpShowToast("error", message, options);
            },

            danger: function (message, options) {
                return bpShowToast("error", message, options);
            },

            warning: function (message, options) {
                return bpShowToast("warning", message, options);
            },

            info: function (message, options) {
                return bpShowToast("info", message, options);
            }
        };

        document.toast = window.toast;

        document.addEventListener("DOMContentLoaded", function () {
            const toasts = document.querySelectorAll(".bp-toast");

            toasts.forEach(function (toast) {
                setTimeout(function () {
                    bpRemoveToast(toast);
                }, 3000);
            });
        });
    })();
</script>