<%- include("template/cabecera.ejs", {tituloWeb: "Lista de autores" })%>

    <div class="container">
        <!-- Será el listado de pokemon -->
        <div class="container">
            <h1 class="p-5 text-center">Todos los autores</h1>
            <h5 class="pb-5 text-center">Si estás buscando libros por autor, estás en el lugar correcto.</h5>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                <% if (arrayAutor.length> 0) { %>
                    <!--Haremos el foreach para recorrer el array-->
                    <% arrayAutor.forEach(autor=> { %>
                        <div class="col-4 p-3">
                            <div class="card shadow-sm">
                                <img src="../images/autor-ejemplo.jpg" alt="pokeball">
                                <div class="card-body">
                                    <a href="autores/<%= autor.id %>"><img id="img-editar"
                                        src="../images/editar.png" alt="editar"></a>
                                    <h2>
                                        <%= autor.nombre %>
                                    </h2>
                                    <p class="card-text">
                                        <%= autor.descripcion %>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <% }) %>
                            <% } %>
            </div>
            <a class="btn btn-success my-4" href="/autores/crear-autor">Crear nuevo autor</a>
        </div>
    </div>

    <%- include("template/footer.ejs")%>