<!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>
      <img src="/img/logo-pokemon.png" alt="Pokemon logo" id="headerimg">
      <h1 id="title">Pokedéx</h1>
      <h2>Pokemon list</h2>

      <div >
        <a  href="#register">Register</a>     
       </div>
    </header>

    <main>
      <section id="body">
     
        <% pokedex.forEach((pokemon) =>{ %>     
        <div class="card">
          <img src="<%= pokemon.image %>" alt="Pokemon">
          <h2><%= pokemon.name %></h2> <h3> N° <%= pokemon.number %></h3>
           <p class="description">Description: <%= pokemon.description %></p>
           <p>Type: <%= pokemon.type %></p>
           <p>Category: <%= pokemon.category %></p>
          <p>Height: <%= pokemon.height %>m</p>
           <p>Weight: <%= pokemon.weight %>kg</p>
           <p>Type: <%= pokemon.type %></p>
          <p>Abilitie: <%= pokemon.abilitie %></p>
          <p ><%= pokemon.abilitie2 %></p>
          <a id="editar" href="/details/<%= pokemon.id %>">Edit</a>
          </div>

        <% }) %>
      </section>

      </section>
      <section id="register">
        <h2>Register a new Pokemon</h2>
        <% if (pokemon==undefined) { %>
        <form action="/create" method="post">
          <label for="name">Name: </label>
          <input type="text" id="name" name="name"  />

          <label for="number">Number: </label>
          <input type="text" id="number" name="number" />

          <label for="description">Description: </label>
          <input type="text" id="description" name="description" />

          <label for="image">Image link: </label>
          <input type="text" id="image" name="image" />

          <label for="category">Category: </label>
          <input type="text" id="category" name="category" />

          <label for="height">Height: </label>
          <input type="text" id="height" name="height" />

          <label for="weight">Weight: </label>
          <input type="text" id="weight" name="weight" />

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

          <label for="abilitie">Abilitie: </label>
          <input type="text" id="abilitie" name="abilitie" />

          <label for="abilitie2">Second Abilitie: </label>
          <input type="text" id="abilitie2" name="abilitie2" />

          <button id="btnRegister" type="submit">Register</button>
        </form>

        <% } else { %>

        <form action="/update/ <%= pokemon.id %>" method="POST">

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

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

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

          <label for="image">Image link: </label>
          <input type="text" id="image" name="image" value="<%= pokemon.image %>" />

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

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

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

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

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

          <label for="abilitie2">Second Abilitie: </label>
          <input type="text" id="abilitie2" name="abilitie2" value="<%= pokemon.abilitie2 %>" />

          <button id="btnRegister" type="submit">Atualize</button>
        </form>
        <% } %>

    </main>

    <footer>
      <p>This project was made for educational purposes only without any intention of profit. </p>
      <div id="poke">
      <p>Informations entired from <a  href="https://www.pokemon.com/br/pokedex/">pokedex</a></p>
    </div>

    <div id="myName">
      <p>Author: Carlos Kohaute</p>
      <a href="https://www.linkedin.com/in/carlos-kohaute-113a69229/">LinkedIn</a>
      <a href="https://github.com/CarlosKohaute">GitHub</a>
    </div>

    </footer>
  </body>
</html>
