<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Pokebola-pokeball-png-0.png/601px-Pokebola-pokeball-png-0.png">
    <title>Pokédex</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <nav>
        <ul>
            <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Pokebola-pokeball-png-0.png/601px-Pokebola-pokeball-png-0.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="https://cdn.unifiedcommerce.com/content/product/large/079346093755.jpg" alt="Banner">
    </header>
    
    <main>
        <section id="cadastro">

            <img src="https://static.wikia.nocookie.net/pokepediabr/images/3/38/Pok%C3%A9dex_Kanto.png/revision/latest?cb=20131224014121&path-prefix=pt-br" alt="Pokedex">

            <div>
                <% if(pokemon == undefined) { %>
                    <h2>Cadastre um novo POKEMON!</h2>
        
                    <form>
        
                       <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">
        
                       <button id="btnCadastrar" type="button"> Cadastrar </button>
        
                    </forma>
                    <% } else { %>
        
                        <h2>Atualize seu POKEMON!</h2>
                    
                    <form id="form">
        
                        <input type="hidden" id="id" name="id" value="<%= pokemon.id %>">
                        <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 %>">
         
                        <button id="btnAtualizar" type="button"> Atualizar </button>
         
                     </forma>
                     <% } %>

            </div>
           
        </section>


        <section id="cards">
            <h2>Lista de POKEMONS</h2>
            <div id="pokemons">

            </div>
        </section> 
    </main>
    <footer>
        <p>Todos os direitos para Thi Code &copy;</p>
        <p>Dados retirados de <a target="_blank" href="https://www.pokemon.com/br/pokedex">Pokedex</a></p>
    </footer>
</body>
<script src="script.js"></script>
</html>