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

<body>

  <header>
    <h1> <a href="/">Pokédex</a></h1>
  </header>
  
    <main>

      <p id ='faixa'>.</p>
      <h2 id='subtitulo'>Cadastre o seu pokémon, para mais informações, <a href='https://www.pokemon.com/br/pokedex/' target ='_blank'>clique aqui</a></h2>
      
        <section id ='cadastro'>

           
          <form action="/add" method='POST'>
                              
              <label for='nome'> Nome: </label>
              <input type='text' id='nome' name='nome'>
              <label for='imagem'> link da imagem: </label>
              <input type='text' id='imagem' name='imagem'>
            
              
              <label class='subLabel'  for='tipo'> Tipo: </label>
              <input type='tipo' id='classificaçao' class= 'sub' name='tipo'>
              <label class='subLabel'  for='altura'> Altura: </label>
              <input type='text' id='altura' class= 'sub' name='altura'>
              <label class='subLabel'  for='peso'> Peso: </label>
              <input type='text' id='peso' class= 'sub' name='peso'>
              <label class='subLabel' for='categoria'> Categoria: </label>
              <input type='text' id='categoria' class= 'sub' name='categoria'>
                
            
              <label for='habilidade'> Habilidade: </label>
              <input type='text' id='habilidade' name='habilidade'>        
              <label for='descriçao'> Descrição: </label>
              <input type='text' id='descriçao' name='descriçao'>

              <button id='cadastrar' type='submit'></button>
              <label id="btnLabel">Cadastrar</label>

          </form>

        </section>

        <section id='cards'>


          <% pokedex.forEach((pokemon) => { %>
            <a href="/detalhes/ <%= pokemon.id %>">
          <div class='card'>
            <h1 class = 'id '>.<%=pokemon.id%></h1>

            <img class='imagem' src="<%=pokemon.imagem%>" alt="<%=pokemon.nome%>">
            <h2 id="nome"><%=pokemon.nome%></h2>
            
          </div>
                    
          <%})%>
 
        </section>

    </main> 

    <footer>
      <p>Este é um projeto de Guilherme Macedo</p>
    </footer>
    
</body>
</html>