            <h1>Stránky a Články</h1>
            <div style="margin-bottom: 20px;">
                <button onclick="openPageModal()">➕ Přidat článek / stránku</button>
            </div>
            <div class="modal-overlay" id="pageModal">
                <div class="modal-content" style="width: 900px; max-height: 90vh; overflow-y: auto;">
                    <div style="display:flex; justify-content:space-between; align-items:center;">
                        <h3>Přidat / Upravit článek</h3>
                        <button type="button" onclick="autoTranslatePageAI()" style="background: linear-gradient(135deg, #b026ff 0%, #5a26ff 100%);">🤖 Hromadně přeložit pomocí AI</button>
                    </div>
                    <form id="form-pages" class="form-group" style="flex-wrap: wrap; margin-top:15px;">
                        <input type="hidden" id="pageId">
                        <label style="width:100%; margin-top: 10px; display:flex; align-items:center; gap:5px;"><input type="checkbox" id="pageIsHome"> Nastavit jako Hlavní stranu (Domů)</label>
                        <label style="width:100%; margin-top: 10px;">Obrázek: <input type="file" id="pageImage" accept="image/*" style="width:100%; border: 1px solid var(--glass-border); padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.2);"></label> <div id="pageImagePreview" style="width:100%; margin-bottom:10px;"></div>
                        <label style="width:100%; margin-top: 10px;">Připojit vlastní formulář (volitelné): 
                            <select id="pageFormId" style="width:100%; border: 1px solid var(--glass-border); padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.2); color:#fff;">
                                <option value="">-- Bez formuláře --</option>
                            </select>
                        </label>
                        
                        <div style="width:100%; margin-top:10px;">
                            <div id="pageLangTabs" style="display:flex; gap:2px; overflow-x:auto; margin-bottom:10px; border-bottom:1px solid var(--glass-border); padding-top:10px;">
                                <?php foreach($sysLangs as $k => $v): ?>
                                    <div class="lang-tab-btn" data-lang="<?php echo $k; ?>" onclick="switchPageLang('<?php echo $k; ?>')" style="display:flex; flex-direction:column; align-items:center; gap:2px; padding: 5px; cursor:pointer;"><img src="https://flagcdn.com/w20/<?php echo $flagCodes[$k]; ?>.png" style="width:20px; border-radius:2px;"> <span style="font-size:0.75rem;"><?php echo $v; ?></span></div>
                                <?php endforeach; ?>
                            </div>
                            <div id="pageLangContents">
                                <?php foreach($sysLangs as $k => $v): ?>
                                    <div class="page-lang-content" id="lang-content-<?php echo $k; ?>" style="display: none; width:100%;">
                                        <div style="display:flex; gap:10px; margin-bottom:10px;"><input type="text" id="pageTitle_<?php echo $k; ?>" placeholder="Titulek (<?php echo $v; ?>)" style="flex:1;"> <input type="text" id="pageSlug_<?php echo $k; ?>" placeholder="URL slug (<?php echo $v; ?>)" style="flex:1;"></div>
                                        <textarea id="pageContent_<?php echo $k; ?>" class="tinymce" rows="15" placeholder="Obsah (<?php echo $v; ?>)" style="width:100%;"></textarea>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <div style="width: 100%; margin-top: 10px; display: flex; gap: 10px;">
                            <button type="submit">Uložit</button> <button type="button" onclick="closePageModal()" style="background: rgba(255,255,255,0.2);">Zrušit</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-overlay" id="progressModal" style="z-index:9999;">
                <div class="modal-content" style="width:400px; text-align:center;">
                    <h3 id="progressTitle" style="color:var(--accent);">AI Překladač</h3>
                    <p id="progressText" style="margin: 10px 0;">Připravuji překlady...</p>
                    <div style="width: 100%; background: rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden; height: 20px; margin-top: 15px;">
                        <div id="progressBar" style="width: 0%; height: 100%; background: linear-gradient(135deg, #b026ff 0%, #5a26ff 100%); transition: width 0.3s ease;"></div>
                    </div>
                </div>
            </div>
            <div class="glass" style="padding: 20px;"><table><thead><tr><th>Titulek</th><th>URL</th><th>Akce</th></tr></thead><tbody id="tbody-pages"></tbody></table></div>
            <script>
                const sysLangsKeys = <?php echo json_encode(array_keys($sysLangs)); ?>;
                function switchPageLang(lang) {
                    document.querySelectorAll('.page-lang-content').forEach(el => el.style.display = 'none');
                    document.getElementById('lang-content-' + lang).style.display = 'block';
                    document.querySelectorAll('.lang-tab-btn').forEach(el => { el.style.background = 'rgba(0,0,0,0.2)'; el.style.color = '#fff'; });
                    const btn = document.querySelector(`.lang-tab-btn[data-lang="${lang}"]`);
                    if (btn) { btn.style.background = 'var(--accent)'; btn.style.color = '#000'; }
                }
                function openPageModal() { document.getElementById('pageModal').style.display = 'flex'; switchPageLang('cs'); }
                function closePageModal() { document.getElementById('pageModal').style.display = 'none'; document.getElementById('form-pages').reset(); document.getElementById('pageId').value=''; document.getElementById('pageIsHome').checked=false; document.getElementById('pageImagePreview').innerHTML=''; sysLangsKeys.forEach(l => setTinyContent('pageContent_'+l, '')); }
                let allPagesData = [];
                let allFormsData = [];
                async function loadPages() { 
                    try { const resF = await fetch('/admin/api/forms'); const jsonF = await resF.json(); allFormsData = jsonF.data || []; } catch(e){}
                    const fSelect = document.getElementById('pageFormId');
                    fSelect.innerHTML = '<option value="">-- Bez formuláře --</option>' + allFormsData.map(f => `<option value="${f.id}">${f.name}</option>`).join('');
                    
                    const res = await fetch('/admin/api/pages'); const json = await res.json(); 
                    if (!json.data) { document.getElementById('tbody-pages').innerHTML = '<tr><td colspan="3">Žádná data k dispozici.</td></tr>'; return; }
                    allPagesData = json.data; 
                    document.getElementById('tbody-pages').innerHTML = allPagesData.map((p, i) => `<tr><td>${p.title || (p.translations && p.translations.cs ? p.translations.cs.title : '')} ${p.is_home ? '<span style="font-size:0.8rem; background:var(--accent); color:#000; padding:2px 5px; border-radius:4px; margin-left:5px;">DOMŮ</span>' : ''}</td><td>/clanek/${p.slug || (p.translations && p.translations.cs ? p.translations.cs.slug : '')}</td><td><button class="action-btn" onclick="editPage(${i})">Upravit</button><button class="action-btn btn-delete" onclick="delPage('${p.id}')">Smazat</button></td></tr>`).join(''); 
                }
                function editPage(idx) { 
                    const p = allPagesData[idx];
                    document.getElementById('pageId').value = p.id; 
                    document.getElementById('pageIsHome').checked = p.is_home === true; 
                    document.getElementById('pageImagePreview').innerHTML = p.image ? `<img src="/${p.image}" style="max-height:100px; border-radius:8px;">` : ''; 
                    document.getElementById('pageFormId').value = p.form_id || '';
                    sysLangsKeys.forEach(l => {
                        document.getElementById('pageTitle_'+l).value = (p.translations && p.translations[l] ? p.translations[l].title : (l === 'cs' ? p.title : ''));
                        document.getElementById('pageSlug_'+l).value = (p.translations && p.translations[l] ? p.translations[l].slug : (l === 'cs' ? p.slug : ''));
                        setTinyContent('pageContent_'+l, (p.translations && p.translations[l] ? p.translations[l].content : (l === 'cs' ? p.content : '')));
                    });
                    openPageModal(); 
                }
                async function delPage(id) { customConfirm('Smazat tento článek?', async () => { await fetch('/admin/api/pages', { method: 'DELETE', headers: {'Content-Type':'application/json'}, body: JSON.stringify({id}) }); loadPages(); }); }
                document.getElementById('form-pages').addEventListener('submit', async (e) => { e.preventDefault(); const fileInput = document.getElementById('pageImage'); 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('pageId').value, is_home: document.getElementById('pageIsHome').checked, form_id: document.getElementById('pageFormId').value, translations: {} }; 
                    sysLangsKeys.forEach(l => { payload.translations[l] = { title: document.getElementById('pageTitle_'+l).value, slug: document.getElementById('pageSlug_'+l).value, content: getTinyContent('pageContent_'+l) }; });
                    payload.title = payload.translations['cs'].title; payload.slug = payload.translations['cs'].slug; payload.content = payload.translations['cs'].content;
                    if (base64) payload.image_base64 = base64; 
                    await fetch('/admin/api/pages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); closePageModal(); loadPages(); 
                });
                
                async function autoTranslatePageAI() {
                    const tCs = document.getElementById('pageTitle_cs').value;
                    const cCs = getTinyContent('pageContent_cs');
                    if (!tCs || !cCs) return customAlert('Nejprve vyplňte Titulek a Obsah v záložce Čeština.');
                    
                    const targetLangs = sysLangsKeys.filter(l => {
                        if (l === 'cs') return false;
                        const hasTitle = document.getElementById('pageTitle_'+l).value.trim() !== '';
                        const hasContent = getTinyContent('pageContent_'+l).trim() !== '';
                        return !(hasTitle || hasContent); // Skryje jazyk, pokud uz obsahuje nejaky text
                    });
                    if (targetLangs.length === 0) return customAlert('Nejsou zapnuty žádné další jazyky pro překlad, nebo již obsahují text.');
                    
                    const btn = document.querySelector('button[onclick="autoTranslatePageAI()"]');
                    const origText = btn.innerHTML;
                    btn.innerHTML = '⏳ Překládám, prosím čekejte...';
                    btn.disabled = true;
                    
                    const pModal = document.getElementById('progressModal');
                    const pBar = document.getElementById('progressBar');
                    const pText = document.getElementById('progressText');
                    pModal.style.display = 'flex'; pBar.style.width = '0%';
                    
                    let successCount = 0; let hasError = false;
                    try {
                        for (let i = 0; i < targetLangs.length; i++) {
                            const lang = targetLangs[i];
                            pText.innerText = `Překládám do jazyka: ${lang.toUpperCase()} (${i+1} z ${targetLangs.length})`;
                            pBar.style.width = `${((i) / targetLangs.length) * 100}%`;
                            const res = await fetch('/admin/api/ai-translate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: tCs, content: cCs, langs: [lang] }) });
                            const textResponse = await res.text();
                            try {
                                const json = JSON.parse(textResponse);
                                if (json.status === 'error') { customAlert(`Chyba překladače pro jazyk ${lang}:\n\n${json.message || 'Neznámá chyba.'}\n\nPráce na předchozích jazycích (pokud nějaké byly) se zachovala. Okno nyní můžete zavřít a aktuální stav uložit.`, 'Chyba'); hasError = true; break; } 
                                else { const data = json.data; if (data[lang]) { document.getElementById('pageTitle_'+lang).value = data[lang].title || ''; document.getElementById('pageSlug_'+lang).value = data[lang].slug || ''; setTinyContent('pageContent_'+lang, data[lang].content || ''); successCount++; } }
                            } catch (e) { customAlert(`AI nedokončila generování (Pravděpodobně text přesáhl limit).\n\nPráce na předchozích jazycích (pokud nějaké byly) se zachovala. Okno můžete zavřít a článek uložit.\n\nSurová odpověď ze serveru:\n\n${textResponse}`, 'Chyba komunikace'); hasError = true; break; }
                        }
                    } catch (e) { customAlert('Nastala chyba při komunikaci s překladačem (síťová chyba). Zkontrolujte připojení k internetu.', 'Síťová chyba'); hasError = true; }
                    
                    pBar.style.width = '100%';
                    setTimeout(() => {
                        pModal.style.display = 'none'; btn.innerHTML = origText; btn.disabled = false;
                        if (!hasError && successCount > 0) { customAlert('Hromadný překlad dokončen! Zkontrolujte záložky a uložte článek.', 'Hotovo'); }
                    }, 500);
                }
                
                loadPages();
            </script>