<!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>
      <img id="logo-img" src="../img/logo-watchv.png" />
      <img id="svg-img" src="../img/television-tv-svgrepo-com.svg" />
    </header>
    <main>
      <section id="insert">
        <% movie.map ( mve => { %>


        <h2><%= mve.title %></h2>

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

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

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

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

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

              
            </div>

            <div class="info-input" id="info-input-img">
              <img
                id="info-img"
                src="<%= mve.cover %>"
                alt="<%= mve.title %>"
              />
            </div>
          </div>
        </form>

        <a href=/>
          <div id="button">
            <button id="register-button" type="submit">Voltar</button>
          </div>
        </a>

        <% }) %>


      </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>
