<div class="alert {% if status == 'success' %}alert-success{% elif status == 'info' %}alert-info{% else %}alert-error{% endif %}"
     style="padding: 1rem; border-radius: 0.5rem; margin-top: 1rem;">
    <div style="display: flex; align-items: center; gap: 0.75rem;">
        {% if status == 'success' %}
        <span style="font-size: 1.5rem;">✅</span>
        {% elif status == 'info' %}
        <span style="font-size: 1.5rem;">ℹ️</span>
        {% else %}
        <span style="font-size: 1.5rem;">❌</span>
        {% endif %}
        <div>
            <strong>{{ message }}</strong>
            {% if item and status == 'success' %}
            <p style="margin: 0.5rem 0 0 0; font-size: 0.875rem; opacity: 0.8;">
                Size: {{ "%.1f"|format(item.size_mb) }} MB
                {% if item.dependencies %}
                • Dependencies: {{ item.dependencies|length }}
                {% endif %}
            </p>
            {% endif %}
        </div>
    </div>
</div>

<script>
    // Show toast and reload page after 1.5 seconds for state updates
    {% if status == 'success' %}
    setTimeout(() => {
        if (typeof Alpine !== 'undefined' && Alpine.store('app')) {
            Alpine.store('app').showToast('{{ message }}', 'success');
        }
    }, 100);
    setTimeout(() => {
        window.location.reload();
    }, 1500);
    {% endif %}
</script>

<style>
.alert {
    margin-bottom: 1rem;
}
.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}
.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}
.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
</style>
