<!DOCTYPE html>
<html lang="en">

  <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>Pokémon</title>
  </head>

  <body>

    <nav>
      <ul>
        <li><img src="/img/pokebola.png" alt="Pokebola"></li>
        <div id="conteiner">
          <li><a href="/"><h1>Pokédex</h1></a></li>
          <li><a href="/cadastro"> Cadastro </a></li>
          <li><a href="/#cards"> Pokemons </a></li>
        </div>
      </ul>

    </nav>

    <header>
      <img src="/img/banner.jpg" alt="banner">
    </header>

    <main>

      <section id="cards">

        <h2>Lista de Pokemons</h2>

        <% pokedex.forEach((pokemon)=> { %>
        <div class="card">
          <a class="redirect" href="detalhes/<%= pokemon.id %>"><img src="<%= pokemon.imagem %>" alt="" />
          <h3><%= pokemon.nome %></h3></a>
          <p class="descricao"><%= pokemon.descricao %></p>
          <p class="tipo">Tipo: <%= pokemon.tipo %></p>
          <a id="editar" href="/atualizar/<%= pokemon.id %>">Editar</a>
          
        </div>
        <% }) %>

      </section>

    </main>

    <footer>
      <p>Criado por Victor Rodrigues para fins educativos &copy;</p>
      <p>Dados exportados de <a href="https://www.pokemon.com/br/pokedex/">Pokédex</a></p>
    </footer>

    
  </body>
</html>
