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

  <body>

      <nav>
          <ul>
              <li><a href="#cadastro">Cadastro</a></li>
              <li><a href="#cards">Pokemons</a></li>
          </ul>
      </nav>

    <header>
      <h1>Pokedex</h1>
    </header>

    <main>

      <section id="cadastro">

        <% if (pokemon == undefined)  { %>
        <h2>Cadastre um novo Pokemon!</h2>
        
        <form action="/create" 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="altura">Altura:</label>
          <input type="text" id="altura" name="altura" />

          <label for="peso">Peso:</label>
          <input type="text" id="peso" name="peso" />

          <label for="categoria">Categoria:</label>
          <input type="text" id="categoria" name="categoria" />

          <label for="habilidade">Habilidade:</label>
          <input type="text" id="habilidade" name="habilidade" />

          <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="btnCadastrar" 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="altura">Altura:</label>
          <input type="text" id="altura" name="altura" value="<%= pokemon.altura %>" />

          <label for="peso">Peso:</label>
          <input type="text" id="peso" name="peso" value="<%= pokemon.peso %>" />

          <label for="categoria">Categoria:</label>
          <input type="text" id="categoria" name="categoria" value="<%= pokemon.categoria %>" />

          <label for="habilidade">Habilidade:</label>
          <input type="text" id="habilidade" name="habilidade" value="<%= pokemon.habilidade %>" />

          <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="btnAtualizar" type="submit">Atualizar</button>
        
        </form>
       <% } %> 
      </section>

      <section id="cards">

        <h2>Lista de Pokemons</h2>

        <% pokedex.forEach((pokemon) => { %>

          <div class="card">
          <img src="<%=  pokemon.imagem %>" alt="" />

          <h2><%= pokemon.nome %></h2>

          <p class="altura"><%= pokemon.altura %></p></br>

          <p class="peso"><%= pokemon.peso %></p></br>

          <p class="categoria"><%= pokemon.categoria %></p></br>

          <p class="habilidade"><%= pokemon.habilidade %></p></br>

          <p class="descricao"><%= pokemon.descricao %></p>

          <p><%= pokemon.tipo %></p></br>

          <a href="/detalhes/<%= pokemon.id %>">Editar</a>
          <a href="/delete/<%= pokemon.id %>">Apagar</a>

        </div>
        <% }) %>

      </section>

    </main>

    <footer>
      <p>Todos os direitos reservados para SandroXC &copy;</p>
    </footer>

  </body>

  </html>
