felhom-controller/controller/internal/web/templates/backups.html

{{define "backups"}}
{{template "layout_start" .}}

<div class="page-header">
    <h2>Biztonsági mentés</h2>
    <span class="domain-badge">{{.Domain}}</span>
</div>

{{if .Backup}}{{if .Backup.FlashSuccess}}
<div class="flash flash-success">{{.Backup.FlashSuccess}}</div>
{{end}}{{end}}
{{if .Backup}}{{if .Backup.FlashError}}
<div class="flash flash-error">{{.Backup.FlashError}}</div>
{{end}}{{end}}
{{if .Backup}}{{if .Backup.SingleCopyWarning}}
<div class="alert alert-warning">{{.Backup.SingleCopyWarning}}</div>
{{end}}{{end}}

<!-- Part B: async restore progress banner — polls /api/backup/restore-status; neutral while running,
     red only on failure (exception-color principle). Hidden until a restore op is seen. -->
<div id="restore-banner" class="flash" style="display:none"></div>

{{if not .Backup}}
<div class="backup-empty-state">
    <div class="backup-empty-icon">&#128737;</div>
    <h3>Biztonsági mentés nincs beállítva</h3>
    <p>A biztonsági mentés funkció nem aktív.<br>
    Kérjük, vegye fel a kapcsolatot a Felhom csapattal a beállításhoz.</p>
</div>
{{else}}

<!-- Section 0: Storage overview -->
<div class="backup-section-card">
    <h3>Tárhely áttekintés</h3>
    <div class="storage-overview-grid">
        <div class="storage-bars">
            {{with $.SystemInfo}}
            <div class="storage-item meter {{usageColor .DiskPercent}}">
                <div class="storage-header">
                    <span class="storage-label">Rendszer (/)</span>
                    <span class="storage-value">{{fmtGB .DiskUsedGB}} / {{fmtGB .DiskTotalGB}} ({{printf "%.0f" .DiskPercent}}%)</span>
                </div>
                <div class="meter-track">
                    <div class="meter-fill" style="width:{{printf "%.1f" .DiskPercent}}%"></div>
                </div>
            </div>
            {{range $.StorageBars}}
            {{if .Disconnected}}
            <div class="storage-item meter meter-empty storage-disconnected">
                <div class="storage-header">
                    <span class="storage-label">{{.Label}}</span>
                    <span class="storage-value">— <span class="state-text-neutral">Leválasztva</span></span>
                </div>
                <div class="meter-track"></div>
            </div>
            {{else}}
            <div class="storage-item meter {{usageColor .Percent}}">
                <div class="storage-header">
                    <span class="storage-label">{{.Label}}</span>
                    <span class="storage-value">{{fmtGB .UsedGB}} / {{fmtGB .TotalGB}} ({{printf "%.0f" .Percent}}%)</span>
                </div>
                <div class="meter-track">
                    <div class="meter-fill" style="width:{{printf "%.1f" .Percent}}%"></div>
                </div>
            </div>
            {{end}}
            {{end}}
            {{end}}
        </div>
        <div class="storage-stats">
            <div class="storage-stat-row">
                <span class="storage-stat-label">DB mentések</span>
                <span class="storage-stat-value mono">{{if .Backup.DumpFiles}}{{len .Backup.DumpFiles}} fájl{{else}}–{{end}}</span>
            </div>
        </div>
    </div>
</div>

<!-- Section: Whole-guest (appliance) backup — agent-sourced, read-only + manual trigger -->
{{with .GuestBackup}}
<div class="backup-section-card">
    <h3>Rendszermentés (teljes mentés)</h3>
    <p class="form-hint" style="margin-bottom:1rem">A teljes szerver — alkalmazások, beállítások és adatbázisok együtt — időszakos mentése, amelyből az egész készülék visszaállítható. Ezt a host-ügynök készíti és kezeli.</p>
    {{if not .Available}}
    <div class="alert alert-info">{{.Note}}</div>
    {{else}}
    <div class="stats-grid backup-page-cards">
        <div class="stat-card {{if .HasBackup}}{{if .Success}}stat-running{{else}}stat-stopped{{end}}{{end}}">
            <div class="stat-value">{{if .HasBackup}}{{if .Success}}&#10003;{{else}}&#10007;{{end}}{{else}}–{{end}}</div>
            <div class="stat-label">Utolsó teljes mentés
                {{if .HasBackup}}<br><span class="relative-time">{{fmtTime .StartedAt}} ({{timeAgo .StartedAt}})</span>{{end}}
            </div>
        </div>
        <div class="stat-card stat-total">
            <div class="stat-value">{{if .HasBackup}}{{fmtBytes .SizeBytes}}{{else}}–{{end}}</div>
            <div class="stat-label">{{if .HasBackup}}{{.Target}}{{else}}Méret / cél{{end}}</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" style="font-size:1.15rem">{{if .Due}}Esedékes{{else}}Naprakész{{end}}</div>
            <div class="stat-label">Következő mentés
                {{if not .Due}}<br><span class="relative-time">{{.AgeHours}} órája — a mentési ablakon belül</span>{{end}}
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{if .HasRestoreTest}}{{if .RestorePass}}&#10003;{{else}}&#10007;{{end}}{{else}}–{{end}}</div>
            <div class="stat-label">Visszaállítás ellenőrizve
                {{if .HasRestoreTest}}<br><span class="relative-time">{{fmtTime .RestoreTestedAt}}</span>{{else}}<br><span class="relative-time">Még nem futott</span>{{end}}
            </div>
        </div>
    </div>
    {{if .Running}}
    <div class="alert alert-info" id="wg-running">Mentés folyamatban… (fázis: <span id="wg-phase">{{.Phase}}</span>)</div>
    {{end}}
    {{if .CanTrigger}}
    <div class="schedule-actions" style="margin-top:1rem">
        <button class="btn btn-sm btn-primary" id="wg-backup-btn" onclick="triggerGuestBackup()" {{if .Running}}disabled{{end}}>Mentés most</button>
        {{if .StopMode}}<span class="form-hint" style="margin-left:.5rem"><svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> A mentés idejére az alkalmazások rövid időre leállnak.</span>
        {{else}}<span class="form-hint" style="margin-left:.5rem">Pillanatkép-mód: az alkalmazások csak néhány másodpercre állnak le.</span>{{end}}
        <div id="wg-backup-result" style="margin-top:.6rem"></div>
    </div>
    {{end}}
    {{end}}
