{% if status == 'success' %}
<div class="alert alert-success" style="padding: 1rem; border-radius: 0.5rem; margin-top: 0.5rem;">
    <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 1.5rem;">✅</span>
        <div>
            <strong>{{ message }}</strong>
            {% if connection_details %}
            <div style="margin-top: 0.25rem; font-size: 0.9rem; font-family: monospace;">
                {{ connection_details }}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% elif status == 'error' %}
<div class="alert alert-error" style="padding: 1rem; border-radius: 0.5rem; margin-top: 0.5rem;">
    <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 1.5rem;">❌</span>
        <div>
            <strong>{{ message }}</strong>
            {% if connection_details %}
            <div style="margin-top: 0.25rem; font-size: 0.9rem; font-family: monospace;">
                {{ connection_details }}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% else %}
<div class="alert alert-info" style="padding: 1rem; border-radius: 0.5rem; margin-top: 0.5rem;">
    <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 1.5rem;">ℹ️</span>
        <strong>{{ message }}</strong>
    </div>
</div>
{% endif %}

{% if status == 'success' and reload_page %}
<script>
    setTimeout(() => {
        window.location.reload();
    }, 1500);
</script>
{% endif %}

<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-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}
</style>
