<!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/style.css" />
        <title>Adicionar pokémon</title>
    </head>
    <body>
        <% if(message != "") { %>
            <section id="message">
                <p><%= message %></p>
                <span id="close">&times;</span>
            </section>
            <% } %>
        <header>
            <h1>
                <div class="menu">
                    <% menu.forEach((item) => { %>
                    <a href="<%= item.link %>"><%= item.title %></a>
                    <% }) %>
                </div>
            </h1>
        </header>
        <main>
            <section id="cadastro">
                <p class="title">Cadastre um pokemon</p>

                <form action="/create" method="post">
                    <ul>
                        <li>
                            <label for="name">Nome: </label>
                        </li>
                        <li><input type="text" id="name" name="name" required/></li>

                        <li>
                            <label for="desc">Descriçao: </label>
                        </li>

                        <li><input type="text" id="desc" name="desc" required/></li>

                        <li>
                            <label for="type">Tipo: </label>
                        </li>
                        <li>
                            <select id="type" name="type">
                                <% type.forEach((type) => { %>
                                <option value="<%= type %>"><%= type %></option>
                                <% }) %>
                            </select>
                        </li>
                        <li>
                            <label for="image">Imagem: </label>
                        </li>
                        <li><input type="text" id="image" name="image" required/></li>
                        <li>
                            <label for="height">Altura: </label>
                        </li>
                            <li><input type="text" id="height" name="height" required/></li>
                        <li>
                             <label for="weight">Peso: </label>
                        </li>
                            <li><input type="text" id="weight" name="weight" required/></li>
                        <li>
                             <label for="cat">Categoria: </label>
                        </li>
                        <li><input type="text" id="cat" name="cat" required/></li>
                        <li>
                            <label for="hab">Habilidade: </label></li>
                        <li><input type="text" id="hab" name="hab" required/></li>
                                            <li>
                            <button id="btn" type="submit">Enviar</button>
                        </li>
                    </ul>
                </form>
            </section>
        </main>
        <footer></footer>
        <script src="/js/script.js"></script>
    </body>
</html>