</div>
{{end}}

{{if .Backup}}
<!-- Off-box (NAS) backup — Part B: encrypted restic repo over SFTP (the off-site 3-2-1 leg). -->
<h3 id="offbox-section" class="backup-tier-divider">Távoli mentés (3. mentés) — titkosított, offsite</h3>
<p class="form-hint" style="margin:-0.25rem 0 1rem">Az alkalmazás-mentések titkosított másolata egy távoli tárolóra — saját NAS vagy Felhom offsite tárhely — restic + SFTP kapcsolaton. A tároló csak titkosított adatot lát. Ez a 3-2-1 szabály „1 off-site" lába — független a helyi másodpéldánytól és a teljes rendszermentéstől.</p>
<div class="card" style="margin-bottom:1.5rem">
    {{if .Offbox}}
    <div class="stats-grid backup-page-cards">
        <div class="stat-card {{if eq .Offbox.LastStatus "error"}}stat-warn{{end}}">
            <div class="stat-value" style="font-size:1.15rem">{{if eq .Offbox.LastStatus "ok"}}&#10003; Rendben{{else if eq .Offbox.LastStatus "error"}}&#10007; Hiba{{else if eq .Offbox.LastStatus "running"}}Fut…{{else}}–{{end}}</div>
            <div class="stat-label">Utolsó NAS-mentés{{if .Offbox.LastRun}}<br><span class="relative-time">{{timeAgoStr .Offbox.LastRun}}</span>{{end}}</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" style="font-size:1.15rem">{{if .Offbox.RepoSizeHuman}}{{.Offbox.RepoSizeHuman}}{{else}}–{{end}}</div>
            <div class="stat-label">Tároló méret · {{.Offbox.SnapshotCount}} pillanatkép</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" style="font-size:1.05rem">{{if .Offbox.Enabled}}{{.Offbox.User}}@{{.Offbox.Host}}{{else}}Kikapcsolva{{end}}</div>
            <div class="stat-label">{{if .Offbox.Enabled}}{{.Offbox.RepoPath}}{{else}}A NAS-mentés ki van kapcsolva{{end}}</div>
        </div>
    </div>
    {{if and .Offbox.Enabled (gt .Offbox.QuotaGB 0)}}
    <!-- SLICE 4: soft-quota usage bar (shared model; quota_gb from the hub descriptor). -->
    <div id="offbox-quota-bar" style="max-width:560px;margin:.5rem 0">
        <div class="stat-label" style="margin-bottom:.25rem">Tárhelykeret: {{if .Offbox.RepoSizeHuman}}{{.Offbox.RepoSizeHuman}}{{else}}0{{end}} / {{.Offbox.QuotaGB}} GB ({{.OffboxQuotaPct}}%)</div>
        <div style="background:var(--border,#334);border-radius:4px;height:8px;overflow:hidden">
            <div style="height:8px;border-radius:4px;width:{{.OffboxQuotaPct}}%;background:{{if ge .OffboxQuotaPct 100}}var(--crit,#e5484d){{else if ge .OffboxQuotaPct 80}}var(--warn,#f5a524){{else}}var(--ok,#30a46c){{end}}"></div>
        </div>
    </div>
    {{end}}
    {{if .Offbox.LastError}}<p class="form-hint" style="color:var(--crit)">Utolsó hiba: {{.Offbox.LastError}}</p>{{end}}
    {{if .Offbox.LastWarning}}<p class="form-hint" style="color:var(--warn)">{{.Offbox.LastWarning}}</p>{{end}}
    {{if and .OffboxConfigured (ne .Offbox.EscrowState "escrowed")}}
    <div class="card" style="border-left:3px solid var(--warn);margin:.75rem 0;padding:.75rem 1rem">
        <p class="form-hint" style="color:var(--warn);margin:0 0 .5rem">A NAS-mentés a kulcs letétbe helyezésére vár — a mentés addig nem fut (így nem keletkezik visszaállíthatatlan másolat). Futtasd a letéti szertartást, majd erősítsd meg.</p>
        <form method="POST" action="/backup/offbox/confirm-escrow" style="display:inline">{{.CSRFField}}
            <button type="submit" class="btn btn-sm">Letét megerősítése</button>
        </form>
    </div>
    {{end}}
    {{if .OffboxConfigured}}
    <div class="schedule-actions" style="margin-top:1rem">
        <form method="POST" action="/backup/offbox/run" style="display:inline">{{.CSRFField}}
            <button type="submit" class="btn btn-sm btn-primary">NAS-mentés most</button>
        </form>
    </div>
    <h4 style="margin-top:1.25rem">Mely alkalmazások mentődnek a NAS-ra?</h4>
    {{if .OffboxApps}}
    <div class="storage-paths-list">
        {{range .OffboxApps}}
        <div class="storage-path-item">
            <div class="storage-path-header">
                <div class="storage-path-info"><span class="storage-path-label">{{.DisplayName}}</span></div>
                <div class="storage-path-actions">
                    <form method="POST" action="/backup/offbox/toggle" style="display:inline">{{$.CSRFField}}
                        <input type="hidden" name="app" value="{{.Name}}">
                        <input type="hidden" name="enabled" value="{{if .Enabled}}false{{else}}true{{end}}">
                        <button type="submit" class="btn btn-xs {{if .Enabled}}btn-outline{{else}}btn-primary{{end}}">{{if .Enabled}}NAS-mentés kikapcsolása{{else}}NAS-mentés bekapcsolása{{end}}</button>
                    </form>
                    {{if .Enabled}}
                    <form method="POST" action="/backup/offbox/restore" style="display:inline" onsubmit="return confirm('Visszaállítja a(z) {{.DisplayName}} adatait a NAS-ról egy ellenőrző mappába? A meglévő adatok NEM íródnak felül.')">{{$.CSRFField}}
                        <input type="hidden" name="app" value="{{.Name}}">
                        <button type="submit" class="btn btn-xs btn-outline">Visszaállítás (ellenőrzéshez)</button>
                    </form>
                    {{end}}
                </div>
            </div>
        </div>
        {{end}}
    </div>
    {{else}}<p class="form-hint">Nincs telepített alkalmazás.</p>{{end}}
    {{end}}
    {{else}}
    <p class="form-hint">Még nincs beállítva külső NAS mentési cél.</p>
    {{end}}

    <details style="margin-top:1rem">
        <summary class="btn btn-xs btn-primary" style="cursor:pointer;display:inline-block">NAS mentési cél beállítása</summary>
        <form method="POST" action="/backup/offbox/config" style="margin-top:.75rem;padding:1rem;border:1px solid var(--border,#ddd);border-radius:6px;max-width:560px">{{.CSRFField}}
            <div class="form-row"><label>NAS címe (IP vagy hosztnév)</label><input type="text" name="host" class="form-input" value="{{if .Offbox}}{{.Offbox.Host}}{{end}}" placeholder="pl. 192.168.0.10"></div>
            <div class="form-row"><label>SSH port</label><input type="number" name="port" class="form-input" value="{{if .Offbox}}{{.Offbox.Port}}{{else}}22{{end}}"></div>
            <div class="form-row"><label>Felhasználó</label><input type="text" name="user" class="form-input" value="{{if .Offbox}}{{.Offbox.User}}{{end}}" placeholder="pl. felhom"></div>
            <div class="form-row"><label>Tároló útvonala a NAS-on</label><input type="text" name="repo_path" class="form-input" value="{{if .Offbox}}{{.Offbox.RepoPath}}{{end}}" placeholder="pl. /volume1/felhom-backup/repo"></div>
            <div class="form-row"><label><input type="checkbox" name="enabled" {{if .Offbox}}{{if .Offbox.Enabled}}checked{{end}}{{else}}checked{{end}}> Napi automatikus NAS-mentés engedélyezve</label></div>
            <div class="form-row"><label>SSH privát kulcs {{if .OffboxConfigured}}(üresen hagyva változatlan){{end}}</label>
                <textarea name="ssh_key" class="form-input" rows="4" autocomplete="off" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"></textarea>
                <span class="form-hint">A kulcsot 0600-as fájlba írjuk; sosem naplózzuk és nem tároljuk a beállításokban.</span></div>
            <div class="form-row"><label>NAS ismert-host sora (known_hosts) {{if .OffboxConfigured}}(üresen hagyva változatlan){{end}}</label>
                <textarea name="known_hosts" class="form-input" rows="2" autocomplete="off" placeholder="nas.local ssh-ed25519 AAAA…"></textarea>
                <span class="form-hint">A host-kulcs rögzítése (no blind TOFU). Lekérdezhető: <span class="mono">ssh-keyscan -p &lt;port&gt; &lt;host&gt;</span></span></div>
            <button type="submit" class="btn btn-sm btn-primary" style="margin-top:.5rem">Mentés</button>
        </form>
    </details>
