<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Library</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        #search { width: 50%; padding: 10px; margin: 10px; }
        .music-item { 
            margin: 15px; 
            padding: 15px; 
            border: 1px solid #ccc; 
            display: flex; 
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center content horizontally */
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        .album-art { 
            width: 150px; 
            height: 150px; 
            object-fit: cover; 
            margin-bottom: 15px;
        }
        .music-info { 
            text-align: left;
            width: 100%;
        }
        audio { 
            width: 100%; 
            margin-top: 10px; 
        }
        .disc { 
            margin: 10px 0; 
            cursor: pointer; 
            font-weight: bold;
            padding: 5px;
            background-color: #f1f1f1;
            border-radius: 5px;
        }
        .movements { 
            margin-top: 10px;
            display: none; 
            margin-bottom: 20px;
            width: 100%;
            text-align: left;
        }
        .movement-item {
            display: flex; 
            align-items: center;
            margin-bottom: 15px;
        }
        .movement-item audio {
            margin-left: 15px;
            width: 80%; /* Audio player width adjusted */
        }
    </style>
</head>
<body>
    <h1>My Music Library</h1>
    <input type="text" id="search" placeholder="Search by CD name or movement..." onkeyup="searchMusic()">
    <div id="musicList"></div>

    <script>
        // URL to your hosted JSON TXT file
        const jsonUrl = 'https://raw.githubusercontent.com/eth72419/cd-library-website/refs/heads/main/database.txt?token=GHSAT0AAAAAAC6HNIE7425FRMR3IFLA3IVIZ46LF7Q';  // Replace with the actual URL of your hosted JSON file

        // Function to display music from the hosted JSON file
        function displayMusic() {
            fetch(jsonUrl)
                .then(response => response.json())  // Parse the JSON data from the file
                .then(data => {
                    const musicList = document.getElementById("musicList");
                    musicList.innerHTML = ''; // Clear previous music list
                    data.forEach(row => {
                        const item = document.createElement('div');
                        item.classList.add('music-item');

                        const discName = row.cd_title;  // Get CD Title
                        const albumArt = row.album_art_url;  // Get album art URL
                        const link = row.link;  // Get general link (Google Drive link for the entire album)

                        // Create collapsible disc section
                        const discSection = document.createElement('div');
                        discSection.classList.add('disc');
                        discSection.innerHTML = `${discName}`;

                        // Create a container for movements
                        const movementsContainer = document.createElement('div');
                        movementsContainer.classList.add('movements');
                        
                        // Loop through movements (MP3 URLs for each movement)
                        row.movements.forEach(movement => {
                            const movementTitle = movement.movement_title;  // Movement title
                            const mp3Urls = movement.mp3_urls;  // MP3 URLs array

                            mp3Urls.forEach(mp3Url => {
                                const movementItem = document.createElement('div');
                                movementItem.classList.add('movement-item');
                                movementItem.innerHTML = `
                                    <img class="album-art" src="${albumArt}" alt="Album Art">
                                    <div class="music-info">
                                        <h4>${movementTitle}</h4>
                                        <audio controls>
                                            <source src="${mp3Url}" type="audio/mp3">
                                            Your browser does not support the audio element.
                                        </audio>
                                    </div>
                                `;
                                movementsContainer.appendChild(movementItem);
                            });
                        });

                        // Append the collapsible section with movements
                        discSection.addEventListener('click', () => {
                            const isVisible = movementsContainer.style.display === 'block';
                            movementsContainer.style.display = isVisible ? 'none' : 'block';
                        });

                        item.appendChild(discSection);
                        item.appendChild(movementsContainer);
                        musicList.appendChild(item);
                    });
                })
                .catch(error => {
                    console.error('Error fetching music:', error);
                });
        }

        // Function to search music based on input
        function searchMusic() {
            const query = document.getElementById("search").value.toLowerCase();
            const musicItems = document.querySelectorAll('.music-item');
            musicItems.forEach(item => {
                const title = item.querySelector('.disc').innerText.toLowerCase();
                if (title.includes(query)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        // Display music when the page loads
        displayMusic();
    </script>
</body>
</html>