<!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" />
    <title>Document</title>
  </head>
  <body>
    <% if(message != "") { %>
    <section class="mensagem">
      <p><%= message %></p>
      <span class="close">&times;</span>
    </section>
    <% } %>

    <header>
      <h1>
        <div class="barra">
          <% menu.forEach ( (item) => { %>
          <a href="<%= item.link %>"> <%= item.title%></a>

          <%} )%>
        </div>
      </h1>
    </header>

    <main>
      <section id="cards">
        <h2>Lista de Pokemons</h2>
        <% pokedex.forEach((pokemon) => {%>
        <div class="card">
          <img src="<%= pokemon.imagem %>" alt="" />
          <h3><%= pokemon.nome %></h3>

          <p>Tipo: <%= pokemon.tipo %></p>

          <a href="/detalhes/<%= pokemon.id %>">Detalhes </a>
        </div>
        <% }) %>
      </section>
    </main>
    <script src="script.js"></script>

    <footer>
      <p>Todos os direitos reservados para Astolfo &copy;</p>
      <p>
        Dados retirados de
        <a href="https://www.pokemon.com/br/pokedex/">Pokedex </a>
      </p>
    </footer>
  </body>
</html>