</div>
{{end}}

<h3 class="backup-tier-divider">Alkalmazás-mentések (adatbázis + konfiguráció)</h3>
<p class="form-hint" style="margin:-0.25rem 0 1rem">Az egyes alkalmazások részletes, granulált mentése — adatbázis-kiírások, beállítások és alkalmazás-fájlok. A fenti teljes mentéstől függetlenül, alkalmazásonként visszaállítható.</p>

<!-- Section 1: Status overview cards -->
<div class="stats-grid backup-page-cards">
    {{if .Backup.LastDBDump}}
        {{if .Backup.LastDBDump.Success}}
            <div class="stat-card stat-running">
                <div class="stat-value">&#10003;</div>
                <div class="stat-label">Adatmentés aktív</div>
            </div>
        {{else}}
            <div class="stat-card stat-stopped">
                <div class="stat-value">&#10007;</div>
                <div class="stat-label">Adatmentés sikertelen</div>
            </div>
        {{end}}
    {{else}}
        <div class="stat-card">
            <div class="stat-value">–</div>
            <div class="stat-label">Adatmentés</div>
        </div>
    {{end}}

    {{if and .GuestBackup .GuestBackup.Offsite}}
    <div class="stat-card stat-running">
        <div class="stat-value">&#10003;</div>
        <div class="stat-label">Távoli rendszermentés<br><span class="relative-time">külön hardveren (PBS)</span></div>
    </div>
    {{else}}
    <div class="stat-card" style="border-left-color: var(--text-3);">
        <div class="stat-value" style="background:var(--text-3);-webkit-background-clip:text;background-clip:text;">–</div>
        <div class="stat-label">Távoli rendszermentés<br><span class="relative-time">nincs beállítva</span></div>
    </div>
    {{end}}

    <div class="stat-card stat-total">
        {{if eq .DBSectionState "embedded"}}
        <div class="stat-value">–</div>
        <div class="stat-label">Adatbázis mentve<br><span class="relative-time">beágyazott DB-k a kötetmentésben</span></div>
        {{else}}
        <div class="stat-value">
            {{if .Backup.LastDBDump}}{{len .Backup.LastDBDump.Results}}{{else}}{{len .Backup.DumpFiles}}{{end}}
        </div>
        <div class="stat-label">Adatbázis mentve</div>
        {{end}}
    </div>
