<!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="style.css" />
    <title>Document</title>
  </head>
  <body>

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

    <header>
      <img src="/img/banner.png" alt="banner">
    </header>
    <main>
      <section id="cadastro">

        <img src="/img/pokedex.png" alt="Pokedex">

        <div>
          <% 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" required />
    
              <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" />
    
              <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" />
    
              <button id="btnAtualizar" type="submit">Cadastrar</button>
            </form>
            <% } else { %>
    
            <h2>Atualização de 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="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 %>"
              />
    
              <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 %>"
              />
    
              <button id="btnAtualizar" type="submit">Atualizar</button>
            </form>
            <% } %>
        </div>

        
      </section>

      <section id="cards">

        <h2>Lista de Pokemons</h2>

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

        <% }) %>
      </section>
    
    </main>

    <footer>
      <p>Todos os direitos reservados para Gabrielgdl &copy;</p>
      <p>Dados utilizados de <a target="_blank" href= "https://www.pokemon.com/br/pokedex/">Pokédex</a> </p>
    </footer>


  </body>
</html>
