{# templates/superadmin_v2/layout/sa_alert.html.twig #}
{#{% if alert is defined and alert is not empty %}{{ alert|raw }}{% endif %}#}
<div id="alertContainer"></div>

<style>
    .alert {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .success {
        background-color: #d4edda;
        color: #155724;
        border-color: #c3e6cb;
    }

    .error {
        background-color: #f8d7da;
        color: #721c24;
        border-color: #f5c6cb;
    }
</style>

<script type="text/javascript">
    function showAlert(message, type = 'success', timeSecond = 3) {
        let alertDiv = $('<div>').addClass('alert').addClass(type).text(message);
        $('#alertContainer').append(alertDiv);
        setTimeout(function () {
            alertDiv.remove();
        }, timeSecond * 1000);
    }

    function showCustomAlert(html, timeSecond = 10) {
        let alertDiv = $('<div>').html(html);
        $('#alertContainer').append(alertDiv);
        setTimeout(function () {
            $(alertDiv).remove();
        }, timeSecond * 1000);
    }
</script>