<!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>Cadastro</title>
</head>

<body>
    
    <% if (filme == undefined) { %>  <!--se pokemon for undefined o if irá rodar o código de baixo-->
    
    <header id="header2">   <ul><li><a href="/"><h2>Menu Principal</h2></a></li></ul>
    <h1>tela de cadastro</h1>
    
</header>
    <main>
        
        <section id="cadastrar">
            

            <img id="foto2" src="img/escrivanilha.jpg" alt="escrivanilha">
            
                <!--se filme for undefined o if irá rodar o código de baixo-->
                <h2 id="cf"> Cadastrar Filme </h2>
                <!-- 0 Action do form recebe as informações Esse atributo é o responsável por dizer para onde os dados serão enviados, ou seja, para qual rota no meu back-end esse dados vão, para que lá no back-end eles sejam tratados, esse tratamento pode ser, guarda-los em memoria temporária ou persistir esses dados em algum banco de dados. Nas próximas semanas vamos aprender essa persistência, por ora vamos armazenar em memória.-->
                <form id="form" action="/add" method="POST">
                    <!-- esse add manda a informação lá pro js-->
                    <!--Esse atributo é responsável por dizer como nossos dados serão enviados para a rota determinada, existem duas formas de enviar esses dados, pelo método GET ou POST-->

                    <div>
                        <label id="label1" for="nome">Nome: </label>
                        <input type="text" name="nome" id="nome" placeholder="Digite o nome do filme" required>
                    </div>
                    <div>
                        <label id="label2" for="descricao">Descrição: </label>
                        <input type="text" name="descricao" id="Descrição" placeholder="Digite a Descrição" required>
                    </div>
                    <div>
                        <label id="label3" for="tipo">tipo: </label>
                        <input type="text" name="tipo" id="tipo" placeholder="Digite o tipo" required>
                        <!--pegar aREQUISIÇÃO é pelo NAME=-->
                    </div>
                    <div>
                        <label id="label4" for="imagem">imagem: </label>
                        <input type="text" name="imagem" id="imagem" placeholder="Cole o endereço do link da imagem"
                            required>
                    </div>

                    <button id="btCadastrar" type="submit">Cadastrar</button>
                </form>

                <% } else {%>

                    <header id="header22">   <ul><li><a href="/"><h2>Menu Principal</h2></a></li></ul>
                        <h1>tela de Atualizar</h1>
                        
                    </header>
                   
                        <img class="foto2" src="img/escrivanilha2.jpg" alt="escrivanilha2">
                        
                            <!--se filme for undefined o if irá rodar o código de baixo-->
                            <h2 id="cff"> Atualizar Filme </h2>
                            <!-- 0 Action do form recebe as informações Esse atributo é o responsável por dizer para onde os dados serão enviados, ou seja, para qual rota no meu back-end esse dados vão, para que lá no back-end eles sejam tratados, esse tratamento pode ser, guarda-los em memoria temporária ou persistir esses dados em algum banco de dados. Nas próximas semanas vamos aprender essa persistência, por ora vamos armazenar em memória.-->
                            <form id="form" action="/update/<%= filme.id %>" method="POST">
                                <!-- esse add manda a informação lá pro js-->
                                <!--Esse atributo é responsável por dizer como nossos dados serão enviados para a rota determinada, existem duas formas de enviar esses dados, pelo método GET ou POST-->
                                 <h1>    
                                    <%= filme.id %>
                                 </h1>
                                <div>
                                    <label id="label11" for="nome">Nome: </label>
                                    <input type="text" name="nome" id="nome" placeholder="Digite o nome do filme" value="<%= filme.nome %>" required>
                                </div>
                                <div>
                                    <label id="label22" for="descricao">Descrição: </label>
                                    <input type="text" name="descricao" id="Descrição" placeholder="Digite a Descrição"value="<%= filme.descricao %>" required>
                                </div>
                                <div>
                                    <label id="label33" for="tipo">tipo: </label>
                                    <input type="text" name="tipo" id="tipo" placeholder="Digite o tipo"value="<%= filme.tipo %>" required>
                                    <!--pegar aREQUISIÇÃO é pelo NAME=-->
                                </div>
                                <div>
                                    <label id="label44" for="imagem">imagem: </label>
                                    <input type="text" name="imagem" id="imagem" placeholder="Cole o endereço do link da imagem"value="<%= filme.imagem %>"
                                        required>
                                </div>
                                
            
                                <button id="btAtualizar" type="submit">Cadastrar</button>
                            </form>
                            <% } %>
        </section>

    </main>


</body>

</html>