            <h1>Správa moderátorů</h1>
            <div style="margin-bottom: 20px;">
                <button onclick="openModModal()">➕ Přidat moderátora</button>
            </div>
            <div class="modal-overlay" id="modModal">
                <div class="modal-content" style="width: 700px; max-height: 90vh; overflow-y: auto;">
                    <h3>Přidat / Upravit moderátora</h3>
                    <form id="moderatorForm" class="form-group" style="flex-wrap: wrap;">
                        <input type="hidden" id="modId"> <input type="text" id="modName" placeholder="Jméno moderátora" required style="width:28%;"> <input type="email" id="modEmail" placeholder="E-mail (Login)" required style="width:28%;"> <div style="width:20%;"><div class="pwd-wrapper"><input type="password" id="modPassword" placeholder="Heslo pro přístup"><button type="button" class="pwd-toggle" onclick="togglePwd('modPassword', this)">👁️</button></div></div> <label style="width:18%;"><input type="checkbox" id="modActive" checked> Aktivní</label>
                        <label style="width:100%;">Fotka moderátora: <input type="file" id="modPhoto" accept="image/*" style="width:100%;"></label> <div id="modPhotoPreview" style="width:100%;"></div>
                        <textarea id="modShortDesc" class="tinymce" rows="3" placeholder="Krátký popis (zobrazí se v ON-AIR boxu na webu)" style="width:100%;"></textarea>
                        <textarea id="modLongDesc" class="tinymce" rows="5" placeholder="Detailní popis (pro profil moderátora)" style="width:100%;"></textarea>
                        <div style="width: 100%; margin-top: 10px; display: flex; gap: 10px;">
                            <button type="submit">Uložit</button> <button type="button" onclick="closeModModal()" style="background: rgba(255,255,255,0.2);">Zrušit</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="glass" style="padding: 20px;">
                <table><thead><tr><th style="width:50px; text-align:center;">Foto</th><th>Jméno</th><th>E-mail</th><th>Stav</th><th>Akce</th></tr></thead><tbody id="moderatorsTableBody"><tr><td colspan="5">Načítám...</td></tr></tbody></table>
            </div>
            <script>
                function openModModal() { document.getElementById('modModal').style.display = 'flex'; }
                function closeModModal() { document.getElementById('modModal').style.display = 'none'; resetForm(); }
                async function loadModerators() {
                    const res = await fetch('/admin/api/moderators'); const json = await res.json(); const tbody = document.getElementById('moderatorsTableBody'); tbody.innerHTML = '';
                    if(json.data.length === 0) { tbody.innerHTML = '<tr><td colspan="5">Žádní moderátoři k dispozici.</td></tr>'; return; }
                    json.data.forEach(mod => { 
                        const delBtn = mod.is_autopilot ? '' : `<button class="action-btn btn-delete" onclick="deleteModerator('${mod.id}')">Smazat</button>`; 
                        const avatar = mod.photo ? `<img src="/${mod.photo}" style="width:30px;height:30px;border-radius:50%;object-fit:cover;vertical-align:middle;">` : (mod.is_autopilot ? '🤖' : '👤');
                        tbody.innerHTML += `<tr><td style="text-align:center;">${avatar}</td><td>${mod.name}</td><td>${mod.email || '-'}</td><td>${mod.active ? '🟢 Aktivní' : '🔴 Neaktivní'}</td><td><a href="/admin/moderator-profile/${mod.id}" class="action-btn btn-info">Karta</a> <button class="action-btn" onclick='editModerator(${JSON.stringify(mod).replace(/'/g, "\\'")})'>Upravit</button> ${delBtn}</td></tr>`; 
                    });
                }
                document.getElementById('moderatorForm').addEventListener('submit', async (e) => { e.preventDefault(); const fileInput = document.getElementById('modPhoto'); let base64 = null; if (fileInput.files.length > 0) { base64 = await new Promise(resolve => { const reader = new FileReader(); reader.onload = e => resolve(e.target.result); reader.readAsDataURL(fileInput.files[0]); }); } const payload = { id: document.getElementById('modId').value, name: document.getElementById('modName').value, email: document.getElementById('modEmail').value, password: document.getElementById('modPassword').value, active: document.getElementById('modActive').checked, short_desc: getTinyContent('modShortDesc'), long_desc: getTinyContent('modLongDesc') }; if (base64) payload.photo_base64 = base64; await fetch('/admin/api/moderators', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); closeModModal(); loadModerators(); });
                async function deleteModerator(id) { customConfirm('Opravdu smazat tohoto moderátora?', async () => { await fetch('/admin/api/moderators', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: id }) }); loadModerators(); }); }
                function editModerator(mod) { document.getElementById('modId').value = mod.id; document.getElementById('modName').value = mod.name; document.getElementById('modEmail').value = mod.email || ''; document.getElementById('modPassword').value = ''; document.getElementById('modActive').checked = mod.active; setTinyContent('modShortDesc', mod.short_desc); setTinyContent('modLongDesc', mod.long_desc); document.getElementById('modPhotoPreview').innerHTML = mod.photo ? `<img src="/${mod.photo}" style="max-height:100px; border-radius:8px; margin-top:10px;">` : ''; openModModal(); }
                function resetForm() { document.getElementById('modId').value = ''; document.getElementById('moderatorForm').reset(); document.getElementById('modPassword').value = ''; setTinyContent('modShortDesc', ''); setTinyContent('modLongDesc', ''); document.getElementById('modPhotoPreview').innerHTML = ''; }
                loadModerators();
            </script>