</div>

<!-- Section 2: Schedule -->
<div class="schedule-card">
    <h3>Ütemezés</h3>
    <div class="schedule-rows">
        <div class="schedule-row">
            <span class="schedule-task">Adatbázis mentés</span>
            <span class="schedule-time">{{.Backup.DBDumpSchedule}}</span>
            <span class="schedule-next">Következő: {{nextRunLabel .Backup.NextDBDump}}</span>
        </div>
    </div>
    <div class="schedule-summary">
        {{if .Backup.LastDBDump}}
            <div class="schedule-summary-row">
                <span>Utolsó adatbázis mentés:</span>
                <span class="schedule-summary-value">{{fmtTime .Backup.LastDBDump.LastRun}} ({{timeAgo .Backup.LastDBDump.LastRun}})</span>
            </div>
        {{else}}
            <div class="schedule-summary-row">
                <span>Utolsó adatbázis mentés:</span>
                <span class="schedule-summary-value relative-time">Még nem futott</span>
            </div>
        {{end}}
    </div>
    <div class="schedule-actions">
        <button class="btn btn-sm btn-primary" onclick="triggerBackupFromPage()" id="backup-page-btn"
            {{if .Backup.Running}}disabled{{end}}>
            {{if .Backup.Running}}Mentés folyamatban...{{else}}Mentés most{{end}}
        </button>
    </div>
</div>

<!-- Section 3: Databases -->
<div class="backup-section-card">
    <h3>Adatbázisok</h3>
    {{if or .Backup.DumpFiles .Backup.DiscoveredDBs}}
    <div class="backup-table-wrap">
        <table class="db-table">
            <thead>
                <tr>
                    <th>Alkalmazás</th>
                    <th>Típus</th>
                    <th>Méret</th>
                    <th>Utolsó</th>
                    <th>Érvényesítés</th>
                    <th>Állapot</th>
                </tr>
            </thead>
            <tbody>
                {{if .Backup.LastDBDump}}
                    {{range .Backup.LastDBDump.Results}}
                    <tr>
                        <td>{{.DB.StackName}}</td>
                        <td><span class="db-type-badge db-type-{{.DB.DBType}}">{{dbTypeLabel .DB.DBType}}</span></td>
                        <td class="mono">{{if .Error}}–{{else}}{{fmtBytes .Size}}{{end}}</td>
                        <td class="mono">{{if .Error}}–{{else}}{{fmtTimeShort $.Backup.LastDBDump.LastRun}}{{end}}</td>
                        <td>
                            {{if .Error}}
                                <span class="validation-badge validation-na">–</span>
                            {{else if .Validation.Valid}}
                                <span class="validation-badge validation-ok">{{.Validation.TableCount}} tábla</span>
                            {{else if .Validation.Error}}
                                <span class="validation-badge validation-fail" title="{{.Validation.Error}}">Hiba</span>
                            {{else}}
                                <span class="validation-badge validation-na" title="Az érvényesítés nem futott le">–</span>
                            {{end}}
                        </td>
                        <td>
                            {{if .Error}}
                                <span class="validation-badge validation-fail" title="{{.Error}}">Hiba</span>
                            {{else}}
                                <span class="validation-badge validation-ok">OK</span>
                            {{end}}
                        </td>
                    </tr>
                    {{end}}
                {{else}}
                    {{range .Backup.DumpFiles}}
                    <tr>
                        <td>{{.StackName}}</td>
                        <td><span class="db-type-badge db-type-{{.DBType}}">{{dbTypeLabel .DBType}}</span></td>
                        <td class="mono">{{fmtBytes .Size}}</td>
                        <td class="mono">{{fmtTimeShort .ModTime}}</td>
                        <td>
                            {{if .Validation.Valid}}
                                <span class="validation-badge validation-ok">{{.Validation.TableCount}} tábla</span>
                            {{else if .Validation.Error}}
                                <span class="validation-badge validation-fail" title="{{.Validation.Error}}">Hiba</span>
                            {{else}}
                                <span class="validation-badge validation-na">–</span>
                            {{end}}
                        </td>
                        <td><span class="validation-badge validation-ok">OK</span></td>
                    </tr>
                    {{end}}
                {{end}}
            </tbody>
        </table>
    </div>
    {{else if eq .DBSectionState "pending"}}
    <div class="backup-table-empty">Még nem készült adatbázis-mentés — az első ütemezett mentés éjjel fut le.</div>
    {{else}}
    <div class="backup-table-empty">A telepített alkalmazások beágyazott adatbázist használnak (pl. SQLite) — adatbázisuk a fájl- és kötetmentés része, külön adatbázis-kiírás nem szükséges.</div>
    {{end}}
</div>

