<!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="/style.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
        <title>Music Player</title>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <a href="/"><img src="/img/logoblue.png" alt="Logo"></a>
                </li>
                <li>
                    <a href="/admin"><i class="bi bi-gear"></i></a>
                </li>
            </ul>
        </nav>

        <section id="player">
            <h1>Music Player</h1>
            <div>
                <img id="currentImg" src="/img/musicoff.jpg" alt="" />
                <h2 id="currentName">Title</h2>
                <p id="currentArtist">Artist</p>
            </div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Artist</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <% playlist.forEach((music) => { %>
                        <tr class="musics">
                            <td><img src="<%= music.linkImage%>" alt="Music image" /></td>
                            <td><%= music.name %></td>
                            <td><%= music.author %></td>
                            <td>
                                <audio controls class="audio" src="<%= music.linkMusic%>"></audio>
                            </td>
                        </tr>
                        <% }) %>
                    </tbody>
                </table>
            </div>
        </section>
    </body>
</html>
