{% extends 'base.html' %}
{% block content %}
<!-- Header-->
<header class="bg-dark py-5">
    <div class="container px-4 px-lg-5 my-5">
        <div class="text-center text-white">
            <h1 class="display-4 fw-bolder">Bienvenido a Mi Biblioteca</h1>
            <p class="lead fw-normal text-white-50 mb-0">Explora, organiza y disfruta de tus libros favoritos en un solo lugar</p>
        </div>
    </div>
</header>
<!-- Section-->
<section class="py-2" id="Documentos">
    <div class="container px-4 px-lg-5 mt-2">
        <!-- Search Form -->
        <div class="mb-4">
            <form method="GET" action="{% url 'buscar_texto' %}" class="d-flex">
                <input type="text" name="termino" class="form-control me-2" placeholder="Buscar palabras o frases..." value="{{ request.GET.termino|default:'' }}">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search"></i> Buscar
                </button>
            </form>
        </div>
        <!-- Add Document Button -->
        <div class="mb-4">
            <a href="{% url 'subir_documento' %}" class="btn btn-success w-100">
                <i class="bi bi-plus-circle"></i> Agregar Libro / Documento
            </a>
        </div>
        <!-- Document List -->
        <div class="row gx-4 gx-lg-5 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
            {% for doc in documentos %}
            
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Image section -->
                    <div class="position-relative">
                        <!-- Product image-->
                        <img class="card-img-top" src="https://dummyimage.com/450x600/dee2e6/6c757d.jpg" alt="Portada del libro" />
                        <!-- Overlay with actions -->
                        <div class="position-absolute w-100 h-100 d-flex justify-content-center align-items-center" style="top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
                            <a href="documentos/editar/{{ doc.id }}" class="btn btn-primary btn-sm mx-1">
                                <i class="bi bi-pencil"></i> Editar
                            </a>
                            <a href="documentos/eliminar/{{ doc.id }}" class="btn btn-danger btn-sm mx-1">
                                <i class="bi bi-trash"></i> Borrar
                            </a>
                            <a href="{{ doc.archivo.url }}" class="btn btn-info btn-sm mx-1">
                                <i class="bi bi-eye"></i> Ver
                            </a>
                        </div>
                    </div>
                    <!-- Information section -->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Document title -->
                            <h4 class="fw-bolder">{{ doc.titulo }}</h4>
                            <!-- Document author -->
                            <h6 class=""><i> {{ doc.autor|default:"-" }} </i></h6>
                            <!-- Document genre -->
                            <p class="mb-2 text-muted">#{{ doc.genero|default:"-" }}</p>
                            <!-- Upload date -->
                            <small class="text-muted">{{ doc.fecha_subida|date:"d/m/Y H:i" }}</small>
                        </div>
                    </div>
                    
                </div>
            </div>
            {% empty %}
            <tr>
                <td colspan="5">No hay documentos subidos</td>
            </tr>

            
            {% endfor %}
            
        
            
        </div>
    </div>
</section>
{% endblock %}