<!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/estilo.css">
    <link rel="stylesheet" href="./css/estiloCadastro.css">    
    <link rel="stylesheet" href="./css/estiloMensagem.css">
    <title>Cadastro</title>
</head>
<body>
    <header>
        <%- include('nav') %>
    </header>  
    <main>
        <div class="imagembg">
            <input type="hidden" id="imagemAtual" value="../img/Blueflix.png">                            
        </div>
        <section class="formulario">
            <form action="/novo" method="POST" >
                <section class="itemcadastro">
                    <label for="titulo">Título: </label>
                    <input type="text" name="titulo" id="titulo" placeholder="Digite o título do filme" value="<%= trailerNew.titulo %>" required>
                </section>
                <section class="itemcadastro">
                    <label for="sinopse">Sinopse </label>
                    <input type="text" name="sinopse" id="sinopse" placeholder="Digite a sinopse do filme" value="<%= trailerNew.sinopse %>">
                </section>
                <section class="anoDuracao">
                    <section class="itemcadastro">
                        <label for="ano">Ano: </label>
                        <input type="number" name="ano" id="ano" value="<%= trailerNew.ano %>" required>
                    </section>
                    <section class="itemcadastro">
                        <label for="duracao">Duração: </label>
                        <input type="number" name="duracao" id="duracao" placeholder="Em minutos" value="<%= trailerNew.duracao %>" required>
                    </section>
                    <section class="itemcadastro">
                        <label for="categoria">Categoria: </label>
                        <input type="text" name="categoria" id="categoria" placeholder="Comédia, Ficção, Romance, ..." value="<%= trailerNew.categoria %>" required>                              
                    </section>
                </section>
                <section class="itemcadastro">
                    <label for="atores">Atores: </label>
                    <input type="text" name="atores" id="atores" placeholder="Digite o elenco de atrizes e atores" value="<%= trailerNew.atores %>" required>
                </section>
                <section class="itemcadastro">
                    <label for="imagembg">Imagem de fundo: </label>
                    <input type="text" name="imagembg" id="imagembg" placeholder="Insira uma URL de imagem grande do filme" value="<%= trailerNew.imagembg %>" required>
                </section>
                <section class="itemcadastro">
                    <label for="thumb">Miniatura: </label>
                    <input type="text" name="thumb" id="thumb" placeholder="Insira uma URL de imagem para miniatura" value="<%= trailerNew.thumb %>" required>
                </section>
                <section class="itemcadastro">
                    <label for="video">URL do Trailer: </label>
                    <input type="text" name="video" id="video" placeholder="Digite a URL do trailer" value="<%= trailerNew.video %>" required>
                </section>
                <section class="itemcadastro">
                    <input type="hidden" name="classificacaoAtual" id="classificacaoAtual" value="<%= trailerNew.classificacao %>">
                    <label for="classificacao">Classificação: </label>
                    <select name="classificacao" id="classificacao"> 
                    </select>
                </section>
                <section>
                    <button type="submit">Cadastrar</button>
                </section>
            </form>
        </section>
    </main>   
    
    <% if (message != "") {  %>
        <section id="message">
            <p><%= message %></p> <span id="close">&times;</span>
        </section>
    <% }  %>

    <footer>
        <%- include('footer') %>
    </footer>
    <script src="/js/scriptCadastro.js"></script>
    <script src="/js/scriptImagem.js"></script>
    <script src="/js/scriptMensagem.js"></script>
    <script src="/js/scriptNav.js"></script> 
</body>
</html>