<!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="css/style.css" />
    <title>Pokedéx</title>
  </head>
  <body id="body">

      <nav>
          <ul>
            <li><h1>Pokedéx</h1></li>
            <li><img src="/img/adesivo-Pokedex-Air-Force-1-danilo-the-hype-nerd-stickers.webp" alt="Pokebola"></li>
            <li><a id="btnCadastrar" href="/cadastro">Cadastrar</a></li>
            <li><a id="btnMeusPokemos"href="/#cards">Meus Pokemons</a></li>
              
          </ul>
      </nav>
      
    <% if (mensagem != "") { %>
        <section id="Mensagem">
            <p><%= mensagem %></p> <span id="close">&times;</span>
        </section>
    <% } %>

    <main>
        <section id="cards">
  
          <% pokedex.forEach((pokemon) => { %>
          <div class="card">
            <h3><%= pokemon.nome%></h3>
            <img src="<%= pokemon.imagem %>" alt="imagem do pokemon" />
            <p class="tipo">Tipo: <span id="tipo"><%= pokemon.tipo%></span></p>
            <a id="detalhes" href="/detalhes/<%= pokemon.id %>">Detalhes</a>
            <a id="editar" href="/atualizar/:id<%= pokemon.id %>">Editar</a>
            <a id="apagar" href="/delete/<%= pokemon.id %>">Apagar</a>
          </div>
          <% }) %>
        </section>
  
      </main>
      <footer id="footer">Criado por MicaDev - Direitos reservados (2020).</footer>
      <script src="/js/script_mensagem.js"></script>
  </body>
  
</html>
