<!DOCTYPE html>
<html lang="pt">
<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="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/style.css">
    <title>Music App</title>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a id="logo" href="/">pink play</a>
            </li>
            <li>
                <a href="/"><i class="bi bi-box-arrow-right"></i></a>
            </li>
        </ul>
    </nav>

    <section id="add">

        <h2>Insira uma nova 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">link 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">

        <h1>Gerenciar músicas</h1>

        

        <div>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Nome</th>
                        <th>Artista</th>
                        <th>açoes</th>
                    </tr>
                </thead>


                <tbody>

                    <% playlist.forEach((music)=>{ %>
                        <tr class="musics">
                            <td><img src="<%= music.linkImage %>" alt="link da música"></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">link 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 apagar <%= 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>