<!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">
    <script src="script.js" defer></script>
    <title>Pokedex</title>
</head>

<body>
    <nav>
        <ul>
            <li>

                <a href="/">
                    <h1>POKEDEX</h1>
                </a>

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

        </ul>
    </nav>

    <main>

        <section id="cadastro">


            <div>
                <% if (pokemon==undefined) { %>

                    <h2>Cadastre um novo Pokemon!</h2>

                    <form action="/newP" 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="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="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="hablidade" name="habilidade">

                        <button onclick="cadastro()" type="submit">Cadastrar</button>
                        <!-- <p class='msg-success'> Usuário Cadastrado com sucesso!</p> -->
                        <span id="ok"></span>

                        <% } else { %>

                            <h2>Atualização do Pokemon!</h2>

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

                            </div>

                            <div class="cardDt">
                                <h2>
                                    <%= pokemon.nome %>
                                </h2>
                                <p>Nº: <%= pokemon.id %> </p>
                                <p class="descricao">
                                    <%= pokemon.descricao%>
                                </p>
                                <p>Tipo: <%= pokemon.tipo %>
                                </p>
                                <p>Altura: <%= pokemon.altura %>
                                </p>
                                <p>Peso: <%= pokemon.peso %>
                                </p>
                                <p>Categoria: <%= pokemon.categoria %>
                                </p>
                                <p>Habilidade: <%= pokemon.habilidade %>
                                </p>
                            </div>

                            <form action="/upP/<%= 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="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="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="hablidade" name="habilidade" value="<%=pokemon.habilidade%>">

                                <button id="btnAtualizar" type="submit">Atualizar</button>

                            </form>
                            <% } %>

            </div>


        </section>

        <section id="cards">

            <h2>Lista de Pokemons</h2>

            <% pokedexList.map((pokemon)=> { %>

                <div class="card">
                    <abbr title="Click para atualizar"><a href="/infP/<%= pokemon.id %>"><img
                                src="<%= pokemon.imagem %>" alt=""></a></abbr>
                    <h3>
                        <%= pokemon.nome %>
                    </h3>
                    <p>Nº: <%= pokemon.id %> </p>
                    <p class="descricao">
                        <%= pokemon.descricao%>
                    </p>
                    <p>Tipo: <%= pokemon.tipo %>
                    </p>
                    <!-- <a id="editar" href="/detalhes/<%= pokemon.id %>" class="editar">Editar</a>
                     -->
                </div>
                <% }) %>
        </section>


    </main>
    <footer>
        <p>Todos os direitos reservados para Charles Marques</p>
    </footer>


</body>

</html>