<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <%- include('./components/head') %>
</head>

<body>
    <%- include('./components/nav') %>
        <main>
            <section id="cards">

                <h2>Lista de Pokemons</h2>

                <% pokedex.map((pokemon)=> { %>

                    <div class="card">
                        <abbr title="Click para atualizar"><a href="/infP/<%= pokemon.id %>"><img
                                    src="<%= pokemon.imagem %>" alt=""></a></abbr>
                        <h3>
                            <%= pokemon.nome %>
                        </h3>
                        <p>NÂº: <%= pokemon.id %>
                        </p>
                        <p class="descricao">
                            <%= pokemon.descricao%>
                        </p>
                        <p>Tipo: <%= pokemon.tipo %>
                        </p>
                        <a id="editar" href="/getById/<%= pokemon.id %>/put">Editar</a>
                        <a id="apagar" href="/getById/<%= pokemon.id %>/delete">Apagar</a>
                    </div>
                    <% }) %>
            </section>

        </main>
        <% if (pokemonPut != null) {%>
            <%- include('./components/modalPut') %>
                <% } %>

        <% if (pokemonDel != null) {%>
            <%- include('./components/modalDel') %>
            <% } %>

        <%- include('./components/footer') %>
               
</body>

</html>