<!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">
    <title>Editar</title>
    <link rel="icon" href="/IMG/iconn.png">
    <link rel="stylesheet" href="/../css/style3.css">
 
</head>
<body id = "fundo">
        <header class="header">
            <a href="/"> <img src="../IMG/edita.gif" width="50" height="45"></a>
            <nav>
                <ul class="menu">
                    <li><a href=/cadastro>Criar </a></li>
                    <li><a href="/">Menu</a></li>
                </ul>
            </nav>
        </header>
<section id="center">
    <div class="box">
        <form method="POST">
            <div class="inputC">
                <p class="question">Nome</p>
                <label for="nome"></label class="labelinput">
                <input type="text" name="nome" id="input_nome" required value = "<%=filme.nome%>">
            </div>
            <br>
            <div class="inputC">
                <p class="question">Genero</p>

                <select id="gen" name="genero">
                    <%
                    var options = [ "Animação", "Comédia", "Comédia Romântica", "Comédia Dramática", "Documentário", "Drama","Faroeste", "Ficção Científica", "Musical", "Suspense", "Terror / Horror"];
                        for ( var i = 0; i < options.length; i++ ){
                            if (filme.genero===options[i]) { %>
                                <option value="<%=options[ i ] %>" selected><%=options[i] %></option>
                            <%} else{%>
                                <option value="<%=options[ i ] %>" ><%=options[i] %></option>
                            <%}                    
                    }%>
                    </select>
                <br>
                <br>
                <div class="inputC">
                    <p class="question">Imagem Url</p>
                    <label for="image"></label class="labelinput">
                    <input type="url" name="image" id="input_image" required value="<%=filme.imagem%>">
                </div>
                <br>
                <p class="question">Imagem utilizada</p>
                <div>
                <img src="<%=filme.imagem%>" height="300" width="250" class="img-file" alt="<% filme.nome %>">
                </div>
                <br>
                <div class="inputC">
                    <p class="question">Nome do diretor</p>
                    <label for="diretor"></label class="labelinput">
                    <input type="text" name="diretor" id="input_diretor" required value = "<%=filme.diretor%>">
                </div>           
                <br>
                <div class="inputC">
                    <p class="question">Ano de lancamento</p>
                    <label for="diretor"></label>
                    <input type="integer" name="ano" id="input_ano" required value = "<%=filme.ano%>">
                </div>
                <br>
                <button class="botao" type="submit">Editar</button>
                <br>
                <br>
        </form> 
    </div>
</section>
<script type="text/javascript" src="/../public/js/efeito.js"></script>
</body>
</html>