<!-- Section 4: Unified per-app backup status -->
{{if .Backup.AppDataInfo}}
<div class="backup-section-card">
    <h3>Alkalmazások mentési állapota</h3>

    {{if .NoUserDataBackupWarning}}
    <div class="alert alert-error" style="margin-bottom:1.5rem">
        <strong>Felhasználói adatokról nincs biztonsági mentés.</strong><br>
        A szerveren tárolt fotók, dokumentumok és egyéb fájlok jelenleg csak egy példányban léteznek.
        Külső meghajtó csatlakoztatásával biztonsági másolat készíthető a 3-2-1 szabály szerint.
        <a href="/settings" style="color:inherit;text-decoration:underline">Meghajtó beállítása →</a>
    </div>
    {{end}}

    {{range .AppBackupRows}}
    <div class="app-backup-row" data-status="{{.Status}}">
        <div class="app-backup-row-header" onclick="toggleBackupDetail(this)">
            <span class="status-dot status-{{.Status}}" title="{{.StatusText}}"></span>
            <span class="app-backup-row-name">{{.DisplayName}}</span>
            <div class="app-backup-row-meta">
                {{if .DriveDisconnected}}
                    <span class="tag tag-warn">Meghajtó leválasztva</span>
                {{else if .HasHDDData}}
                    {{if .StorageLabel}}<span class="meta-badge meta-badge-storage">{{.StorageLabel}}</span>{{end}}
                    <span class="mono app-backup-size" style="font-size:.8rem">{{.HDDSizeHuman}}</span>
                {{else if .HasVolumeData}}
                    <span class="meta-badge">Konfig{{if .HasDB}} + DB{{end}} + Adatok</span>
                {{else}}
                    <span class="meta-badge">Konfig{{if .HasDB}} + DB{{end}}</span>
                {{end}}
            </div>
            <span class="expand-icon">▶</span>
        </div>
        <div class="app-backup-row-detail" style="display:none">
            <div class="backup-layers">
                <!-- Tier 1: Nightly backup (mandatory, same drive) -->
                <div class="backup-layer-row">
                    <span class="tier-label">1. mentés</span>
                    <span class="layer-badge">Auto</span>
                    <span class="tier-location">helyi</span>
                    {{if .Tier1LastRun}}
                    <span class="layer-last">Utolsó: {{timeAgoStr .Tier1LastRun}}
                        {{if eq .Tier1LastStatus "ok"}}<span class="text-ok"><svg class="ico ico-sm"><use href="#i-check"/></svg></span>
                        {{else if eq .Tier1LastStatus "error"}}<span class="text-error"><svg class="ico ico-sm"><use href="#i-x"/></svg></span>{{end}}
                    </span>
                    {{end}}
                    <span class="tier-contents">{{.BackupContents}}</span>
                    {{if and .HasDB (eq .Tier1DBStatus "error")}}
                    <span class="text-error" style="font-size:.8rem"><svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> DB dump hiba</span>
                    {{end}}
                </div>
                <!-- Tier 2: Cross-drive backup (opt-in, different device) -->
                <div class="backup-layer-row">
                    <span class="tier-label">2. mentés</span>
                    {{if .Tier2UserDisabled}}
                        <span class="layer-unconfigured">2. mentés kikapcsolva</span>
                        <div class="layer-actions">
                            <a href="/stacks/{{.StackName}}/backup" class="btn btn-xs btn-outline">Beállítás</a>
                        </div>
                    {{else if and .Tier2Configured .Tier2DestDisconnected}}
                        <span class="layer-method" style="opacity:.6">rsync</span>
                        <span class="layer-dest" style="opacity:.6">→ {{.Tier2Dest}}</span>
                        <span class="tag tag-warn">Cél meghajtó leválasztva</span>
                        {{if .Tier2LastRun}}
                        <span class="layer-last" style="opacity:.6">Utolsó: {{timeAgoStr .Tier2LastRun}}</span>
                        {{end}}
                        <span class="tier-contents" style="opacity:.6">{{.BackupContents}}</span>
                        <div class="layer-actions">
                            <a href="/stacks/{{.StackName}}/backup" class="btn btn-xs btn-outline">Beállítás</a>
                        </div>
                    {{else if and .Tier2Configured .Tier2DestInactive}}
                        <span class="layer-method" style="opacity:.6">rsync</span>
                        <span class="layer-dest" style="opacity:.6">→ {{.Tier2Dest}}</span>
                        <span class="tag tag-warn">Cél meghajtó inaktív</span>
                        {{if .Tier2LastRun}}
                        <span class="layer-last" style="opacity:.6">Utolsó: {{timeAgoStr .Tier2LastRun}}</span>
                        {{end}}
                        <span class="tier-contents" style="opacity:.6">{{.BackupContents}}</span>
                        <div class="layer-actions">
                            <a href="/stacks/{{.StackName}}/backup" class="btn btn-xs btn-outline">Beállítás</a>
                        </div>
                    {{else if .Tier2Configured}}
                        <span class="layer-method">rsync</span>
                        <span class="layer-dest">→ {{.Tier2Dest}}</span>
                        <span class="layer-schedule">{{.Tier2Schedule}}</span>
                        {{if .Tier2LastRun}}
                        <span class="layer-last">Utolsó: {{timeAgoStr .Tier2LastRun}}
                            <span class="{{if eq .Tier2LastStatus "ok"}}text-ok{{else if eq .Tier2LastStatus "error"}}text-error{{else if eq .Tier2LastStatus "running"}}text-muted{{end}}">
                                {{.Tier2StatusBadge}}
                            </span>
                        </span>
                        {{end}}
                        {{if .Tier2SizeHuman}}<span class="tier-size">{{.Tier2SizeHuman}}</span>{{end}}
                        <span class="tier-contents">{{.BackupContents}}</span>
                        <span class="tier-browsable" title="A mentés böngészhető fájlrendszerben"><svg class="ico ico-sm"><use href="#i-file-text"/></svg></span>
                        <div class="layer-actions">
                            {{if .Tier2LastRun}}
                            <form method="POST" action="/backup/tier2/restore" style="display:inline" onsubmit="return confirm('Visszaállítja a hiányzó fájlokat a másodlagos másolatból? A meglévő fájlok NEM módosulnak és NEM törlődnek. Az alkalmazás a művelet idejére leáll. Legutóbbi másolat: {{.Tier2LastRun}}')">{{$.CSRFField}}
                                <input type="hidden" name="stack_name" value="{{.StackName}}">
                                <button type="submit" class="btn btn-xs btn-outline">Fájlok visszaállítása</button>
                            </form>
                            {{end}}
                            <a href="/stacks/{{.StackName}}/backup" class="btn btn-xs btn-outline">Beállítás</a>
                        </div>
                    {{else}}
                        <span class="layer-auto-ok"><svg class="ico ico-sm"><use href="#i-check"/></svg> 1. mentés auto</span>
                        <span class="layer-unconfigured"><svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> Nincs 2. (off-drive) másolat</span>
                        {{if .Tier2LastError}}
                        <span class="layer-reason" style="opacity:.85" title="A 2. mentés automatikus — külön beállítás nem kell">{{.Tier2LastError}}</span>
                        {{end}}
                        <div class="layer-actions">
                            <a href="/stacks/{{.StackName}}/backup" class="btn btn-xs btn-outline">Beállítás</a>
                        </div>
                    {{end}}
                </div>
                <!-- Tier 3: Off-box (NAS) backup — real state (see tier3State). -->
                {{if eq .Tier3State "active"}}
                <div class="backup-layer-row">
                    <span class="tier-label">3. mentés</span>
                    <span class="layer-badge {{if eq $.Offbox.LastStatus "ok"}}text-ok{{else if eq $.Offbox.LastStatus "error"}}text-error{{else if eq $.Offbox.LastStatus "running"}}text-muted{{end}}">{{if eq $.Offbox.LastStatus "ok"}}Sikeres{{else if eq $.Offbox.LastStatus "error"}}Hiba{{else if eq $.Offbox.LastStatus "running"}}Fut...{{else}}—{{end}}</span>
                    <span class="tier-location">restic → {{$.Offbox.Host}}</span>
                    {{if $.Offbox.LastRun}}<span class="layer-last">Utolsó: {{timeAgoStr $.Offbox.LastRun}}</span>{{end}}
                    <span class="tier-contents">Helyreállítási egység, titkosítva</span>
                </div>
                {{else if eq .Tier3State "escrow_pending"}}
                <div class="backup-layer-row">
                    <span class="tier-label">3. mentés</span>
                    <span class="layer-badge text-error">Kulcsletétre vár</span>
                    <span class="tier-contents">A távoli mentés a titkosítási kulcs letétbe helyezéséig szünetel</span>
                </div>
                {{else if eq .Tier3State "off"}}
                <div class="backup-layer-row" style="opacity:.5">
                    <span class="tier-label">3. mentés</span>
                    <span class="layer-badge">Kikapcsolva</span>
                    <span class="tier-contents">Ez az alkalmazás nincs kijelölve távoli mentésre</span>
                    <div class="layer-actions">
                        <a href="#offbox-section" class="btn btn-xs btn-outline">Bekapcsolás</a>
                    </div>
                </div>
                {{else}}
                <div class="backup-layer-row" style="opacity:.5">
                    <span class="tier-label">3. mentés</span>
                    <span class="layer-badge" style="background:var(--bg-2);color:var(--text-3)">Nincs beállítva</span>
                    <span class="tier-location">távoli (offsite)</span>
                    <span class="tier-contents">Nincs távoli mentési cél beállítva</span>
                    <div class="layer-actions">
                        <a href="#offbox-section" class="btn btn-xs btn-outline">Beállítás</a>
                    </div>
                </div>
                {{end}}
            </div>
            {{if .Warnings}}
            <div class="layer-warnings">
                {{range .Warnings}}
                <div class="backup-layer-warning">{{.}}</div>
                {{end}}
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

