{% extends 'base.html' %}

{% block content %}
    <div class="form-container">
        <div class="glass-card" style="padding: 2.5rem;">
            <h1 style="margin-bottom: 2rem;">
                {% if edit_mode %}Editar Colaborador (Responsable): {{ target_user.username }}{% else %}Nuevo Colaborador (Responsable){% endif %}
            </h1>

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

                <div class="form-group">
                    <label for="{{ form.email.id_for_label }}">Correo Electrónico</label>
                    {{ form.email }}
                    {% if form.email.errors %}
                        <div style="color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.email.errors }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.password.id_for_label }}">
                        Contraseña 
                        {% if edit_mode %}
                            <span style="font-size: 0.8rem; color: var(--text-secondary);">(Opcional: Dejar en blanco para no cambiarla)</span>
                        {% endif %}
                    </label>
                    {{ form.password }}
                    {% if form.password.errors %}
                        <div style="color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.password.errors }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.role.id_for_label }}">Rol / Grupo del Sistema</label>
                    {{ form.role }}
                    {% if form.role.errors %}
                        <div style="color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.role.errors }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.description.id_for_label }}">Descripción / Bio del Responsable</label>
                    {{ form.description }}
                    {% if form.description.errors %}
                        <div style="color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.description.errors }}</div>
                    {% endif %}
                </div>

                <div style="display: flex; gap: 1rem; margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">Guardar</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 %}