<!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/details.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><%= movie.title %></h2>

        <form action="/moviedetails" method="POST">
          <div id="form">
            <div class="info-input">
             
                   <div class="div-field">
                     <label>Direção: <%= movie.direction %></label>
                   </div>

                    <div class="div-field">
                      <label>Lançamento: <%= movie.releasedate %></label>
                    </div>

                    <div class="div-field">
                      <label>Gênero: <%= movie.genre %></label>
                    </div>

                   <div class="div-field">
                      <label>Nota: <%= movie.rating %></label>
                   </div>

                    <div class="div-field">
                      <label>Status: <%= movie.status %></label>
                    </div>

              
            </div>

                  <div class="info-input" id="info-input-img">
                    <img
                      id="info-img"
                      src="<%= movie.cover %>"
                      alt="Imagem não disponível."
                    />
                  </div>
          </div>
          
          <div id="div-buttons">
              <div id="button">
                <a href="/update/<%= movie.id %>">
                  <button class="insert-button" id="register-button" type="button">Editar</button>
                </a>
              </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">Voltar</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="./script.js"></script>
  </body>
</html>
