{{define "partials/flash.html"}}
{{if .FlashMessage}}
<div id="flash-message" class="flash flash-{{.FlashType}}" role="alert">
    {{.FlashMessage}}
</div>
<style>
    .flash {
        position: fixed;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        padding: 1rem 2rem;
        border-radius: 4px;
        font-weight: 500;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        animation: fadeIn 0.3s ease-out;
    }
    .flash.fade-out {
        animation: fadeOut 0.5s ease-out forwards;
    }
    .flash-success {
        background: #d1fae5;
        color: #065f46;
        border: 1px solid #6ee7b7;
    }
    .flash-info {
        background: #dbeafe;
        color: #1e40af;
        border: 1px solid #93c5fd;
    }
    .flash-warning {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #fcd34d;
    }
    .flash-error {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fca5a5;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
        to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }
</style>
<script>
    setTimeout(function() {
        var flash = document.getElementById('flash-message');
        if (flash) {
            flash.classList.add('fade-out');
            setTimeout(function() { flash.remove(); }, 500);
        }
    }, 4000);
</script>
{{end}}
{{end}}
