            <h1>Písničky na přání</h1>
            <div style="margin-bottom: 20px;">
                <button onclick="window.open('/admin/requests-studio', 'Studio', 'width=700,height=600');" style="background: linear-gradient(135deg, #b026ff 0%, #5a26ff 100%);">Otevřít zmenšené okno do studia</button>
            </div>
            <div class="glass" style="padding: 20px;">
                <table><thead><tr><th>Datum</th><th>Od koho</th><th>Písnička</th><th>Vzkaz</th><th>Akce</th></tr></thead><tbody id="tbody-requests"></tbody></table>
                <div id="reqs-pagination" style="margin-top: 15px; display: flex; flex-wrap: wrap; gap: 5px;"></div>
            </div>
            <script>
                let currentReqPage = 1; const reqsPerPage = 20; let allReqsData = [];
                async function loadRequests() { const res = await fetch('/admin/api/requests'); const json = await res.json(); allReqsData = json.data || []; allReqsData.sort((a,b) => new Date(b.created_at) - new Date(a.created_at)); renderReqsPage(currentReqPage); }
                function renderReqsPage(page) {
                    const totalPages = Math.ceil(allReqsData.length / reqsPerPage) || 1;
                    if (page > totalPages) page = totalPages; currentReqPage = page;
                    const start = (page - 1) * reqsPerPage; const end = start + reqsPerPage; const paginated = allReqsData.slice(start, end);
                    document.getElementById('tbody-requests').innerHTML = paginated.map(r => `<tr><td>${r.created_at}</td><td>${r.name}</td><td><strong>${r.song}</strong></td><td>${r.message || '-'}</td><td><button class="action-btn btn-delete" onclick="delReq('${r.id}')">Smazat</button> <button class="action-btn" style="background:#f2c94c; color:#000;" onclick="banIp('${r.ip || ''}')" title="Trvale blokovat IP adresu a smazat zprávy">BAN IP</button></td></tr>`).join('');
                    const pagEl = document.getElementById('reqs-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="renderReqsPage(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="renderReqsPage(${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="renderReqsPage(${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;
                    }
                }
                async function delReq(id) { customConfirm('Smazat?', async () => { await fetch('/admin/api/requests', { method: 'DELETE', headers: {'Content-Type':'application/json'}, body: JSON.stringify({id}) }); loadRequests(); }); }
                async function banIp(ip) { if(!ip) return alert('Neznámá IP.'); customConfirm('Trvale zablokovat tuto IP adresu pro zasílání přání?', async () => { await fetch('/admin/api/ban-ip', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ip}) }); loadRequests(); if(typeof loadBanned === 'function') loadBanned(); }); }
                loadRequests();
            </script>
            
            <div class="glass" style="padding: 20px; margin-top: 20px;">
                <h3>Zablokované IP adresy pro posílání přání</h3>
                <table><thead><tr><th>IP Adresa</th><th>Datum bloku</th><th>Akce</th></tr></thead><tbody id="tbody-banned"></tbody></table>
            </div>
            <script>
                async function loadBanned() { const res = await fetch('/admin/api/banned_ips'); const json = await res.json(); const b = document.getElementById('tbody-banned'); if(b) b.innerHTML = (json.data || []).map(x => `<tr><td>${x.ip}</td><td>${x.banned_at || '-'}</td><td><button class="action-btn btn-info" onclick="unbanIp('${x.id}')">Odblokovat</button></td></tr>`).join(''); }
                async function unbanIp(id) { await fetch('/admin/api/banned_ips', {method:'DELETE', headers: {'Content-Type':'application/json'}, body: JSON.stringify({id})}); loadBanned(); }
                loadBanned();
            </script>