<!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 href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
    <link rel="shortcut icon" type="imagex/png" href="./img/imagens/icon.ico">
    <link rel="stylesheet" href="./css/style.css">
    <title>PokéDex</title>
</head>
<body>
    
    <nav>
        <div class="logo"><img src="./img/imagens/Pokemon-Logo.png" alt="logo pokemon"></div>

        <div class="navbar-itens">

            <a class="container_navbar_itens" id="container_navbar_itens_home" href="/">

                <span></span>
                <div class="container_itens">
                    <span class="material-icons">home</span>
                    <h2 id="material-text">Home</h2>                    
                </div>
                <span class="selection" id="selection_home"></span>

            </a>
            
            <a class="container_navbar_itens" id="container_navbar_itens_pokedex" href="/pokedex">

                <span></span>
                <div class="container_itens_poke" id="container_itens_poke">

                    <ul id="ulcircle">
                        <li class="poke-line" id="poke-line1"></li>
                        <li id="poke-circle"></li>
                        <li class="poke-line" id="poke-line2"></li>
                    </ul>                    
                    <h2 id="material-text">Pokédex</h2>
                    <span class="selection"></span>

                </div>
                <span class="selection" id="selection_pokedex"></span>

            </a>

            <a class="container_navbar_itens" id="container_navbar_itens_add" href="/cadastro">

                <span></span>
                <div class="container_itens">                
                    <span class="material-icons">add</span>
                    <h2 id="material-text">Add</h2>
                    <span class="selection add"></span>
                </div>
                <span class="selection" id="selection_add"></span>

            </a>            

        </div>

        <div class="logo"><img src="./img/imagens/Pokemon-Logo.png" alt="logo pokemon"></div>

    </nav>

    <main>

        <div class="main__cards">

            <div class="container_add" >

                <div class="card_add" id="card_add">
    
                    <img src="./img/imagens/plus.png" class="card_img_plus" alt="Imagem" title="" />                
    
                    <h2>ADD</h2>                
    
                </div>
    
    
                <form action="/add"  class="card_form" id="card_form" method="post">
    
                    <div class="card_form_row">
                        <label for="id">Número:</label>
                        <input type="text" id="id" name="id" placeholder="001" size="8">
                    </div>
    
                    <div class="card_form_row">
                        <label for="nome">Nome:</label>
                        <input type="text" id="nome" name="nome" placeholder="Pikachu" size="8">
                    </div>
    
                    <div class="card_form_row">
                        <label for="tipo">Tipo:</label>
                        <input type="text" id="tipo" name="tipo" placeholder="Choque" size="8">
                    </div>
                    
                    <div class="card_form_row">
                        <label for="habilidade">Habilidade:</label>
                        <input type="text" id="habilidade" name="habilidade" placeholder="Estático" size="8">
                    </div>
    
                    <div class="card_form_row">
                        <label for="categoria">Categoria:</label>
                        <input type="text" id="categoria" name="categoria" placeholder="Rato" size="8">
                    </div>
                    
    
                    <div class="card_form_row">
                        <label for="altura">Altura:</label>
                        <input type="text" id="altura" name="altura" placeholder="40 cm" size="8">
                    </div>
    
                    <div class="card_form_row">
                        <label for="peso">Peso:</label>
                        <input type="text" id="peso" name="peso" placeholder="6 kg" size="8">
                    </div>                
    
                    <label for="imagem">Imagem:</label>
                    <textarea type="text" id="imagem" name="imagem" placeholder="http//" size="10"></textarea>
                    <label for="descricao">Descrição:</label>
                    <textarea type="text" id="descricao" name="descricao" placeholder="Pikachu que pode gerar eletricidade poderosa tem bolsas nas bochechas que são extra macias e super elásticas." size="10"></textarea>
    
                    <button id="submit_cadastro" type="submit">Cadastrar</button>
    
                </form>
    
            </div>
    
            <% pokedex.forEach((pokemon) =>{%>
    
            
                <a class="container_card" id="container_card" href="/detalhes/<%= pokemon.nome %>" >
    
                    <div class="card" id="card">
    
                        <h2 id="numero">Nº <%= pokemon.id %></h2>
                        <img src="<%= pokemon.imagem %>" class="card_img" alt="Imagem" title="" />
                        <h2 id="nome"><%= pokemon.nome %></h2>                                                   
                        
                    </div>
    
                </a>
            <% }) %>
    


        </div>
        
        


    </main>

    <footer>

        <div>

        </div>

        <div id="copyright">
            <p>Copyright &copy; 2022 <a href="https://www.linkedin.com/in/labupaim" target="_blank"> Victor Paim </a> & <a href="https://github.com/LHcouto" target="_blank">Luis Couto </a> - Todos os direitos reservados</p>
        </div>

    </footer>
    
    <script type="text/javascript" src="./js/script.js"></script>
</body>
</html>