<!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>Projeto 02</title>
  </head>

  <body>

    <header>

    <h1>Pokedex</h1>

    </header>

    <main>


      <section id="cadastro">

        <img src="/media/01.png" alt="Pokedex">

        <div> 
          
          <% if(pokemon == undefined) { %>

          <h2>
            Cadastre um pokemon!
          </h2>
  
          <form action="/add" method="POST">
  
            <label for="nome">Nome:</label>
            <input type="text" id="nome" name="nome">
  
            <label for="descricao">Descrição:</label>
            <input type="text" id="descricao" name="descricao">
  
            <label for="tipo">Tipo:</label>
            <input type="text" id="tipo" name="tipo">
  
            <label for="imagem">Link da imagem:</label>
            <input type="text" id="imagem" name="imagem">
  
            <button id="btnCadastro" type="submit">Cadastrar</button>
  
          </form>
  
          <% } else { %>
          
            <h2>
              Atualização do pokemon!
            </h2>
  
          <form action="/update/<%= pokemon.id %>" method="POST">
  
            <label for="nome">Nome:</label>
            <input type="text" id="nome" name="nome" value="<%= pokemon.nome %>">
  
            <label for="descricao">Descrição:</label>
            <input type="text" id="descricao" name="descricao" value="<%= pokemon.descricao %>">
  
            <label for="tipo"> Tipo: </label>
            <input type="text" id="tipo" name="tipo" value="<%= pokemon.tipo %>">
  
            <label for="imagem"> Link da imagem: </label>
            <input type="text" id="imagem" name="imagem" value="<%= pokemon.imagem %>">
  
            <button id="btnAtt" type="submit">Atualizar</button>
  
          </form>
  
          <% } %>
        
        </div>

      </section>

      <section id="cards">

        <h2>Lista dos Pokemons</h2>
      
          <% pokedex.forEach((pokemon) =>{ %>
  
              <div class="card">
  
              <img src="<%= pokemon.imagem %>" alt="" />
  
              <h3><%= pokemon.nome %></h3>
  
              <p class="descricao"><%= pokemon.descricao %></p>
  
              <p class="tipo"> <%= pokemon.tipo %></p>
              
              <a href="/detalhes/<%= pokemon.id %>">Editar</a>
  
              </div>
  
          <% }) %>
  
      </section>

    </main>

  </body>

</html>
