<!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/style.css" />
    <title>DISCOMANIA</title>
  </head>
  <body>
    <main>
      <header>
        <a href="#navigationBar">
        <img
        src="/imgs/spinningCD.gif"
        alt="cd-spinning-logo"
        width="50"
        height="50"
        id="logo1"
      />
    </a>
        <nav id="navigationBar">
          <ul>
            <li>
              <a href="/"">
              <p>HOME</p>
              </a>
            </li>
            <li>
              <a href="/create">
              <p>REGISTER</p>
            </a>
            </li>
            <li>
              <a href="/read">
              <p>CATALOG</p>
              </a>
            </li>
            <li>
              <input type="text" class="searchTerm" placeholder="Search...">
              <button type="submit" class="searchButton">
            </li>
          </ul>
        </nav>
      </header>
      <section id="backgroundAlbums2">
        <section id="albums">
          <% albums1.forEach(itemAlbums =>{ %>
            <section id="myAlbums">
            <article>
            <p> <%= itemAlbums.album_name %> </p>
            <img src="<%= itemAlbums.album_cover %>" class="albumCover">
            <p> <%= itemAlbums.artist_name %> </p>
            <p> <%= itemAlbums.release_date %> </p>
            <a href="/update/<%=itemAlbums.id%>"><button>Edit!</button></a>
            <a href="/delete/<%=itemAlbums.id%>"><button >Delete!</button></a>
          </article>
          </section>
           <% }) %>
      </section>
    </section>

</section>
    </section>
</main>
<footer>Website made by <a href="https://github.com/felipepatricioo" target="_blank">Felipe</a> and <a href="https://github.com/AndreiaLima19" target="_blank">Andreia</a>!!</footer>
</body>
<script src="/js/script.js"></script>
</html>