            <h1>Systémový Log Aktivit</h1>
            <div class="glass" style="padding: 20px;">
                <table><thead><tr><th style="width:160px;">Datum a Čas</th><th>Uživatel</th><th>Role</th><th>Akce</th><th>Detaily</th></tr></thead><tbody id="tbody-activity"></tbody></table>
                <div id="activity-pagination" style="margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;"></div>
            </div>
            <script>
                let currentActPage = 1; const actPerPage = 50; let allActData = [];
                async function loadActivity() { const res = await fetch('/admin/api/activity_log'); const json = await res.json(); allActData = json.data || []; renderActPage(currentActPage); }
                function renderActPage(page) {
                    const totalPages = Math.ceil(allActData.length / actPerPage) || 1; if (page > totalPages) page = totalPages; currentActPage = page; const start = (page - 1) * actPerPage; const end = start + actPerPage; const paginated = allActData.slice(start, end);
                    document.getElementById('tbody-activity').innerHTML = paginated.map(l => `<tr><td>${l.created_at || ''}</td><td style="font-weight:bold; color:var(--accent);">${l.user}</td><td>${l.role}</td><td style="font-weight:bold;">${l.action}</td><td style="color:var(--text-muted);">${l.details}</td></tr>`).join('');
                    const pagEl = document.getElementById('activity-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="renderActPage(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="renderActPage(${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="renderActPage(${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; }
                }
                loadActivity();
            </script>