<!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/styles.css">
    <title>Pokedéx/Captura</title>
</head>

<body>
    <nav id='navbar'>
        <a href="https://github.com/JohnSulliman/pokedex-mvc" class='githubImage'>
            <img src='img/eevee.gif' width='70rem' alt='eevee' />
            <img src='img/github.png' width='60rem'/>
        </a>
    </nav>

    <header>
        <div class='cancelButton'>
            <a href='/'>
                <img src='img/pokebola.png' width='35px' alt='pokebola'/>
            </a>

            <img src='img/cancel.png' width='60px' alt='cancel-button' />
        </div>

    </header>
    <section class='body-cadastro'>
        <h1>Captura</h1>
        <small>Capture seu pokémon aqui!</small>

        <form id='form' action='/sent' method='POST'> 
            <div class='cadastro'>
                <section>
                    <h3>Informações Principais</h3>
                    <div class='cadastro-infos'>
                        <div>
                            <label for='name'>Nome: </label>
                            <input class='input' name='name' required />
                        </div>
                        <div>
                            <label for='image'>Imagem: </label>
                            <input class='input' placeholder='URL da imagem' name='image' required />
                        </div>
                        <div>
                            <label for='type1'>Tipo: </label>
                            <select class='select' name='type1' required >
                                <option value=''>Tipo primário</option>
                                <option value='Inseto'>Inseto</option>
                                <option value='Noturno'>Noturno</option>
                                <option value='Dragão'>Dragão</option>
                                <option value='Elétrico'>Elétrico</option>
                                <option value='Fada'>Fada</option>
                                <option value='Lutador'>Lutador</option>
                                <option value='Fogo'>Fogo</option>
                                <option value='Voador'>Voador</option>
                                <option value='Fantasma'>Fantasma</option>
                                <option value='Grama'>Grama</option>
                                <option value='Terra'>Terra</option>
                                <option value='Gelo'>Gelo</option>
                                <option value='Normal'>Normal</option>
                                <option value='Venenoso'>Venenoso</option>
                                <option value='Psíquico'>Psíquico</option>
                                <option value='Pedra'>Pedra</option>
                                <option value='Aço'>Aço</option>
                                <option value='Água'>Água</option>
                            </select>
                        </div>
                        <div>
                            <label for='type2'>Tipo: </label>
                            <select class='select' name='type2'>
                                <option value=''>Tipo secundário</option>
                                <option value='Inseto'>Inseto</option>
                                <option value='Noturno'>Noturno</option>
                                <option value='Dragão'>Dragão</option>
                                <option value='Elétrico'>Elétrico</option>
                                <option value='Fada'>Fada</option>
                                <option value='Lutador'>Lutador</option>
                                <option value='Fogo'>Fogo</option>
                                <option value='Voador'>Voador</option>
                                <option value='Fantasma'>Fantasma</option>
                                <option value='Grama'>Grama</option>
                                <option value='Terra'>Terra</option>
                                <option value='Gelo'>Gelo</option>
                                <option value='Normal'>Normal</option>
                                <option value='Venenoso'>Venenoso</option>
                                <option value='Psíquico'>Psíquico</option>
                                <option value='Pedra'>Pedra</option>
                                <option value='Aço'>Aço</option>
                                <option value='Água'>Água</option>
                            </select>
                        </div>
                        <div>
                            <label for='description'>Descrição: </label>
                            <input class='input' name='description' />
                        </div>
                        <div>
                            <label for='number'>Número: </label>
                            <input class='input' type='number' name='number' min='001' required />
                        </div>
                    </div>
                </section>

                <section>
                    <h3>Adicionais</h3>
                    <div class='cadastro-infos'>
                        <div>
                            <label for='height'>Altura: </label>
                            <input class='input' type='number' name='height' step="0.01" min='0.01' />
                        </div>
                        <div>
                            <label for='weight'>Peso: </label>
                            <input class='input' type='number' name='weight' step="0.01" min='0.01' />
                        </div>
                        <div>
                            <label for='category'>Categoria: </label>
                            <input class='input' name='category' />
                        </div>
                        <div>
                            <label for='abilities'>Habilidades: </label>
                            <input class='input' name='abilities' />
                        </div>
                    </div>
                </section>
            </div>
            
            <div class='registerButton'>
                <img src='img/gotcha.gif' width='60px' alt='gotcha!'/>

                <button id='submitButton' type='submit'>
                    <img src='img/pokebola.png' width='35px' alt='pokebola'/>
                </button>
            </div>
        </form>
    </section>

    <footer id='footer'>
        <small>
            ©2021 Pokémon. TM, ®Nintendo.
        </small>
    </footer>

    <script src="/js/script.js"></script>
</body>

</html>