{{ define "notifications" }}
{{ if .Notification }}
<div id="notification-container" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-gray-800 rounded-lg shadow-lg max-w-md w-full mx-4 {{ if eq .NotificationType "error" }}border-l-4 border-red-500{{ else if eq .NotificationType "success" }}border-l-4 border-green-500{{ else }}border-l-4 border-blue-500{{ end }}">
        <div class="p-6">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    {{ if eq .NotificationType "error" }}
                    <svg class="h-6 w-6 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4v2m0 0a9 9 0 11-18 0 9 9 0 0118 0zm0-14a9 9 0 00-9 9m0 0a9 9 0 1018 0 9 9 0 00-18 0z" />
                    </svg>
                    {{ else if eq .NotificationType "success" }}
                    <svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {{ else }}
                    <svg class="h-6 w-6 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {{ end }}
                </div>
                <div class="ml-3 flex-1">
                    <h3 class="text-lg font-medium {{ if eq .NotificationType "error" }}text-red-400{{ else if eq .NotificationType "success" }}text-green-400{{ else }}text-blue-400{{ end }}">
                        {{ if eq .NotificationType "error" }}Error{{ else if eq .NotificationType "success" }}Success{{ else }}Information{{ end }}
                    </h3>
                    <div class="mt-2 text-sm text-gray-300">
                        {{ .Notification }}
                    </div>
                </div>
                <button onclick="closeNotification()" class="ml-3 text-gray-400 hover:text-gray-200">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
        </div>
        <div class="bg-gray-700 px-6 py-4 flex justify-end gap-3">
            {{ if eq .NotificationType "error" }}
            <button onclick="closeNotification()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded font-medium transition">
                Dismiss
            </button>
            {{ else if eq .NotificationType "success" }}
            <button onclick="closeNotification()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded font-medium transition">
                OK
            </button>
            {{ else }}
            <button onclick="closeNotification()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium transition">
                OK
            </button>
            {{ end }}
        </div>
    </div>
</div>

<script>
function closeNotification() {
    var container = document.getElementById('notification-container');
    if (container) {
        container.remove();
    }
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        var type = '{{ .NotificationType }}';
        if (type === 'success') {
            setTimeout(closeNotification, 5000);
        }
    });
} else {
    var type = '{{ .NotificationType }}';
    if (type === 'success') {
        setTimeout(closeNotification, 5000);
    }
}
</script>
{{ end }}
{{ end }}