</div>
{{end}}

<!-- Section 7: Restore -->
{{if .Backup.AppDataInfo}}
<div class="backup-section-card">
    <h3>Visszaállítás</h3>
    <div class="restore-section">
        <div class="restore-form-row">
            <label class="restore-label">Alkalmazás:</label>
            <select id="restore-app" class="restore-select" onchange="onRestoreAppChange()">
                <option value="">— Válasszon —</option>
                {{range .Backup.AppDataInfo}}
                <option value="{{.StackName}}" data-has-hdd="{{.HasHDDData}}" data-has-db="{{.HasDBDump}}" data-has-volumes="{{.HasVolumeData}}">{{.DisplayName}}</option>
                {{end}}
            </select>
        </div>
        <div class="restore-form-row">
            <label class="restore-label">Pillanatkép:</label>
            <select id="restore-snapshot" class="restore-select" onchange="onRestoreConfirmChange()">
                <option value="">— Válasszon alkalmazást —</option>
            </select>
        </div>
        <div id="restore-type-info" class="restore-info" style="display:none;margin-bottom:0.5rem">
        </div>
        <div id="restore-no-snapshots" class="restore-warning" style="display:none;">
            Még nincs mentés felhasználói adattal.
        </div>
        <div class="restore-warning">
            <svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> A visszaállítás felülírja az alkalmazás jelenlegi adatait a kiválasztott mentés állapotával.
            Az alkalmazás a folyamat során automatikusan leáll és újraindul.
        </div>
        <div class="restore-confirm">
            <label>
                <input type="checkbox" id="restore-confirm-cb" onchange="onRestoreConfirmChange()">
                Megértettem, visszaállítás indítása.
            </label>
        </div>
        <div class="restore-actions">
            <button type="button" class="btn btn-sm btn-danger" id="restore-btn" disabled onclick="submitRestore()">Visszaállítás indítása</button>
        </div>
        <div style="margin-top: 1rem; text-align: center; border-top: 1px solid var(--line); padding-top: 1rem;">
            <a href="/import" class="btn btn-sm btn-outline">Importálás mentett csomagból (.fab)</a>
        </div>
    </div>
