<!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="css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,700,0,200" /></head>
    <title>Catálogo</title>
<body>
    <header>
        <span id="icon" class="material-symbols-outlined">
            music_note
            </span>
    </header>
    <main>

        <!-- CARDS -->

        <section class="campo">
            <article>
                <div class="card">
                    <button id="btnAdd"><a href="/add"><span id="add"
                        class="material-symbols-outlined">
                        add
                        </span>
                    </a></button>
                </div>
                <% songs.forEach((music) => { %>
                <div class="card">
                    <figure>
                        <img src="<%= music.capa %>" alt="Não compatível">
                    </figure>
                    <button class="btnMusica" onclick="showModal('<%= music.id %>')"><%= music.nome %></button>
                    
                </div>
                <% }) %>
            </article>
        </section>


        <!-- MODAL DOS DETALHES  -->


        <section>
            <% songs.forEach((music) => { %>        
                <div class="modal" id="<%= music.id %>">
                    <div class="modal-content">
                        <span id="x" onclick="hideModal('<%= music.id %>')">&times;</span>
                        <figure>
                            <img class="fotoModal" src="<%= music.capa %>" alt="Não compatível">
                        </figure>

                        <a id= "lixeira" href="/delet/<%= music.id %>"><span class="material-symbols-outlined">
                            delete
                            </span></a>
                        <a id= "lapi" href="/edit/<%= music.id %>"><span class="material-symbols-outlined">
                            edit
                            </span></a>                            

                        <article>
                            <div class="detModal">
                                <h3 class="linhaModal"><%= music.nome %></h3>

                                <p class="linhaModal">AUTOR: <%= music.autor %></p>
                                <p class="linhaModal">ÁLBUM: <%= music.album %></p>
                            </div>
                        </article>
                        

                    </div>
                </div>

    
                <% })  %>
            </section>


    </main>

    <footer id="footer">
        <p id="direitos">Todos direitos reservados a <a id="ig" href="https://github.com/manopassaro" target="_blank">@manopassaro</a>.</p>
    </footer>



    <script src="/js/script.js"></script>

</body>
</html>