{% extends 'base.html' %}

{% block content %}
    <div class="form-container">
        <div class="glass-card" style="padding: 2.5rem;">
            <h1 style="margin-bottom: 2rem;">Editar Configuración del Sistema</h1>

            <form method="post">
                {% csrf_token %}
                
                <div class="form-group">
                    <label for="{{ form.global_budget.id_for_label }}">Presupuesto General Asignado ($)</label>
                    {{ form.global_budget }}
                    {% if form.global_budget.errors %}
                        <div style="color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.global_budget.errors }}</div>
                    {% endif %}
                </div>

                <div style="display: flex; gap: 1rem; margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">Guardar Configuración</button>
                    <a href="{% url 'gestion_panel' %}" class="btn btn-outline">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // Apply form-control class to all inputs
        document.querySelectorAll('input, select, textarea').forEach(el => {
            el.classList.add('form-control');
        });
    </script>
{% endblock %}