{% 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" style="margin-bottom:1.5rem;">
                    <label for="{{ form.iva_rate.id_for_label }}">Tasa de IVA (% Dinámico Configurable)</label>
                    {{ form.iva_rate }}
                    {% if form.iva_rate.errors %}
                        <div style="color: var(--efintel-danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.iva_rate.errors }}</div>
                    {% endif %}
                    <small style="color:var(--efintel-gray);">Porcentaje oficial para cálculo de impuesto IVA en facturas y órdenes de compra (Ej: 19.00).</small>
                </div>

                <div class="form-group" style="margin-bottom:1.5rem;">
                    <label for="{{ form.usd_exchange_rate.id_for_label }}">Tasa de Cambio USD / CLP por Defecto</label>
                    {{ form.usd_exchange_rate }}
                    {% if form.usd_exchange_rate.errors %}
                        <div style="color: var(--efintel-danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.usd_exchange_rate.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 %}