{% extends 'base.html' %}

{% block content %}
<style>
    .bg-custom-lightblue {
        background-color: #5bc0de; /* Color azul claro personalizado */
    }
</style>
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow-lg rounded-4">
                <div class="card-header bg-custom-lightblue text-white text-center">
                     <h3 class="mb-0">Registrar Nueva Cuenta</h3>
                </div>
                <div class="card-body p-4">
                    <form method="POST" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        <!-- Estilización de los campos -->
                        {% for field in form %}
                        <div class="mb-3">
                            <label for="{{ field.id_for_label }}" class="form-label fw-semibold">
                                {{ field.label }}
                            </label>
                            {{ field }}
                            {% if field.help_text %}
                                <small class="text-muted">{{ field.help_text }}</small>
                            {% endif %}
                            {% for error in field.errors %}
                                <div class="text-danger">{{ error }}</div>
                            {% endfor %}
                        </div>
                        {% endfor %}
                        
                        <!-- Botones -->
                        <div class="d-flex justify-content-end mt-4 gap-2">
                            <a href="{% url 'lista_cuentas' %}" class="btn btn-secondary">Cancelar</a>
                            <button type="submit" class="btn btn-success">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}