{{define "backups_remote"}}
{{template "layout_start" .}}

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

{{template "backups_flash" .}}

{{if not .Backup}}
{{template "backups_empty" .}}
{{else}}

<!-- Felhom-offsite status card (v0.124.0, decision 2): three honest states from LOCAL data only —
     display + opt-in pointers, NEVER a state change (no form, no button in this card). State 3
     (applied + apps toggled) is the existing status block below; the card renders nothing then. -->
{{if not .OffboxConfigured}}
<div class="alert alert-info" style="margin-bottom:1rem" id="felhom-offsite-card">Felhom offsite tárhely — igényelhető szolgáltatás. Titkosított, házon kívüli másolat a mentéseidről. Érdeklődj az üzemeltetőnél.</div>
{{else if eq .OffboxToggledCount 0}}
<div class="alert alert-info" style="margin-bottom:1rem" id="felhom-offsite-card">Aktív — nincs kijelölt alkalmazás</div>
{{end}}

<!-- 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ó távoli 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 távoli 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}}
    {{/* Part E: display pick — a stale zero-toggle warning is replaced once the selection
         changed (neutral color: the replacement is reassurance, not a deviation). */}}
    {{if .OffboxWarningDisplay}}<p class="form-hint"{{if eq .OffboxWarningDisplay .Offbox.LastWarning}} style="color:var(--warn)"{{end}}>{{.OffboxWarningDisplay}}</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 távoli 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">Távoli mentés most</button>
        </form>
    </div>
    <h4 style="margin-top:1.25rem">Mely alkalmazások mentődnek a távoli tárolóra?</h4>
    {{if and .OffboxApps (eq .Offbox.EscrowState "escrowed") (eq .OffboxToggledCount 0)}}
    <p class="form-hint">Nincs távoli mentésre jelölt alkalmazás — jelölj ki legalább egyet.</p>
    {{end}}
    {{if .OffboxApps}}
    <div class="app-row-list">
        {{range .OffboxApps}}
        {{template "app_list_row" dict "Slug" .Slug "Name" .DisplayName}}
            <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}}Távoli mentés kikapcsolása{{else}}Távoli mentés bekapcsolása{{end}}</button>
            </form>
        {{template "app_list_row_end"}}
        {{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 távoli mentési cél.</p>
    {{end}}

    <details style="margin-top:1rem">
        <summary class="btn btn-xs btn-primary" style="cursor:pointer;display:inline-block">Távoli 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>Cél címe (IP vagy hosztnév — NAS vagy SFTP-kiszolgáló)</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 célgépen</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 távoli 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>A célgép 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}}

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