<!DOCTYPE html>
<html lang="en">
  <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/update.css" />

    <title>WaTchV</title>
  </head>
  <body>
    <header>
      <a href="/">
        <img id="logo-img" src="../img/logo-watchv.png" />
      </a>      
      <img id="svg-img" src="../img/television-tv-svgrepo-com.svg" />
    </header>
    <main>
      <section id="insert">

        <% if(message != "") {  %>
          <section id="message">
              <p><%= message %></p> 
              <span id="close">
                <a href="/">
                  <img id="close-img" src="../img/cancel.svg" />
                </a>
              </span>
          </section>
        <% }  %>

        <% if(movie != null) {  %>

        <h2>Edite seu filme/série aqui:</h2>

        <form action="/update/<%= movie.id %>" method="POST">
          <div id="form">
            <div class="info-input" id="info-input-field">
              <div class="div-field">
                <label for="title">Nome: </label>
                <input
                  type="text"
                  name="title"
                  id="title"
                  value="<%= movie.title %>"
                  placeholder="Nome do filme/série"
                />
              </div>

              <div class="div-field">
                <label for="direction">Direção: </label>
                <input
                  type="text"
                  name="direction"
                  id="direction"
                  value="<%= movie.direction %>"
                  placeholder="Direção"
                />
              </div>

              <div class="div-field">
                <label for="releasedate">Lançamento: </label>
                <input
                  type="text"
                  name="releasedate"
                  id="releasedate"
                  value="<%= movie.releasedate %>"
                  placeholder="01/01/2001"
                />
              </div>

              <div class="div-field">
                <label for="genre">Gênero: </label>
                <select class="select" name="genre" >
                  <option value="<%= movie.genre %>"> <%= movie.genre %> </option>
                  <option value="Ação">Ação</option>
                  <option value="Comédia">Comédia</option>
                  <option value="Drama">Drama</option>
                  <option value="Ficção">Ficção</option>
                  <option value="Romance">Romance</option>
                  <option value="Suspense">Suspense</option>
                  <option value="Terror">Terror</option>
                </select>
              </div>

              <div class="div-field">
                <label for="rating">Nota: </label>
                <input
                  type="number"
                  name="rating"
                  id="rating"
                  placeholder="Nota de 0 a 5"
                  value="<%= movie.rating %>"

                  step="1"
                  min="0"
                  max="5"
                />
              </div>

              <div class="div-field">
                <label for="status">Status: </label>
                <select class="select" name="status" >
                  <option value=" <%= movie.status %> "> <%= movie.status %> </option>
                  <option value="Assistida">Assistida</option>
                  <option value="Não Assistida">Não Assistida</option>
                  <option value="Assistir Depois">Assistir Depois</option>
                </select>
              </div>

              <div class="div-field">
                <label for="cover">Capa: </label>
                <input
                  type="text"
                  name="cover"
                  id="cover"
                  value="<%= movie.cover %>"
                  placeholder="Link da imagem"
                  
                />
              </div>
            </div>

            <div class="info-input" id="info-input-img">
              <img id="info-img" src="<%= movie.cover %>" />
            </div>
          </div>

          <div id="div-buttons">
          <div id="button">
            <button class="insert-button" type="submit">Atualizar</button>
          </div>

          <div id="button">
            <a href="/delete/<%= movie.id %>">
              <button class="insert-button" type="button">Apagar</button>
            </a>
          </div>

          <div id="button">
          <a href=/>
            <button class="insert-button" type="button">Início</button>
          </a>
          </div>
          </div>
        </form>
        <% }  %>
      </section>
    </main>

    <footer>
      <p>
        Esta é uma aplicação de caráter estudantil. Não detemos direitos
        autorais das imagens, tampouco é utilizada para fins comerciais.
      </p>
    </footer>
    <script src="/js/script.js"></script>
  </body>
</html>
