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

{% block title %}{{ titulo_pagina }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow-sm">
                <div class="card-header bg-light py-3">
                    <h4 class="mb-0">{{ titulo_pagina }}</h4>
                </div>
                <div class="card-body">
                    <p class="card-text text-muted">Completa el siguiente formulario con los detalles del equipo.</p>
                    <hr>

                    {# --- CAMBIO IMPORTANTE: Se añade enctype para la subida de archivos --- #}
                    <form method="post" enctype="multipart/form-data" novalidate>
                        {% csrf_token %}

                        {# Muestra errores generales del formulario #}
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger" role="alert">
                                {{ form.non_field_errors|striptags }}
                            </div>
                        {% endif %}

                        {# --- SECCIÓN: DATOS GENERALES Y DE GESTIÓN --- #}
                        <h5 class="mb-3">Información General</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.nombre.label }}</label>
                                {{ form.nombre }}
                                {% if form.nombre.errors %}<div class="invalid-feedback d-block">{{ form.nombre.errors|striptags }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.numero_serie.label }}</label>
                                {{ form.numero_serie }}
                                {% if form.numero_serie.errors %}<div class="invalid-feedback d-block">{{ form.numero_serie.errors|striptags }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.estado.label }}</label>
                                {{ form.estado }}
                                {% if form.estado.errors %}<div class="invalid-feedback d-block">{{ form.estado.errors|striptags }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.fecha_adquisicion.label }}</label>
                                {{ form.fecha_adquisicion }}
                                {% if form.fecha_adquisicion.errors %}<div class="invalid-feedback d-block">{{ form.fecha_adquisicion.errors|striptags }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.categoria.label }}</label>
                                {{ form.categoria }}
                                {% if form.categoria.errors %}<div class="invalid-feedback d-block">{{ form.categoria.errors|striptags }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.Ubicacion.label }}</label>
                                {{ form.Ubicacion }}
                                {% if form.Ubicacion.errors %}<div class="invalid-feedback d-block">{{ form.Ubicacion.errors|striptags }}</div>{% endif %}
                            </div>
                        </div>

                        <hr class="my-4">

                        {# --- SECCIÓN: ESPECIFICACIONES DE HARDWARE --- #}
                        <h5 class="mb-3">Especificaciones de Hardware</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.marca.label }}</label>
                                {{ form.marca }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.modelo.label }}</label>
                                {{ form.modelo }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.procesador_marca.label }}</label>
                                {{ form.procesador_marca }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.procesador_tipo.label }}</label>
                                {{ form.procesador_tipo }}
                            </div>
                             <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.disco_duro_tipo.label }}</label>
                                {{ form.disco_duro_tipo }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.disco_duro_capacidad_gb.label }}</label>
                                {{ form.disco_duro_capacidad_gb }}
                            </div>
                        </div>

                        <hr class="my-4">

                        {# --- SECCIÓN: PERIFÉRICOS ASOCIADOS --- #}
                        <h5 class="mb-3">Periféricos Asociados</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.teclado_marca.label }}</label>
                                {{ form.teclado_marca }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.teclado_serial.label }}</label>
                                {{ form.teclado_serial }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.mouse_marca.label }}</label>
                                {{ form.mouse_marca }}
                            </div>
                             <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.mouse_serial.label }}</label>
                                {{ form.mouse_serial }}
                            </div>
                             <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.monitor_marca.label }}</label>
                                {{ form.monitor_marca }}
                            </div>
                             <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.monitor_modelo.label }}</label>
                                {{ form.monitor_modelo }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.monitor_serial.label }}</label>
                                {{ form.monitor_serial }}
                            </div>
                        </div>

                        <hr class="my-4">
                        
                        {# --- SECCIÓN AÑADIDA: DOCUMENTACIÓN Y GARANTÍA --- #}
                        <h5 class="mb-3">Documentación y Garantía</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.factura.label }}</label>
                                {{ form.factura }}
                                {% if form.factura.errors %}<div class="invalid-feedback d-block">{{ form.factura.errors|striptags }}</div>{% endif %}
                                {% if form.instance.factura %}
                                    <small class="form-text text-muted">Archivo actual: <a href="{{ form.instance.factura.url }}" target="_blank">{{ form.instance.factura.name }}</a></small>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ form.garantia_fin.label }}</label>
                                {{ form.garantia_fin }}
                                {% if form.garantia_fin.errors %}<div class="invalid-feedback d-block">{{ form.garantia_fin.errors|striptags }}</div>{% endif %}
                            </div>
                        </div>

                        <hr class="my-4">

                        {# --- Campo de Notas (ancho completo) --- #}
                        <div class="mb-3">
                            <label class="form-label">{{ form.notas.label }}</label>
                            {{ form.notas }}
                            {% if form.notas.errors %}<div class="invalid-feedback d-block">{{ form.notas.errors|striptags }}</div>{% endif %}
                        </div>

                        {# --- Botones de Acción --- #}
                        <div class="mt-4 d-flex justify-content-end">
                            <a href="{% url 'gestion_equipos:lista_equipos' %}" class="btn btn-secondary me-2">Cancelar</a>
                            <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
