<!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/index.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>       
        <div class="info-movie">
          <% movie.map ( mve => { %>
              <a href='/details/<%= mve.title %>'>
                <div id="movie">
                  <div id="div-img">
                    <img 
                    id="movie-cover"
                    src="<%= mve.cover %>" 
                    alt="<%= mve.title %>" 
                    />
                  </div>
                  <div id="div-info">
                      <div class="content">
                       <h3 for="title"> <%= mve.title %> </h3>
                      </div>
                      <div class="content">  
                       <h3 for="genre"> Gênero: <%= mve.genre %> </h3>
                     </div>
                     <div class="content">
                       <h3 for="rating"> Nota: <%= mve.rating %> </h3>
                     </div>
                  </div>
              </div>
             </a>           
             <% }) %>
            </div>

      </section>
    </main>
    <div id="div-buttons">
      <a href=/cadastro>
        <button class="insert-button" type="submit">Cadastro</button>
      </a>
      </div>
    <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>
