{% extends 'base.html' %}
{% load static %}

{% block title %}Editar Usuario | Gades Manager{% endblock title %}

{% block content %}
<div class="row mb-3 flex-shrink-0">
    <div class="col-12">
        <div class="bg-dark text-white p-3 rounded-3 shadow-sm" style="border-left: 5px solid #0d6efd;">
            <h1 class="display-6 fw-bold mb-1">Editar Usuario</h1>
            <p class="text-white-50 mb-0">{{ usuario.username }}</p>
        </div>
    </div>
</div>

<div class="row g-4" style="overflow-y: auto;">
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4">
                <h5 class="card-title fw-bold mb-3">Datos del Usuario</h5>

                <form method="post">
                    {% csrf_token %}

                    <div class="mb-3">
                        <label for="{{ form.username.id_for_label }}" class="form-label fw-semibold">{{ form.username.label }}</label>
                        {{ form.username }}
                        {% for error in form.username.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="row g-2">
                        <div class="col-6 mb-3">
                            <label for="{{ form.first_name.id_for_label }}" class="form-label fw-semibold">{{ form.first_name.label }}</label>
                            {{ form.first_name }}
                        </div>
                        <div class="col-6 mb-3">
                            <label for="{{ form.last_name.id_for_label }}" class="form-label fw-semibold">{{ form.last_name.label }}</label>
                            {{ form.last_name }}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.email.id_for_label }}" class="form-label fw-semibold">{{ form.email.label }}</label>
                        {{ form.email }}
                        {% for error in form.email.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="row g-2">
                        <div class="col-6 mb-3">
                            <label for="{{ form.rol.id_for_label }}" class="form-label fw-semibold">{{ form.rol.label }}</label>
                            {{ form.rol }}
                        </div>
                        <div class="col-6 mb-3">
                            <label for="{{ form.especialidad.id_for_label }}" class="form-label fw-semibold">{{ form.especialidad.label }}</label>
                            {{ form.especialidad }}
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary fw-bold px-4">Guardar Cambios</button>
                    <a href="{% url 'gestion_usuarios' %}" class="btn btn-outline-secondary px-4">Cancelar</a>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock content %}