            <h1>Historie songů</h1>
            <div style="display:flex; gap: 10px; margin-bottom: 20px;">
                <button onclick="showSongsTab('history')">Historie odehraných</button>
                <button onclick="showSongsTab('ignored')">Vyřazené songy a Jingly</button>
            </div>
            <div id="tab-history" class="songs-tab glass" style="padding: 20px; display:block;">
                <form id="form-songs" class="form-group" style="margin-bottom: 20px;"><input type="text" id="songArtist" placeholder="Interpret" required> <input type="text" id="songTitle" placeholder="Název songu" required> <button type="submit">Zaznamenat</button></form>
                <table><thead><tr><th style="width:180px;">Čas detekce</th><th>Interpret</th><th>Název</th><th>Hitparáda</th></tr></thead><tbody id="tbody-songs"></tbody></table>
                <div id="songs-pagination" style="margin-top: 15px; display: flex; flex-wrap: wrap; gap: 5px;"></div>
            </div>
            <div id="tab-ignored" class="songs-tab glass" style="padding: 20px; display:none;">
                <h3>Seznam vyřazených položek</h3>
                <p>Tyto songy a jingly se nebudou zobrazovat v historii ani v hitparádě na veřejném webu.</p>
                <table><thead><tr><th>Název (Interpret - Song)</th><th>Datum vyřazení</th><th>Akce</th></tr></thead><tbody id="tbody-ignored"></tbody></table>
            </div>
            <script>
                let currentSongsPage = 1; const songsPerPage = 20; let allSongsData = []; let allIgnoredData = [];
                function showSongsTab(tab) { document.querySelectorAll('.songs-tab').forEach(el => el.style.display = 'none'); document.getElementById('tab-' + tab).style.display = 'block'; loadSongs(); }
                async function loadSongs() { const resIg = await fetch('/admin/api/ignored_songs'); allIgnoredData = (await resIg.json()).data || []; const res = await fetch('/admin/api/songs'); allSongsData = (await res.json()).data || []; renderSongsPage(currentSongsPage); renderIgnored(); }
                function renderSongsPage(page) {
                    const totalPages = Math.ceil(allSongsData.length / songsPerPage) || 1;
                    if (page > totalPages) page = totalPages; currentSongsPage = page;
                    const start = (page - 1) * songsPerPage; const end = start + songsPerPage; const paginated = allSongsData.slice(start, end);
                    document.getElementById('tbody-songs').innerHTML = paginated.map(s => {
                        const d = new Date(s.played_at.replace(' ', 'T'));
                        const timeStr = d.getDate() + '.' + (d.getMonth()+1) + '.' + d.getFullYear() + ' ' + d.getHours().toString().padStart(2,'0') + ':' + d.getMinutes().toString().padStart(2,'0');
                        return `<tr><td>${timeStr}</td><td>${s.artist}</td><td style="font-weight:bold;">${s.title}</td><td><button class="action-btn ${s.excluded ? 'btn-info' : 'btn-delete'}" onclick="toggleSongExclude('${s.id}')">${s.excluded ? 'Vrátit do hitparády' : 'Vyřadit z hitparády'}</button></td></tr>`;
                    }).join('');
                    const pagEl = document.getElementById('songs-pagination');
                    if (pagEl) {
                        let html = '';
                        let sPage = Math.max(1, page - 4); let ePage = Math.min(totalPages, page + 4);
                        if (sPage > 1) { html += `<button onclick="renderSongsPage(1)" style="padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 5px; background: rgba(0,0,0,0.2); color: #fff; cursor: pointer;">1</button>`; if (sPage > 2) html += `<span style="color:#fff; align-self:center;">...</span>`; }
                        for (let i = sPage; i <= ePage; i++) { html += `<button onclick="renderSongsPage(${i})" style="padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 5px; background: ${i === page ? 'var(--accent)' : 'rgba(0,0,0,0.2)'}; color: ${i === page ? '#000' : '#fff'}; cursor: pointer;">${i}</button>`; }
                        if (ePage < totalPages) { if (ePage < totalPages - 1) html += `<span style="color:#fff; align-self:center;">...</span>`; html += `<button onclick="renderSongsPage(${totalPages})" style="padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 5px; background: rgba(0,0,0,0.2); color: #fff; cursor: pointer;">${totalPages}</button>`; }
                        pagEl.innerHTML = html;
                    }
                }
                function renderIgnored() {
                    document.getElementById('tbody-ignored').innerHTML = allIgnoredData.map(ig => `<tr><td><strong>${ig.name}</strong></td><td>${ig.created_at || '-'}</td><td><button class="action-btn btn-info" onclick="removeIgnored('${ig.id}')">Vrátit do hitparády</button></td></tr>`).join('');
                }
                async function removeIgnored(id) { await fetch('/admin/api/ignored_songs', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: id }) }); loadSongs(); }
                async function toggleSongExclude(id) { await fetch('/admin/api/songs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'toggle_exclude', id: id }) }); loadSongs(); }
            document.getElementById('form-songs').addEventListener('submit', async (e) => { e.preventDefault(); await fetch('/admin/api/songs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ artist: document.getElementById('songArtist').value, title: document.getElementById('songTitle').value }) }); document.getElementById('form-songs').reset(); loadSongs(); });
                loadSongs();
            </script>