<%- include("template/cabecera.ejs", {tituloWeb:'Lista Pokemon'}) %>
<div class="imagen">
        
    <img src="/img/img.png" alt="Imagen 1" class="img">
</div>
<div class="imagen2">
        
    <img src="/img/img2.png" alt="Imagen 1" class="img2">
</div>

<br>
<div class="container">
    <h1 class="titulo">Lista de Pokemon</h1>
    <br>


    
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Nombre</th>
                <th scope="col">Tipo</th>
                <th scope="col">Descripción</th>
                <th scope="col">Acción</th>
            </tr>
        </thead>
        <tbody>
            <% if (arrayPokemon.length> 0) { %>
                <!--Haremos el foreach para recorrer el array-->
                <% arrayPokemon.forEach(pokemon => { %>
                    <tr>
                        <th scope="row"><%= pokemon.id %></th>
                        <td><%= pokemon.nombre %></td>
                        <td><%= pokemon.tipo %></td>
                        <td><%= pokemon.descripcion %></td>
                        <td>
                            <a class="btn btn-warning btn-sm" href="pokemon/<%= pokemon.id %>">Editar/Eliminar</a>
                        </td>
                    </tr>
                <% }) %>
            <% } %>
      </tbody>
    </table>
    <a class="btn btn-success btn-block my-4" href="/pokemon/crear">Crear un nuevo pokemon</a>
</div>
<%- include("template/footer.ejs") %>