@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
            stroke-linecap="round" stroke-linejoin="round" class="me-2">
            <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
            <line x1="15" y1="9" x2="9" y2="15"></line>
            <line x1="9" y1="9" x2="15" y2="15"></line>
        </svg>
        <strong>{{ __('labels.alert_messages.error') }}</strong> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                    class="fas fa-solid fa-xmark"></i></span>
        </button>
    </div>
@endif

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
            stroke-linecap="round" stroke-linejoin="round" class="me-2">
            <polyline points="9 11 12 14 22 4"></polyline>
            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
        </svg>
        <strong>{{ __('labels.alert_messages.success') }}</strong> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                    class="fas fa-solid fa-xmark"></i></span>
        </button>
    </div>
@endif

@if(session('info'))
    <div class="alert alert-info alert-dismissible fade show">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
            stroke-linecap="round" stroke-linejoin="round" class="me-2">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="16" x2="12" y2="12"></line>
            <line x1="12" y1="8" x2="12.01" y2="8"></line>
        </svg>
        <strong>{{ __('labels.alert_messages.info') }}</strong> {{ session('info') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                    class="fas fa-solid fa-xmark"></i></span>
        </button>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('warning'))
    <div class="alert alert-warning alert-dismissible fade show">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
            stroke-linecap="round" stroke-linejoin="round" class="me-2">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
            <line x1="12" y1="9" x2="12" y2="13"></line>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
        <strong>{{ __('labels.alert_messages.warning') }}</strong> {{ session('warning') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                    class="fas fa-solid fa-xmark"></i></span>
        </button>
    </div>
@endif

@if(session('primary'))
    <div class="alert alert-primary alert-dismissible fade show">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
            stroke-linecap="round" stroke-linejoin="round" class="me-2">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M12 16v-4"></path>
            <path d="M12 8h.01"></path>
        </svg>
        <strong>{{ __('labels.alert_messages.primary') }}</strong> {{ session('primary') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                    class="fas fa-solid fa-xmark"></i></span>
        </button>
    </div>
@endif

@if(session('secondary'))
    <div class="alert alert-secondary alert-dismissible fade show">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
            stroke-linecap="round" stroke-linejoin="round" class="me-2">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M12 8v8"></path>
            <path d="M8 12h8"></path>
        </svg>
        <strong>{{ __('labels.alert_messages.secondary') }}</strong> {{ session('secondary') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                    class="fas fa-solid fa-xmark"></i></span>
        </button>
    </div>
@endif

@if(session('dark'))
    <div class="alert alert-dark alert-dismissible fade show">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
            stroke-linecap="round" stroke-linejoin="round" class="me-2">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
        </svg>
        <strong>{{ __('labels.alert_messages.dark') }}</strong> {{ session('dark') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                    class="fas fa-solid fa-xmark"></i></span>
        </button>
    </div>
@endif

@if(session('light'))
    <div class="alert alert-light alert-dismissible fade show">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
            stroke-linecap="round" stroke-linejoin="round" class="me-2">
            <circle cx="12" cy="12" r="5"></circle>
            <line x1="12" y1="1" x2="12" y2="3"></line>
            <line x1="12" y1="21" x2="12" y2="23"></line>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
            <line x1="1" y1="12" x2="3" y2="12"></line>
            <line x1="21" y1="12" x2="23" y2="12"></line>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
        </svg>
        <strong>{{ __('labels.alert_messages.light') }}</strong> {{ session('light') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                    class="fas fa-solid fa-xmark"></i></span>
        </button>
    </div>
@endif

@push('js')
    <script>
        // document.addEventListener('DOMContentLoaded', function () {
        //     // Initialize Bootstrap alerts
        //     var alertList = document.querySelectorAll('.alert');
        //     alertList.forEach(function (alert) {
        //         new bootstrap.Alert(alert);
        //     });
        // });
    </script>
@endpush