</div>
{{end}}

{{end}}

<script>
// Part B: restore-progress banner. Polls the async restore op-status every 3s. Shows a neutral
// "in progress" while running (including on a fresh page load mid-op), success on completion, and the
// error state ONLY on failure. Stops polling when idle after a terminal result was shown.
(function(){
    var banner = document.getElementById('restore-banner');
    if (!banner) return;
    var sawRunning = false;
    function opLabel(op){ return op === 'tier2-restore' ? 'Fájl-visszaállítás'
                        : op === 'offbox-restore' ? 'NAS-visszaállítás' : 'Visszaállítás'; }
    function render(st){
        if (st.running) {
            sawRunning = true;
            banner.className = 'flash';
            banner.style.display = 'block';
            banner.textContent = opLabel(st.op) + ' folyamatban' + (st.stack ? ': ' + st.stack : '') + '…';
            return;
        }
        if (st.last && sawRunning) {
            banner.style.display = 'block';
            if (st.last.ok) {
                banner.className = 'flash flash-success';
                banner.textContent = st.last.message || (opLabel(st.last.op) + ' kész.');
            } else {
                banner.className = 'flash flash-error';
                banner.textContent = st.last.message || (opLabel(st.last.op) + ' sikertelen.');
            }
        }
    }
    function poll(){
        fetch('/api/backup/restore-status', {headers: {'Accept':'application/json'}})
            .then(function(r){ return r.json(); })
            .then(function(j){ if (j && j.data) render(j.data); })
            .catch(function(){});
    }
    poll();
    setInterval(poll, 3000);
})();
function toggleBackupDetail(header) {
    var detail = header.nextElementSibling;
    var icon = header.querySelector('.expand-icon');
    if (detail.style.display === 'none') {
        detail.style.display = 'block';
        icon.textContent = '▼';
    } else {
        detail.style.display = 'none';
        icon.textContent = '▶';
    }
}

function triggerBackupFromPage() {
    const btn = document.getElementById('backup-page-btn');
    btn.disabled = true;
    btn.textContent = 'Mentés indítása...';
    fetch('/api/backup/run', { method: 'POST', headers: csrfHeaders() })
        .then(r => r.json())
        .then(data => {
            if (data.ok) {
                btn.textContent = 'Mentés folyamatban...';
                btn.classList.add('loading');
                startBackupPolling();
            } else {
                btn.textContent = data.error || 'Hiba';
                setTimeout(() => { btn.textContent = 'Mentés most'; btn.disabled = false; }, 3000);
            }
        })
        .catch(() => {
            btn.textContent = 'Hiba';
            setTimeout(() => { btn.textContent = 'Mentés most'; btn.disabled = false; }, 3000);
        });
}

function startBackupPolling() {
    const poll = setInterval(() => {
        fetch('/api/backup/status')
            .then(r => r.json())
            .then(data => {
                if (data.ok && data.data && !data.data.running) {
                    clearInterval(poll);
                    window.location.reload();
                }
            })
            .catch(() => {});
    }, 3000);
}

// Whole-guest (appliance) backup — manual trigger via the quiesce loop (controller-owned quiesce:
// stop stacks → agent vzdump → resume). Returns immediately; we poll /api/guest-backup/status.
function triggerGuestBackup() {
    if (!confirm('Elindítja a teljes rendszermentést most? A mentés ideje alatt az alkalmazások rövid időre leállhatnak.')) return;
    var btn = document.getElementById('wg-backup-btn');
    var out = document.getElementById('wg-backup-result');
    btn.disabled = true;
    out.innerHTML = '<span class="form-hint">Mentés indítása…</span>';
    fetch('/api/guest-backup/trigger', { method: 'POST', headers: Object.assign({'Content-Type':'application/json'}, csrfHeaders()) })
        .then(r => r.json())
        .then(data => {
            if (!data.ok) { out.innerHTML = '<div class="alert alert-error">' + (data.error || 'Hiba') + '</div>'; btn.disabled = false; return; }
            out.innerHTML = '<span class="form-hint">Mentés folyamatban…</span>';
            pollGuestBackup(out, btn);
        })
        .catch(e => { out.innerHTML = '<div class="alert alert-error">Hiba: ' + e + '</div>'; btn.disabled = false; });
}

function pollGuestBackup(out, btn) {
    var tries = 0;
    var iv = setInterval(function () {
        tries++;
        fetch('/api/guest-backup/status')
            .then(r => r.json())
            .then(data => {
                if (data.ok && data.data) {
                    var ph = data.data.phase;
                    out.innerHTML = '<span class="form-hint">Állapot: ' + ph + '</span>';
                    if (ph === 'done') { clearInterval(iv); out.innerHTML = '<div class="flash flash-success">A rendszermentés elkészült.</div>'; setTimeout(() => window.location.reload(), 1500); }
                    else if (ph === 'failed') { clearInterval(iv); out.innerHTML = '<div class="alert alert-error">A mentés sikertelen.</div>'; btn.disabled = false; }
                }
            })
            .catch(() => {});
        if (tries > 180) { clearInterval(iv); btn.disabled = false; } // ~15 min cap at 5s polls
    }, 5000);
}

