<!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" />
        <script
            src="https://kit.fontawesome.com/71f92ea1b3.js"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://kit.fontawesome.com/4609d6016a.js"
            crossorigin="anonymous"
        ></script>
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <link rel="stylesheet" href="./css/style.css" type="text/css" />
        <link
        rel="icon"
        type="image/png"
        href="https://live.staticflickr.com/65535/52063342060_4085f3e141.jpg"
    />
        <title>Crie um Bebê</title>
    </head>
    <body>
        <%- include("./partials/header.ejs") %>
        <main>
            <section id="form-container">
                <form method="POST" action="/criar">
                    <fieldset>
                    <legend>Crie seu Bebê</legend>

                    <fieldset class="fieldset-data">
                    <label class="escolha" for="nome_kit">Nome</label>
                    <input type="text" name="nome_kit" required/>
                </fieldset>
                   
                <fieldset class="fieldset-data">
                    <label class="escolha" for="peso">Peso</label>
                    <input type="number" name="peso" required/> 
                </fieldset>

                <fieldset class="fieldset-data">
                    <label class="escolha" for="sexo">Sexo</label><br />
                    <input type="radio" name="sexo" value="Masculino" checked/>
                    <label for="sexo">Masculino</label><br />
                    <input type="radio" name="sexo" value="Feminino" />
                    <label for="sexo">Feminino</label><br />
                </fieldset>

                <fieldset class="fieldset-data">
                    <label class="escolha" for="tamanho">Tamanho</label>
                    <input type="number" name="tamanho" required/>
                </fieldset>

                <fieldset class="fieldset-data">
                    <label class="escolha" for="corpinho">Corpinho</label>
                    <input type="text" name="corpinho" required/>
                </fieldset>

                <fieldset class="fieldset-data">
                    <label class="escolha" for="data_nascimento">Nascimento</label>
                    <input type="text" name="data_nascimento" required/>     
                </fieldset>        

                <fieldset class="fieldset-data">
                    <label class="escolha" for="img">Imagem</label>
                    <input type="url" name="img" required/>
                </fieldset>

                <fieldset class="fieldset-data">
                    <label class="escolha" for="iframe">Iframe</label>
                    <input type="text" name="iframe" required>
                </fieldset>
                <div id="btn-container">
                    <button id="btn-submit" type="submit">Enviar</button>
                </div>
                   </fieldset>
            </section>
        </main>
        <%- include("./partials/footer.ejs") %>
        <% if (toggle) { %>
            <script>
                Swal.fire({
                    icon: 'success',
                    title: 'Sucesso!',
                    text: 'Bebê criado com sucesso',
                    timer: 5000
                })
                setInterval(() => {window.location.href = "/"}, 5000)
            </script>
        <% } %>
    </body>
</html>