<!DOCTYPE html>
<html lang="pt-br">
  <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="/style.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <title>Playlist NIX</title>
  </head>

  <body>

    <nav>
      <ul>
        <li>
          <a href="/"><img src="/img/logoblue.png" alt="Logo da Blue" /></a>
        </li>
        <li>
          <a href="/admin"><i class="bi bi-gear"></i></a>
        </li>
      </ul>
    </nav>

    <section id="player">
      <h1>Playlist Lucas</h1>
      <div>
        <img id="currentImg" src="/img/musicoff.jpg" />
        <h2 id="currentName">Titulo</h2>
        <p id="currentArtist">Artista</p>
      </div>
      
      <div>
        <table>
          <thead>
            <tr>
              <th></th>
              <th>Nome</th>
              <th>Artistas</th>
              <th></th>
            </tr>
          </thead>

          <tbody>
            <% playlist.forEach((music)=>{ %>
              <tr class="musics">
                <td>
                  <img src="<%= music.linkImage %>" alt="Imagem da musica"></td>
                  <td>
                    <%= music.name%>
                  </td>
                  <td>
                    <%= music.author%>
                  </td>
                  <td><audio controls src="<%= music.linkMusic%>"></audio></td>
                </td>
              </tr>
              <% }) %>
          </tbody>
        </table>
      </div>
    </section>
  </body>
</html>