// Restore section
var huDays = ['vasárnap', 'hétfő', 'kedd', 'szerda', 'csütörtök', 'péntek', 'szombat'];
function formatSnapshot(s) {
    var t = new Date(s.time);
    var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
    var label = t.getFullYear() + '-' + pad(t.getMonth()+1) + '-' + pad(t.getDate()) +
        ' ' + huDays[t.getDay()] + ' ' + pad(t.getHours()) + ':' + pad(t.getMinutes()) +
        ' (' + s.short_id + ')';
    var tierLabel = s.tier === 2 ? '2. szint' : '1. szint';
    if (s.drive_label) {
        label += ' — ' + tierLabel + ', ' + s.drive_label;
    } else {
        label += ' — ' + tierLabel;
    }
    return label;
}

function onRestoreAppChange() {
    var sel = document.getElementById('restore-app');
    var appName = sel.value;
    var snapSel = document.getElementById('restore-snapshot');
    var noSnaps = document.getElementById('restore-no-snapshots');
    var typeInfo = document.getElementById('restore-type-info');

    document.getElementById('restore-confirm-cb').checked = false;
    document.getElementById('restore-btn').disabled = true;
    noSnaps.style.display = 'none';
    typeInfo.style.display = 'none';

    if (!appName) {
        snapSel.innerHTML = '<option value="">— Válasszon alkalmazást —</option>';
        return;
    }

    // Determine restore type from data attributes
    var opt = sel.options[sel.selectedIndex];
    var hasHDD = opt.getAttribute('data-has-hdd') === 'true';
    var hasDB = opt.getAttribute('data-has-db') === 'true';
    var hasVolumes = opt.getAttribute('data-has-volumes') === 'true';

    if (hasHDD || hasVolumes) {
        typeInfo.innerHTML = 'Teljes visszaállítás: adatbázis + konfiguráció + felhasználói adatok a kiválasztott pillanatképből.';
        typeInfo.className = 'restore-info';
    } else if (hasDB) {
        typeInfo.innerHTML = 'Adatbázis és konfiguráció visszaállítása — az alkalmazásnak nincs külön felhasználói adata.';
        typeInfo.className = 'restore-info restore-info-partial';
    } else {
        typeInfo.innerHTML = 'Csak konfiguráció visszaállítása (compose fájlok, beállítások).';
        typeInfo.className = 'restore-info restore-info-partial';
    }
    typeInfo.style.display = 'block';

    snapSel.innerHTML = '<option value="">— Betöltés... —</option>';

    fetch('/api/backup/snapshots?stack=' + encodeURIComponent(appName))
        .then(function(r) { return r.json(); })
        .then(function(data) {
            snapSel.innerHTML = '<option value="">— Válasszon —</option>';
            if (data.ok && data.data && data.data.length > 0) {
                // Group by tier
                var tier1 = data.data.filter(function(s) { return s.tier !== 2; });
                var tier2 = data.data.filter(function(s) { return s.tier === 2; });

                if (tier1.length > 0) {
                    var grp1 = document.createElement('optgroup');
                    grp1.label = '1. szint — Helyi mentés (ajánlott)';
                    tier1.forEach(function(s) {
                        var o = document.createElement('option');
                        o.value = s.short_id;
                        o.textContent = formatSnapshot(s);
                        grp1.appendChild(o);
                    });
                    snapSel.appendChild(grp1);
                }
                if (tier2.length > 0) {
                    var grp2 = document.createElement('optgroup');
                    grp2.label = '2. szint — Másodlagos másolat';
                    tier2.forEach(function(s) {
                        var o = document.createElement('option');
                        o.value = s.short_id;
                        o.textContent = formatSnapshot(s);
                        grp2.appendChild(o);
                    });
                    snapSel.appendChild(grp2);
                }
            } else {
                snapSel.innerHTML = '<option value="">— Nincs elérhető mentés —</option>';
                noSnaps.style.display = 'block';
            }
        });
}

function onRestoreConfirmChange() {
    var cb = document.getElementById('restore-confirm-cb');
    var app = document.getElementById('restore-app').value;
    var snap = document.getElementById('restore-snapshot').value;
    document.getElementById('restore-btn').disabled = !(cb.checked && app && snap);
}

function submitRestore() {
    var app = document.getElementById('restore-app').value;
    var snap = document.getElementById('restore-snapshot').value;
    if (!app || !snap) return;

    var btn = document.getElementById('restore-btn');
    btn.disabled = true;
    btn.textContent = 'Visszaállítás folyamatban...';

    var form = document.createElement('form');
    form.method = 'POST';
    form.action = '/backup/restore';

    var fc = document.createElement('input');
    fc.type = 'hidden'; fc.name = '_csrf';
    fc.value = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
    form.appendChild(fc);

    var f1 = document.createElement('input');
    f1.type = 'hidden'; f1.name = 'stack_name'; f1.value = app;
    form.appendChild(f1);

    var f2 = document.createElement('input');
    f2.type = 'hidden'; f2.name = 'snapshot_id'; f2.value = snap;
    form.appendChild(f2);

    document.body.appendChild(form);
    form.submit();
}

// Auto-poll if backup is already running on page load
{{if .Backup}}{{if .Backup.Running}}
startBackupPolling();
{{end}}{{end}}


</script>

{{template "layout_end" .}}
{{end}}