<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="/img/icone.png" type="image/x-icon" />
    <title>Document</title>
  </head>
  <body>
    <%- include('./partials/header.ejs') %>

    <main>
      <section id="cards">
        <h2 id="titulo">Lista de Pok√©mons</h2>
        <% pokedex.forEach((pokemon,id) => { %>
        <a href="/detalhes/<%= pokemon.id %>">
          <div class="card">
            <div id="topo">
              <p id="num"><%= pokemon.id %></p>
              <h3><%= pokemon.nome %></h3>
            </div>
            <img id="img" src="<%= pokemon.imagem %>" alt="" />
            <a id="apagar" href="/delete/<%= pokemon.id %>">Apagar</a>
          </div>
        </a>
        <% }) %>
      </section>
    </main>
    <%- include('./partials/footer.ejs') %>
    <script src="/public/script.js"></script>
  </body>
</html>
