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

{% block title %}{% if prueba %}Editar Test{% else %}Nuevo Test{% endif %} | 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">{% if prueba %}Editar Test{% else %}Nuevo Test{% endif %}</h1>
            <p class="text-white-50 mb-0">{% if prueba %}{{ prueba.nombre }}{% else %}Rellena los datos del nuevo test.{% endif %}</p>
        </div>
    </div>
</div>

<div class="row g-4" style="overflow-y: auto;">
    <div class="col-12 col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">

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

                    <div class="mb-3">
                        <label for="{{ form.nombre.id_for_label }}" class="form-label fw-semibold">Nombre del test</label>
                        <input type="text" name="nombre" id="{{ form.nombre.id_for_label }}"
                               class="form-control {% if form.nombre.errors %}is-invalid{% endif %}"
                               value="{{ form.nombre.value|default:'' }}" placeholder="Ej: Test de frenada">
                        {% for error in form.nombre.errors %}
                            <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.descripcion.id_for_label }}" class="form-label fw-semibold">Objetivo / Descripción</label>
                        <textarea name="descripcion" id="{{ form.descripcion.id_for_label }}" rows="3"
                                  class="form-control {% if form.descripcion.errors %}is-invalid{% endif %}">{{ form.descripcion.value|default:'' }}</textarea>
                        {% for error in form.descripcion.errors %}
                            <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label for="{{ form.fecha_inicio.id_for_label }}" class="form-label fw-semibold">Fecha de inicio</label>
                            {{ form.fecha_inicio }}
                            {% for error in form.fecha_inicio.errors %}
                                <div class="text-danger small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                        <div class="col-6">
                            <label for="{{ form.fecha_fin.id_for_label }}" class="form-label fw-semibold">Fecha de fin</label>
                            {{ form.fecha_fin }}
                            {% for error in form.fecha_fin.errors %}
                                <div class="text-danger small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label for="{{ form.categoria.id_for_label }}" class="form-label fw-semibold">Categoría</label>
                            <select name="categoria" id="{{ form.categoria.id_for_label }}" class="form-select">
                                {% for valor, etiqueta in form.fields.categoria.choices %}
                                    <option value="{{ valor }}" {% if form.categoria.value == valor %}selected{% endif %}>{{ etiqueta }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-6">
                            <label for="{{ form.temporada.id_for_label }}" class="form-label fw-semibold">Temporada</label>
                            <select name="temporada" id="{{ form.temporada.id_for_label }}"
                                    class="form-select {% if form.temporada.errors %}is-invalid{% endif %}">
                                {% for temporada in form.fields.temporada.queryset %}
                                    <option value="{{ temporada.pk }}" {% if form.temporada.value|stringformat:"s" == temporada.pk|stringformat:"s" %}selected{% endif %}>{{ temporada.nombre }}</option>
                                {% endfor %}
                            </select>
                            {% for error in form.temporada.errors %}
                                <div class="invalid-feedback">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="{{ form.resultados.id_for_label }}" class="form-label fw-semibold">Conclusiones y Resultados</label>
                        <textarea name="resultados" id="{{ form.resultados.id_for_label }}" rows="3"
                                  class="form-control {% if form.resultados.errors %}is-invalid{% endif %}">{{ form.resultados.value|default:'' }}</textarea>
                        {% for error in form.resultados.errors %}
                            <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary fw-bold px-4">Guardar</button>
                        <a href="{% if prueba %}{% url 'detalle_prueba' prueba.pk %}{% else %}{% url 'listado_pruebas' %}{% endif %}" class="btn btn-outline-secondary px-4">Cancelar</a>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
{% endblock content %}