{% from 'templates/audio_player.html' import audio_player %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wwuu - Music</title>
    {# Link to the dedicated index CSS file #}
    <link rel="stylesheet" href="styles/index_styles.css">
    <link rel="stylesheet" href="styles/common_styles.css"> {# Add link to common styles #}
    {# Add Playfair Display font #}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
</head>
<body>
    {% include 'templates/navbar.html' %} {# Include the navbar #}
    <div class="layout-container">
        <main class="layout-main">
            <div class="layout-sticky-left">
                <div class="site-description">
                    {{ site_description_html | safe }}
                 </div>

                 {{ audio_player() }}
            </div>

            <div class="layout-content-right">
                <!-- <div class="header-container">
                     <div class="search-container">
                        <img src="../assets/search.webp" alt="Search Icon" class="search-icon">
                        <input type="search" id="albumSearch">
                     </div>
                </div> -->
                <ul id="album-list">
                    {# Iterate through the list of generated album pages #}
                    {% for page in pages_info %}
                    <li class="album-list-item">
                        <a href="{{ page.filename }}" class="album-link">
                            {% if page.cover_path %}
                            <img src="{{ page.cover_path }}" alt="Cover for {{ page.album_name }}" class="album-cover-index">
                            {% else %}
                            <div class="album-cover-placeholder"></div> {# Placeholder if no cover #}
                            {% endif %}
                            <div class="album-text-info">
                                <span class="album-name-index">{{ page.album_name }}</span>
                                <span class="artist-name-index">{{ page.artist_str }}</span>
                            </div>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
             </div>
        </main>
    </div>

    <script>
        const searchInput = document.getElementById('albumSearch');
        const albumList = document.getElementById('albumList');
        const listItems = albumList.getElementsByTagName('li');

        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase().trim();

            if (searchTerm.length < 3) {
                // Show all items if search term is less than 3 chars
                for (let item of listItems) {
                    item.style.display = ''; // Reset display style
                }
                return;
            }

            for (let item of listItems) {
                const albumName = item.querySelector('.album-name-index').textContent.toLowerCase();
                const artistName = item.querySelector('.artist-name-index').textContent.toLowerCase();
                const isMatch = albumName.includes(searchTerm) || artistName.includes(searchTerm);
                item.style.display = isMatch ? '' : 'none'; // Show if match, hide otherwise
            }
        });
    </script>
    <script src="scripts/audio_player.js" defer></script>
</body>
</html> 