<!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" />
    <link rel="shortcut icon" href="/img/bola.ico" />
    <title>Pokédex</title>
  </head>
  <body>
    <header>
      <nav>
        <img src="/img/logo.png" alt="" />
        <ul>
          <a href="/"><li>Pokédex</li></a>
          <a href="/cadastro"><li>Cadastro</li></a>
        </ul>
      </nav>
      <% if(alerta != "") {  %>
        <section id="alerta">
            <p><%= alerta %></p> <span id="fechar">&times;</span>
        </section>
    <% }  %>
    </header>
    <main>
      <section id="cards">
        <% pokedex.forEach((pokemon)=> { %>
        <a href="/detalhes/<%= pokemon.id %>">
          <div class="card">
            <img src="<%= pokemon.imagem %>" alt="" />
            <p id="num">Nº <%= pokemon.numero %></p>
            <h2><%= pokemon.nome %></h2>
            <% pokemon.tipo.forEach((tipo) => { %>
            <p id="tipo"><%=tipo%></p>
            <% })%>
          </div>
        </a>
        <% }) %>
      </section>
    </main>
    <footer>
      <p>&copy; Pokémon - Todos os direitos reservados - 2022</p>
    </footer>
    <script src="./js/script.js"></script>
  </body>
</html>
