<!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=
    , initial-scale=1.0">
    <title>Pokedex</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    
        <h1 class="titulo"> Sua Pokedéx</h1>
     

    <section class="cards">



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



            <div class="card-pokemon">

                <div class="card-top">

                    <h3>Id: <%= pokemon.id %>
                    </h3>

                    <h3>Num: <%= pokemon.num%>
                    </h3>

                </div>



                <div class="card-mid">


                    <center>

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

                    </center>


                    <img src="<%=pokemon.imagem%>" alt="">

                    <p class="text-descricao"> Descrição: <%= pokemon. descricao %>

                    </p>

                </div>

                <div class="dados-center">

                    <span class="tipo">
                        <p> Tipo: <%= pokemon.tipo %>
                        </p>
                    </span>

                    <span class="altura">
                        <p> Altura: <%= pokemon.altura %>
                        </p>
                    </span>

                    <span class="peso">
                        <p> Peso: <%= pokemon.peso %>
                        </p>
                    </span>

                    <span class="categoria">
                        <p> Categoria: <%= pokemon.categoria %>
                        </p>
                    </span>

                    <span class="habilidade">
                        <p> Habilidade: <%= pokemon.habilidade %>
                        </p>
                    </span>

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


                </div>

            </div>

            <% }) %>

    </section>


    <section id="cadastro">


        <h2> Cadastre seu Pokemon</h2>

        <form action="/add" method="POST">

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

            <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">

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

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

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

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


            <button id="cadastrar" type="submit"> Cadastrar Pokemon </button>            
            
 

        </form>





    </section>


</body>

</html>