<!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="/css/style.css"> <!--CHAMA O CSS-->
    <title>Pokedex</title>
</head>
<body id="pagina">
    <nav id="menu">  <!--   -->
       <ul> <!--   -->
           <img src="/img/pokebola.png" alt=""><!-- imagem do menu  -->
           <li><a href="/"><h1>Pokédex</h1></a> </li><!--o h1 e melhor para pesquisa do google-->
           <li>  <a href="/redirecionar">Cadastro</a>  </li>
           <li> <a href="#cards"> Lista de Pokemons </a></li>
       </ul>
    </nav>
             <% if(mensagem != ""){ %>
              <section id="mensagem">
              <p> <%=mensagem%> </p> <span id="close"> &times; </span>
              </section>
           <% } %>
     <main>
        <section id="cadastro"> <!--caminho para o CSS o ID serve para todos os itens de uma div-->
            <section id="tasks"><!--criamos a section para a lista de tarefa-->
                <ul id="myUL">
                   <!--criou a lista vazia para receber as tarefas-->
                </ul>
            </section>

            <div>

                <% if ( pokemon == undefined) { %>  <!-- MONSTRA A PAGINA PRINCIPAL DO POKEMON  -->

                    <h2>Cadastre um novo pokemon</h2>
        
                    <form action="/add" method="post"> <!--o FORM esta recebendo as informações que vem do array-->
                        <!-- o ACTION manda a requisição que foi feita que estão no form. "/CEAT" >  manda os dados para uma rota do back end.(index.js) resumindo manda uma requisição atraves da "/creat" recebe os dados e manda atraves do o methodo "post"
                         >> -->
        
                         <label for="numero"> Numero: </label>
                         <input type="text" id="numero" name="numero" required>
                         
                         <label for="nome"> Nome:</label><!--    -->
                          <input type="text" id="nome" name="nome" required><!--  o value envia os valores do pokemon  -->
                           
                          <label for="tipo"> Tipo:</label>
                          <input type="text" id="tipo" name="tipo" required><!--    -->
                     
                          <label for="imagem"> Link da Imagem:</label>
                          <input type="text" id="imagem" name="imagem" required><!--    -->
                           
                          <label for="descricao"> Descrição:</label><!--    -->
                          <input type="text" id="descricao" name="descricao" required >
                     
                          <label for="altura"> Altura:</label><!--    -->
                          <input type="text" id="altura" name="altura"required >
                     
                          <label for="peso"> Peso:</label><!--    -->
                          <input type="text" id="peso" name="peso" required>
                     
                          <label for="categoria"> Categoria</label><!--    -->
                          <input type="text" id="categoria" name="categoria"required>
                     
                          <label for="habilidade"> Habilidade:</label><!--    -->
                          <input type="text" id="habilidade" name="habilidade"required>
        
                        <button id="btnCadastrar" type="submit"> Cadastrar</button><!--    -->
                       
        
                    </form>
                     
                    <% } else { %><!-- ESSA CONDIÇÃO E QUANDO CLICAR EM EDITAR AI MOSTRA A PAGINA DE ATUALIZAR    -->
        
                        <h2 class="detalhes"> Detalhes do pokemon</h2>
                    <form action="/update/<%= pokemon.id %>" method="post"><!-- manda PARA SER FEITO A ATUALIZAÇÃO    -->
                      
                       <label for="numero"> Numero: </label>
                       <input type="text" id="numero" name="numero" value="<%= pokemon.numero %>">
                       
                       <label for="nome"> Nome:</label><!--    -->
                        <input type="text" id="nome" name="nome" value="<%= pokemon.nome %>"><!--  o value envia os valores do pokemon  -->
                         
                        <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 %> " >
        
                     
        
        
        
                    </form>
                    <% } %>

            </div>

        </section>




        <section id="cards">
                 <h2>Lista de Pokemons</h2>

            <% pokedex.forEach((pokemon) => { %> <!-- aqui esta chamando o array POKEDEX que foi criado atraves do FOREACH o >>>POKEMON são itens<<-->
               <div class="card"> <!--dentro dessa DIV mostra todos os objetos do ARRAY POKEDEX-->
                   
                   <img cl src="<%= pokemon.imagem %>" alt=""> <!-- o POKEMON >> São itens que tem em meu array. pokemon.imagem o (.imgem) são os itens do pokemon e CADA ITEM E UM OBJETO-->
                   <h3> <%= pokemon.nome %> </h3>
                   
                   <p> Tipo: <%= pokemon.tipo %> </p>

                   <a  id="detalhes1" href="/detalhes/<%= pokemon.id %>"> Detalhes do pokemon</a> <!-- envia o ID (identidade )para ser editado no botão editar-->
                   
               </div>
       
              <%})  %> <!-- FECHOU O ARRAY POKEDEX-->
        </section>
       
        
     </main>

     <footer>
    
         <p>Todos os direitos preservados  &copy; Meu: <a target="_blank" href="https://www.linkedin.com/in/robervan-souza/">LinkedIn</a></p>
         <p>Meu: <a target="_blank" href="https://github.com/RobervanSouza"> Github</a></p>
         <p>Dados retirados do site: <a target="_blank" href="https://www.pokemon.com/br/pokedex/">Pokedex </a></p>
     </footer>
     <script src="js/script.js"></script>
</body>
</html>