<!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>Administrador</title>
</head>

<body>

    <nav>
        <ul>
            <li>
                <a href="/"><img src="/img/332300.jpg" alt="Logo"></a>
            </li>
            <li>
                <a href="/"><i class="bi bi-boombox"></i></a>
            </li>
        </ul>
    </nav>

    <section id="add">

        <h2>Cadastre uma musica</h2>

        <form action="/create" method="post">
            <label for="name">Nome:</label>
            <input type="text" name="name" id="name">

            <label for="author">Autor:</label>
            <input type="text" name="author" id="author">

            <label for="linkImage">URL da Imagem:</label>
            <input type="text" name="linkImage" id="linkImage">

            <label for="linkMusic">Link da Musica:</label>
            <input type="text" name="linkMusic" id="linkMusic">

            <button type="submit">Cadastrar</button>
        </form>

    </section>

    <section id="player">
        <h2>Gerenciar música</h2>

        <div>
            <table>

                <thead>
                    <tr>
                        <th></th>
                        <th>Nome</th>
                        <th>Artista</th>
                        <th>Açôes</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 id="actions">
                                <a id="edit" href="/by/<%= music._id %>/edit">Editar</a>
                                <a id="delete" href="/by/<%= music._id %>/delete">Apagar</a>
                            </td>
                        </tr>
                        <% }) %>
                </tbody>

            </table>
        </div>
    </section>

    <% if (music !=null) { %>
        <section id="modal">
            <div id="card">
                <a id="close-modal" href="/admin"><i class="bi bi-x-lg"></i></a>
                <h2>Editar Musica
                </h2>
                <hr>

                <form id="form-modal" action="/update/<%= music._id %>" method="post">
                    <label for="name">Nome:</label>
                    <input type="text" name="name" id="name" value="<%= music.name %>">

                    <label for="author">Autor:</label>
                    <input type="text" name="author" id="author" value="<%= music.author %>">

                    <label for="linkImage">URL da Imagem:</label>
                    <input type="text" name="linkImage" id="linkImage" value="<%= music.linkImage %>">

                    <label for="linkMusic">Link da Musica:</label>
                    <input type="text" name="linkMusic" id="linkMusic" value="<%= music.linkMusic %>">

                    <button type="submit">Atualizar</button>
                </form>

            </div>

        </section>
        <% } %>

            <% if (musicDel !=null) { %>
                <section id="modal">
                    <div id="card">
                        <a id="close-modal" href="/admin"><i class="bi bi-x-lg"></i></a>
                        <h2>Confirmação</h2>
                        <hr>
                        <p>Deseja realmente deletar a Musica<%= musicDel.name %> ?
                        </p>

                        <div id="btn-confirm">
                            <a id="no" href="/admin">Não</a>
                            <a id="yes" href="/delete/<%= musicDel._id %>">Sim</a>
                        </div>

                    </div>

                </section>
                <% } %>
</body>

</html>