{{define "layout_start"}}
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Title}} — Felhom.eu</title>
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <link rel="stylesheet" href="/static/style.css">
    <meta name="csrf-token" content="{{.CSRFToken}}">
    <script>
    function csrfHeaders(){var el=document.querySelector('meta[name="csrf-token"]');return el?{'X-CSRF-Token':el.content}:{};}
    function showAlert(msg){var o=document.createElement('div');o.className='modal-overlay';o.id='alert-modal';o.addEventListener('click',function(e){if(e.target===o)o.remove();});var c=document.createElement('div');c.className='modal-card';c.innerHTML='<h3>Üzenet</h3><pre style="white-space:pre-wrap;word-break:break-word;background:var(--bg-2);padding:.75rem;border-radius:.375rem;font-size:.85rem;max-height:60vh;overflow-y:auto;user-select:text;cursor:text">'+msg.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')+'</pre><div class="modal-actions"><button class="btn btn-primary" onclick="document.getElementById(\'alert-modal\').remove()">OK</button></div>';o.appendChild(c);document.body.appendChild(o);}
    </script>
</head>
<body>
    {{template "icon_sprite"}}
    <nav class="sidebar">
        <div class="sidebar-header">
            <img src="/static/felhom-logo.svg" alt="Felhom.eu" class="sidebar-logo">
            <span class="customer-name">{{.CustomerName}}</span>
        </div>
        <ul class="nav-links">
            <li><a href="/" class="{{if eq .Page "dashboard"}}active{{end}}"><svg class="ico"><use href="#i-layout-grid"/></svg>Vezérlőpult</a></li>
            <li><a href="/stacks" class="{{if eq .Page "stacks"}}active{{end}}"><svg class="ico"><use href="#i-cloud"/></svg>Alkalmazások</a></li>
            <li><a href="/storage" class="{{if or (eq .Page "storage") (eq .Page "storage-network")}}active{{end}}"><svg class="ico"><use href="#i-hard-drive"/></svg>Tárhely</a>
                <ul class="nav-links nav-links-sub nav-links-nested">
                    <li><a href="/storage" class="{{if eq .Page "storage"}}active{{end}}">Meghajtók</a></li>
                    <li><a href="/storage/network" class="{{if eq .Page "storage-network"}}active{{end}}">Hálózati tárhely</a></li>
                </ul>
            </li>
            <li><a href="/backups" class="{{if eq .Page "backups"}}active{{end}}"><svg class="ico"><use href="#i-shield"/></svg>Biztonsági mentés</a></li>
            <li><a href="/monitoring" class="{{if eq .Page "monitoring"}}active{{end}}"><svg class="ico"><use href="#i-cpu"/></svg>Rendszermonitor</a></li>
            {{if .DebugMode}}<li><a href="/debug" class="{{if eq .Page "debug"}}active{{end}}"><svg class="ico"><use href="#i-wrench"/></svg>Debug</a></li>{{end}}
        </ul>
        <div class="sidebar-bottom">
            <div class="nav-group-label">Beállítások</div>
            <ul class="nav-links nav-links-sub">
                <li><a href="/settings" class="{{if eq .Page "settings"}}active{{end}}"><svg class="ico"><use href="#i-settings"/></svg>Rendszer</a></li>
                <li><a href="/settings/notifications" class="{{if eq .Page "settings-notifications"}}active{{end}}"><svg class="ico"><use href="#i-bell"/></svg>Értesítések</a></li>
                <li><a href="/settings/security" class="{{if eq .Page "settings-security"}}active{{end}}"><svg class="ico"><use href="#i-lock"/></svg>Biztonság és hozzáférés</a></li>
            </ul>
            <div class="sidebar-footer">
                <span class="version">{{.Version}}</span>
                {{if .AuthEnabled}}<a href="/logout" class="logout-link">Kijelentkezés ↗</a>{{end}}
            </div>
        </div>
    </nav>
    <main class="content">
{{if .Alerts}}
<div class="alerts-container">
    {{range .Alerts}}
    {{if and (not .Inline) (or (not .PageOnly) (pageMatch .PageOnly $.Page))}}
    <div class="alert-banner alert-banner-{{.Level}}">
        <span class="alert-icon"><svg class="ico">{{if eq .Level "error"}}<use href="#i-triangle-alert"/>{{else if eq .Level "warning"}}<use href="#i-triangle-alert"/>{{else}}<use href="#i-info"/>{{end}}</svg></span>
        <span class="alert-message">{{.Message}}</span>
        {{if .Link}}<a href="{{.Link}}" class="alert-link">{{.LinkText}} →</a>{{end}}
    </div>
    {{end}}
    {{end}}
</div>
{{end}}
{{end}}

{{define "layout_end"}}
    </main>
    <script>
    document.addEventListener('click', function(e) {
        if (e.target.closest('a, button, .btn, input, select, textarea, .stack-actions, .stack-detail-actions')) return;
        var card = e.target.closest('[data-href]');
        if (card) window.location.href = card.dataset.href;
    });
    async function checkBeforeDeploy(e, name) {
        try {
            var resp = await fetch('/api/stacks/' + name);
            var data = await resp.json();
            if (data.ok && data.data && data.data.deployed) {
                e.preventDefault();
                showAlert('Ez az alkalmazás már telepítve van.');
                window.location.reload();
                return false;
            }
        } catch(err) {}
        return true;
    }
    async function syncTemplates() {
        const btn = document.getElementById('sync-btn');
        const toast = document.getElementById('sync-toast');
        if (!btn) return;
        const origText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '↻ Frissítés...';
        btn.classList.add('loading');
        try {
            const resp = await fetch('/api/sync', {
                method: 'POST',
                headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders())
            });
            const data = await resp.json();
            if (toast) {
                toast.textContent = data.ok ? (data.message || 'Sablonok frissítve') : ('Hiba: ' + (data.error || 'Ismeretlen hiba'));
                toast.className = 'sync-toast ' + (data.ok ? 'sync-toast-ok' : 'sync-toast-err');
                toast.style.display = 'block';
                setTimeout(function() { toast.style.display = 'none'; }, 5000);
            }
            if (data.ok && data.data && (data.data.new_apps && data.data.new_apps.length > 0 || data.data.updated && data.data.updated.length > 0)) {
                setTimeout(function() { window.location.reload(); }, 1500);
            }
        } catch (err) {
            if (toast) {
                toast.textContent = 'Hálózati hiba: ' + err.message;
                toast.className = 'sync-toast sync-toast-err';
                toast.style.display = 'block';
                setTimeout(function() { toast.style.display = 'none'; }, 5000);
            }
        }
        btn.innerHTML = origText;
        btn.disabled = false;
        btn.classList.remove('loading');
    }
    async function stackAction(event, name, action) {
        const btn = event.currentTarget;
        const origText = btn.textContent;
        btn.disabled = true;
        btn.textContent = 'Folyamatban...';
        btn.classList.add('loading');
        try {
            const resp = await fetch('/api/stacks/' + name + '/' + action, {
                method: 'POST',
                headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders())
            });
            const data = await resp.json();
            if (!data.ok) {
                showAlert('Hiba: ' + (data.error || 'Ismeretlen hiba'));
                btn.textContent = origText;
                btn.disabled = false;
                btn.classList.remove('loading');
                return;
            }
            window.location.reload();
        } catch (err) {
            showAlert('Hálózati hiba: ' + err.message);
            btn.textContent = origText;
            btn.disabled = false;
            btn.classList.remove('loading');
        }
    }
    async function deleteOrphanStack(name) {
        var modal = document.createElement('div');
        modal.className = 'modal-overlay';
        modal.id = 'delete-modal';
        modal.innerHTML = '<div class="modal-card"><h3>Betöltés...</h3></div>';
        modal.addEventListener('click', function(e) { if (e.target === modal) closeDeleteModal(); });
        document.body.appendChild(modal);
        try {
            var resp = await fetch('/api/stacks/' + name + '/hdd-data');
            var data = await resp.json();
            var hddInfo = '';
            var checkboxHTML = '';
            if (data.ok && data.data && data.data.has_hdd_data) {
                hddInfo = '<div class="modal-hdd-info"><strong>Felhasználói adatok a merevlemezen:</strong>';
                data.data.hdd_paths.forEach(function(p) {
                    hddInfo += '<div class="modal-hdd-path">' + p.path + ' (' + (p.exists ? p.size_human : 'nem létezik') + ')</div>';
                });
                hddInfo += '</div>';
                checkboxHTML = '<label class="modal-checkbox"><input type="checkbox" id="delete-hdd-check"> Felhasználói adatok törlése a merevlemezről</label>';
            }
            modal.querySelector('.modal-card').innerHTML =
                '<h3>Alkalmazás törlése: ' + name + '</h3>' +
                '<p style="color:var(--text-2);font-size:.9rem;margin-bottom:.75rem">Ez a művelet eltávolítja a konténereket, a köteteket és a konfigurációs fájlokat.</p>' +
                '<div class="alert alert-warning" style="margin-bottom:.75rem">Ez a művelet nem visszavonható!</div>' +
                hddInfo + checkboxHTML +
                '<div class="modal-actions">' +
                    '<button class="btn btn-outline" onclick="closeDeleteModal()">Mégsem</button>' +
                    '<button class="btn btn-danger" id="confirm-delete-btn" onclick="confirmDelete(\'' + name + '\')">Törlés</button>' +
                '</div>';
        } catch (err) {
            modal.querySelector('.modal-card').innerHTML =
                '<h3>Hiba</h3><p style="color:var(--text-2)">Nem sikerült lekérni az adatokat: ' + err.message + '</p>' +
                '<div class="modal-actions"><button class="btn btn-outline" onclick="closeDeleteModal()">Bezárás</button></div>';
        }
    }
    function closeDeleteModal() {
        var modal = document.getElementById('delete-modal');
        if (modal) modal.remove();
    }
    async function confirmDelete(name) {
        var btn = document.getElementById('confirm-delete-btn');
        var checkbox = document.getElementById('delete-hdd-check');
        var removeHDD = checkbox ? checkbox.checked : false;
        btn.disabled = true;
        btn.textContent = 'Törlés folyamatban...';
        try {
            var resp = await fetch('/api/stacks/' + name, {
                method: 'DELETE',
                headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                body: JSON.stringify({remove_hdd_data: removeHDD})
            });
            var data = await resp.json();
            if (data.ok) {
                var modal = document.getElementById('delete-modal');
                var removedInfo = '';
                if (data.data && data.data.hdd_paths_removed && data.data.hdd_paths_removed.length > 0) {
                    removedInfo = '<p style="color:var(--text-2);font-size:.85rem;margin-top:.5rem">Törölt adatok: ' + data.data.hdd_paths_removed.join(', ') + '</p>';
                }
                var preservedInfo = '';
                if (data.data && data.data.hdd_paths_preserved && data.data.hdd_paths_preserved.length > 0) {
                    preservedInfo = '<p style="color:var(--text-2);font-size:.85rem;margin-top:.5rem">Megőrzött adatok: ' + data.data.hdd_paths_preserved.join(', ') + '</p>';
                }
                modal.querySelector('.modal-card').innerHTML =
                    '<h3>Sikeresen törölve!</h3>' +
                    '<p style="color:var(--text-2)">Az alkalmazás (' + name + ') törölve lett.</p>' +
                    removedInfo + preservedInfo +
                    '<div class="modal-actions"><button class="btn btn-primary" onclick="window.location.href=\'/stacks\'">Bezárás</button></div>';
            } else {
                showAlert('Hiba: ' + (data.error || 'Ismeretlen hiba'));
                btn.disabled = false;
                btn.textContent = 'Törlés';
            }
        } catch (err) {
            showAlert('Hálózati hiba: ' + err.message);
            btn.disabled = false;
            btn.textContent = 'Törlés';
        }
    }
    async function removeStack(name) {
        var modal = document.createElement('div');
        modal.className = 'modal-overlay';
        modal.id = 'remove-modal';
        modal.innerHTML = '<div class="modal-card"><h3>Betöltés...</h3></div>';
        modal.addEventListener('click', function(e) { if (e.target === modal) closeRemoveModal(); });
        document.body.appendChild(modal);
        try {
            var [hddResp, backupResp] = await Promise.all([
                fetch('/api/stacks/' + name + '/hdd-data').then(function(r) { return r.json(); }),
                fetch('/api/stacks/' + name + '/backup-data').then(function(r) { return r.json(); })
            ]);
            var sections = '';
            // Section 1: Always removed
            sections += '<div class="modal-section">' +
                '<strong>Mindig törlődik:</strong>' +
                '<ul style="margin:.25rem 0;padding-left:1.2rem;color:var(--text-2);font-size:.85rem">' +
                '<li>Docker kötetek (adatbázis, alkalmazás konfiguráció)</li>' +
                '<li>Telepítési konfiguráció (app.yaml)</li>' +
                '<li>Másodlagos mentés ütemezése</li>' +
                '</ul></div>';
            // Section 2: HDD data
            var hddCheckbox = '';
            if (hddResp.ok && hddResp.data && hddResp.data.has_hdd_data) {
                var hddPaths = '';
                hddResp.data.hdd_paths.forEach(function(p) {
                    hddPaths += '<div class="modal-hdd-path">' + p.path + ' (' + (p.exists ? p.size_human : 'nem létezik') + ')</div>';
                });
                sections += '<div class="modal-section">' +
                    '<strong>Felhasználói adatok a merevlemezen:</strong>' + hddPaths +
                    '<label class="modal-checkbox"><input type="checkbox" id="remove-hdd-check"> Felhasználói adatok törlése</label>' +
                    '<div class="alert alert-info" style="margin-top:.5rem;font-size:.8rem" id="remove-hdd-keep-warning">' +
                    'Ha újratelepíti az alkalmazást, az adatokat újra importálnia kell, mivel az adatbázis törlődik. A megtartott adatok a továbbiakban NEM lesznek automatikusan mentve.' +
                    '</div></div>';
                hddCheckbox = '<script>document.getElementById("remove-hdd-check").addEventListener("change",function(){document.getElementById("remove-hdd-keep-warning").style.display=this.checked?"none":"";});<\/script>';
            }
            // Section 3: Backup data
            var backupCheckbox = '';
            if (backupResp.ok && backupResp.data && backupResp.data.has_backups) {
                var bkPaths = '';
                backupResp.data.backup_paths.forEach(function(p) {
                    if (p.exists) bkPaths += '<div class="modal-hdd-path">' + p.path + ' (' + p.size_human + ')</div>';
                });
                if (bkPaths) {
                    sections += '<div class="modal-section">' +
                        '<strong>Mentési adatok:</strong>' + bkPaths +
                        '<label class="modal-checkbox"><input type="checkbox" id="remove-backup-check"> Mentési adatok törlése</label>' +
                        '<div class="alert alert-info" style="margin-top:.5rem;font-size:.8rem">' +
                        'Az éjszakai restic pillanatképek nem törölhetők egyenként — a megőrzési szabályok szerint automatikusan elavulnak.' +
                        '</div></div>';
                }
            }
            modal.querySelector('.modal-card').innerHTML =
                '<h3>Alkalmazás eltávolítása: ' + name + '</h3>' +
                '<p style="color:var(--text-2);font-size:.9rem;margin-bottom:.75rem">Az alkalmazás visszaáll "Nincs telepítve" állapotba. A sablon megmarad, újratelepíthető.</p>' +
                '<div class="alert alert-warning" style="margin-bottom:.75rem">Ez a művelet nem visszavonható!</div>' +
                sections +
                '<div class="modal-actions">' +
                    '<button class="btn btn-outline" onclick="closeRemoveModal()">Mégsem</button>' +
                    '<button class="btn btn-danger" id="confirm-remove-btn" onclick="confirmRemoveStack(\'' + name + '\')">Eltávolítás</button>' +
                '</div>' + hddCheckbox;
        } catch (err) {
            modal.querySelector('.modal-card').innerHTML =
                '<h3>Hiba</h3><p style="color:var(--text-2)">Nem sikerült lekérni az adatokat: ' + err.message + '</p>' +
                '<div class="modal-actions"><button class="btn btn-outline" onclick="closeRemoveModal()">Bezárás</button></div>';
        }
    }
    function closeRemoveModal() {
        var modal = document.getElementById('remove-modal');
        if (modal) modal.remove();
    }
    async function confirmRemoveStack(name) {
        var btn = document.getElementById('confirm-remove-btn');
        var hddCheck = document.getElementById('remove-hdd-check');
        var backupCheck = document.getElementById('remove-backup-check');
        var removeHDD = hddCheck ? hddCheck.checked : false;
        var removeBackups = backupCheck ? backupCheck.checked : false;
        btn.disabled = true;
        btn.textContent = 'Eltávolítás folyamatban...';
        try {
            var resp = await fetch('/api/stacks/' + name + '/remove', {
                method: 'POST',
                headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                body: JSON.stringify({remove_hdd_data: removeHDD, remove_backups: removeBackups})
            });
            var data = await resp.json();
            if (data.ok) {
                var modal = document.getElementById('remove-modal');
                var removedInfo = '';
                if (data.data && data.data.hdd_paths_removed && data.data.hdd_paths_removed.length > 0) {
                    removedInfo += '<p style="color:var(--text-2);font-size:.85rem;margin-top:.5rem">Törölt adatok: ' + data.data.hdd_paths_removed.join(', ') + '</p>';
                }
                if (data.data && data.data.backup_paths_removed && data.data.backup_paths_removed.length > 0) {
                    removedInfo += '<p style="color:var(--text-2);font-size:.85rem;margin-top:.5rem">Törölt mentések: ' + data.data.backup_paths_removed.join(', ') + '</p>';
                }
                var preservedInfo = '';
                if (data.data && data.data.hdd_paths_preserved && data.data.hdd_paths_preserved.length > 0) {
                    preservedInfo = '<p style="color:var(--text-2);font-size:.85rem;margin-top:.5rem">Megőrzött adatok: ' + data.data.hdd_paths_preserved.join(', ') + '</p>';
                }
                modal.querySelector('.modal-card').innerHTML =
                    '<h3>Sikeresen eltávolítva!</h3>' +
                    '<p style="color:var(--text-2)">Az alkalmazás (' + name + ') eltávolítva. Újratelepíthető a Telepítés gombbal.</p>' +
                    removedInfo + preservedInfo +
                    '<div class="modal-actions"><button class="btn btn-primary" onclick="window.location.href=\'/stacks\'">Bezárás</button></div>';
            } else {
                showAlert('Hiba: ' + (data.error || 'Ismeretlen hiba'));
                btn.disabled = false;
                btn.textContent = 'Eltávolítás';
            }
        } catch (err) {
            showAlert('Hálózati hiba: ' + err.message);
            btn.disabled = false;
            btn.textContent = 'Eltávolítás';
        }
    }
    </script>
</body>
</html>
{{end}}
