            <h1>Kalendář a plánovač směn</h1>
            <div class="glass" style="padding: 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px;">
                <label for="datePicker" style="font-weight:bold;">Zvolte den:</label> <input type="date" id="datePicker"> <button onclick="loadCalendar()">Načíst směny</button>
            </div>
            <div class="glass" style="padding: 20px;">
                <table><thead><tr><th style="width: 100px;">Hodina</th><th>Moderátoři (ON-AIR)</th><th style="width: 150px;">Akce</th></tr></thead><tbody id="calendarTableBody"></tbody></table>
            </div>
            <div class="modal-overlay" id="shiftModal">
                <div class="modal-content">
                    <h3 id="modalTitle">Přiřadit moderátory</h3><input type="hidden" id="modalHour">
                    <div class="checkbox-group" id="modalModeratorsList"></div>
                    <div style="margin-top:15px; border-top:1px solid rgba(255,255,255,0.2); padding-top:10px;">
                        <label style="display:block; margin-bottom:5px;">Aplikovat i pro další hodiny (Hromadné přiřazení):</label>
                        <select id="modalEndHour" style="width:100%;"></select>
                    </div>
                    <div style="display:flex; gap:10px; justify-content: flex-end;"><button type="button" onclick="closeModal()" style="background: rgba(255,255,255,0.2);">Zrušit</button> <button type="button" onclick="saveShift()">Uložit směnu</button></div>
                </div>
            </div>
            <script>
                let allModerators = []; let currentShifts = []; const today = new Date(); const yyyy = today.getFullYear(); const mm = String(today.getMonth() + 1).padStart(2, '0'); const dd = String(today.getDate()).padStart(2, '0'); document.getElementById('datePicker').value = `${yyyy}-${mm}-${dd}`;
                async function initCalendar() { const resMod = await fetch('/admin/api/moderators'); const jsonMod = await resMod.json(); allModerators = jsonMod.data || []; loadCalendar(); }
                async function loadCalendar() {
                    const date = document.getElementById('datePicker').value; if(!date) return;
                    const resShifts = await fetch('/admin/api/calendar'); const jsonShifts = await resShifts.json(); currentShifts = (jsonShifts.data || []).filter(s => s.date === date);
                    const tbody = document.getElementById('calendarTableBody'); tbody.innerHTML = '';
                    for(let h = 0; h < 24; h++) {
                        const hourFormatted = h.toString().padStart(2, '0') + ':00 - ' + (h+1).toString().padStart(2, '0') + ':00';
                        const shift = currentShifts.find(s => parseInt(s.hour) === h); let modNames = '<span style="color:#b026ff; font-weight: bold;">🤖 DJ Autopilot</span>';
                        if (shift && shift.moderator_ids && shift.moderator_ids.length > 0) { modNames = shift.moderator_ids.map(id => { const m = allModerators.find(x => x.id === id); return m ? m.name : 'Neznámý'; }).join(', '); }
                        tbody.innerHTML += `<tr><td style="font-weight:bold;">${hourFormatted}</td><td>${modNames}</td><td><button class="action-btn" onclick="openModal(${h})">Spravovat</button></td></tr>`;
                    }
                }
                function openModal(hour) {
                    const date = document.getElementById('datePicker').value; document.getElementById('modalTitle').innerText = `Směna ${date} v ${hour}:00`; document.getElementById('modalHour').value = hour;
                    const shift = currentShifts.find(s => parseInt(s.hour) === hour); const selectedIds = shift ? shift.moderator_ids : [];
                    const list = document.getElementById('modalModeratorsList'); list.innerHTML = '';
                    allModerators.forEach(mod => { if(!mod.active) return; const checked = selectedIds.includes(mod.id) ? 'checked' : ''; list.innerHTML += `<label><input type="checkbox" value="${mod.id}" ${checked}> ${mod.name}</label>`; });
                    if(list.innerHTML === '') list.innerHTML = 'Žádný aktivní moderátor k dispozici.';
                    const endHourSelect = document.getElementById('modalEndHour'); endHourSelect.innerHTML = '';
                    for(let i = hour; i < 24; i++) { endHourSelect.innerHTML += `<option value="${i}">Až do ${i.toString().padStart(2, '0')}:59</option>`; }
                    const modal = document.getElementById('shiftModal');
                    document.body.appendChild(modal); // Vyjmutí z rolovacího bloku pro správné centrování
                    modal.style.display = 'flex';
                }
                function closeModal() { document.getElementById('shiftModal').style.display = 'none'; }
                async function saveShift() {
                    const date = document.getElementById('datePicker').value; const hour = document.getElementById('modalHour').value;
                    const checkboxes = document.querySelectorAll('#modalModeratorsList input[type="checkbox"]:checked'); const moderator_ids = Array.from(checkboxes).map(cb => cb.value);
                    const endHour = parseInt(document.getElementById('modalEndHour').value);
                    for(let h = parseInt(hour); h <= endHour; h++) { await fetch('/admin/api/calendar', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ date, hour: h, moderator_ids }) }); }
                    closeModal(); loadCalendar();
                }
                initCalendar();
            </script>