{{define "storage"}}
{{template "layout_start" .}}

<div class="page-header">
    <h2>{{T "storage.tarhely_meghajtok"}}</h2>
</div>

<!-- Section: Storage Paths -->
<div class="settings-card">
    <h3>{{T "storage.adattarolok"}}</h3>
    <p class="settings-card-desc">{{T "storage.kulso_meghajtok_kezelese_alkalmazasadato"}}</p>

    {{if .StorageError}}<div class="alert alert-error">{{.StorageError}}</div>{{end}}
    {{if .StorageSuccess}}<div class="alert alert-info">{{.StorageSuccess}}</div>{{end}}
    <p class="storage-kept-link"><a href="/kept-data" class="btn btn-sm btn-outline">{{T "kept.page.title"}}</a> <span class="form-hint">{{T "kept.page.link_hint"}}</span></p>

    {{if .StoragePaths}}
    <div class="storage-paths-list">
        {{range .StoragePaths}}
        <div class="storage-path-item{{if .Disconnected}} storage-disconnected{{else if .Decommissioned}} storage-decommissioned{{end}}">
            <div class="storage-path-header">
                <div class="storage-path-info">
                    <div class="storage-path-label-wrap" id="label-wrap-{{.Path}}">
                        <span class="storage-path-label" id="label-display-{{.Path}}">{{.Label}}</span>
                        {{if not (or .Disconnected .Decommissioned)}}<button class="btn btn-xs btn-ghost" onclick="editStorageLabel('{{.Path}}', '{{.Label}}')" title="{{T "storage.atnevezes"}}"><svg class="ico ico-sm"><use href="#i-pencil"/></svg></button>{{end}}
                    </div>
                    <span class="storage-path-path mono">{{.Path}}</span>
                </div>
                <div class="storage-path-badges">
                    {{if .Disconnected}}
                    <span class="badge badge-error">{{T "storage.levalasztva"}}</span>
                    {{else if .Decommissioned}}
                    <span class="tag tag-off"><span class="dot"></span>{{T "storage.kivaltva"}}</span>
                    {{else}}
                    {{if .IsDefault}}<span class="tag">{{T "storage.alapertelmezett"}}</span>{{end}}
                    {{if .Schedulable}}<span class="tag tag-run"><span class="dot"></span>{{T "storage.aktiv"}}</span>{{else}}<span class="tag tag-off"><span class="dot"></span>{{T "storage.inaktiv"}}</span>{{end}}
                    {{if .IsUSB}}<span class="badge" style="background:rgba(255,165,0,0.15);color:var(--warn)">USB</span>{{end}}
                    {{if not .IsMounted}}<span class="badge badge-warn">{{T "storage.rendszermeghajton"}}</span>{{end}}
                    {{end}}
                </div>
            </div>
            {{if .Disconnected}}
            <div class="storage-path-details">
                <div class="storage-disconnected-info">
                    {{if .DisconnectedAt}}<span class="form-hint">{{T "storage.levalasztva_2"}}</span>{{end}}
                    {{if .StoppedApps}}
                    <span class="form-hint">{{T "storage.leallitott_alkalmazasok"}} {{range $i, $name := .StoppedApps}}{{if $i}}, {{end}}{{$name}}{{end}}</span>
                    {{end}}
                </div>
            </div>
            <div class="storage-path-actions" id="storage-actions-{{.Path}}">
                <button class="btn btn-xs btn-primary" onclick="storageReconnect('{{.Path}}')">{{T "storage.csatlakoztatas"}}</button>
            </div>
            {{else if .Decommissioned}}
            <div class="storage-path-details">
                <div class="storage-disconnected-info">
                    <span class="form-hint">{{T "storage.adatok_atkoltoztetve_ide"}}</span>
                    {{if .DecommissionedAt}}<span class="form-hint">{{T "storage.idopont"}}</span>{{end}}
                </div>
            </div>
            <div class="storage-path-actions">
                <button class="btn btn-xs btn-primary" onclick="storageReEnroll('{{.Path}}','{{.Label}}')">{{T "storage.visszacsatlakoztatas"}}</button>
                <form method="POST" action="/settings/storage/remove" style="display:inline"
                      onsubmit="return storageRemoveDialog(event, this, '{{T "storage.biztosan_eltavolitja_meghajtot"}}')">
                    {{$.CSRFField}}
                    <input type="hidden" name="storage_path" value="{{.Path}}">
                    <button type="submit" class="btn btn-xs btn-outline">{{T "storage.eltavolitas_a_rendszerbol"}}</button>
                </form>
            </div>
            {{else}}
            <div class="storage-path-details">
                {{if .DiskInfo}}
                <div class="storage-path-disk">
                    <div class="system-info-header">
                        <span class="system-info-value">{{.DiskInfo.UsedHuman}} / {{.DiskInfo.TotalHuman}}</span>
                    </div>
                    <div class="meter {{if ge .DiskInfo.UsedPercent 90.0}}crit{{else if ge .DiskInfo.UsedPercent 70.0}}warn{{else}}nominal{{end}}">
                        <div class="meter-track">
                            <div class="meter-fill" style="width:{{printf "%.0f" .DiskInfo.UsedPercent}}%"></div>
                        </div>
                    </div>
                </div>
                {{end}}
                {{if .FSInfo}}
                <div class="storage-path-fsinfo mono form-hint">
                    {{.FSInfo.FSType}} · {{.FSInfo.Device}}{{if .FSInfo.Model}} · {{.FSInfo.Model}}{{end}}
                </div>
                {{end}}
                {{if .StoppedApps}}
                <div class="storage-stopped-apps-info" id="storage-stopped-{{.Path}}">
                    <span class="form-hint" style="color:var(--blue-bright)">{{T "storage.ujrainditasra_varo_alkalmazasok"}} {{range $i, $name := .StoppedApps}}{{if $i}}, {{end}}{{$name}}{{end}}</span>
                    <button class="btn btn-xs btn-primary" onclick="storageRestartApps('{{.Path}}')" style="margin-left:.5rem">{{T "storage.alkalmazasok_inditasa"}}</button>
                </div>
                {{end}}
                <div class="storage-path-meta">
                    {{if .AppDetails}}
                    <details class="storage-app-details">
                        <summary class="form-hint" style="cursor:pointer">
                            {{T "storage.alkalmazas_hasznalja"}}
                        </summary>
                        <div class="storage-app-list">
                            {{range .AppDetails}}
                            <div class="storage-app-row">
                                <a href="/apps/{{.Stack}}" class="storage-app-link">{{.Name}}</a>
                                {{if .SizeHuman}}<span class="mono form-hint">{{.SizeHuman}}</span>{{end}}
                                <span class="btn btn-xs btn-outline" style="opacity:.45;cursor:not-allowed" title="{{T "storage.hamarosan"}}"><svg class="ico ico-sm"><use href="#i-upload"/></svg> {{T "storage.mozgatas"}}</span>
                            </div>
                            {{end}}
                        </div>
                    </details>
                    {{else}}
                    <span class="form-hint">{{T "storage.nincs_alkalmazas_ezen_a_tarolon"}}</span>
                    {{end}}
                </div>
            <div class="drive-agent-extra" id="agent-extra-{{.Path}}"></div>
            </div>
            <div class="storage-path-actions">
                {{if not .IsDefault}}
                <form method="POST" action="/settings/storage/default" style="display:inline">
                    {{$.CSRFField}}
                    <input type="hidden" name="storage_path" value="{{.Path}}">
                    <button type="submit" class="btn btn-xs btn-outline">{{T "storage.legyen_alapertelmezett"}}</button>
                </form>
                {{end}}
                {{if .Schedulable}}
                <form method="POST" action="/settings/storage/schedulable" style="display:inline">
                    {{$.CSRFField}}
                    <input type="hidden" name="storage_path" value="{{.Path}}">
                    <input type="hidden" name="schedulable" value="false">
                    <button type="submit" class="btn btn-xs btn-outline" title="{{T "storage.a_meghajto_kimarad_az_uj"}}">{{T "storage.uj_telepitesek_letiltasa"}}</button>
                </form>
                {{else}}
                <form method="POST" action="/settings/storage/schedulable" style="display:inline">
                    {{$.CSRFField}}
                    <input type="hidden" name="storage_path" value="{{.Path}}">
                    <input type="hidden" name="schedulable" value="true">
                    <button type="submit" class="btn btn-xs btn-outline" title="{{T "storage.a_meghajto_ujra_valaszthato_az"}}">{{T "storage.uj_telepitesek_engedelyezese"}}</button>
                </form>
                {{end}}
                {{if .IsUSB}}
                <button class="btn btn-xs btn-danger-outline" onclick="storageDisconnect('{{.Path}}', '{{.Label}}', {{.AppCount}})" title="{{T "storage.az_itt_tarolt_alkalmazasok_leallnak"}}">{{T "storage.biztonsagos_levalasztas"}}</button>
                {{end}}
                {{/* List-removal is the undo of a MANUAL add only. Wizard-enrolled drives
                     (/mnt/felhom-drives/) have a real lifecycle — Biztonságos leválasztás /
                     Végleges leszerelés — and a de-registered-but-still-bound state is never
                     what the customer wants, so the button is hidden for them. */}}
                {{if and (not .IsDefault) (eq .AppCount 0) (not .IsEnrolled)}}
                <form method="POST" action="/settings/storage/remove" style="display:inline"
                      onsubmit="return storageRemoveDialog(event, this, '{{T "storage.biztosan_eltavolitja_adattarolot"}}')">
                    {{$.CSRFField}}
                    <input type="hidden" name="storage_path" value="{{.Path}}">
                    <button type="submit" class="btn btn-xs btn-danger-outline" title="{{T "storage.csak_a_nyilvantartasbol_torli_a"}}">{{T "storage.eltavolitas_a_listabol"}}</button>
                </form>
                {{end}}
                {{if and (gt .AppCount 0) .HasOtherPaths}}
                {{$src := .Path}}
                <span class="migrate-inline" style="display:inline-flex;gap:.35rem;align-items:center">
                    <select id="migrate-target-{{.Path}}" class="btn btn-xs btn-outline">
                        <option value="">{{T "storage.athelyezes_ide"}}</option>
                        {{range $.StoragePaths}}{{if and (ne .Path $src) .Schedulable (not .Disconnected) (not .Decommissioned)}}<option value="{{.Path}}">{{.Label}} ({{.Path}})</option>{{end}}{{end}}
                    </select>
                    <button class="btn btn-xs btn-outline" onclick="storageMigrateAll('{{.Path}}','{{.Label}}')">{{T "storage.osszes_adat_athelyezese"}}</button>
                </span>
                {{end}}
                <button class="btn btn-xs btn-danger-outline" onclick="storageDecommission('{{.Path}}','{{.Label}}',{{.AppCount}})" title="{{T "storage.a_meghajto_vegleges_kivonasa_a"}}">{{T "storage.vegleges_leszereles"}}</button>
            </div>
            {{end}}
        </div>
        {{end}}
    </div>
    {{else}}
    <div class="empty-state" style="padding:1.5rem">
        {{T "storage.nincs_regisztralt_adattarolo_adjon_hozza"}}
    </div>
    {{end}}


    <div id="migrate-progress" style="display:none;margin-top:1rem;padding:1rem;border:1px solid var(--blue);border-radius:6px;background:rgba(0,136,204,0.06)">
        <strong>{{T "storage.adatok_athelyezese"}}</strong>
        <div id="migrate-progress-body" style="margin-top:.5rem">…</div>
    </div>
    <script>
    // Shared migration progress (used by both migrate-all here and per-app migrate on the app page).
    function migFmtGB(b){ return (Number(b||0)/1e9).toFixed(1)+' GB'; }
    function migRender(job){
        var names={stop:'{{T "storage.alkalmazasok_leallitasa"}}',copy:'{{T "storage.adatok_masolasa"}}',verify:'{{T "storage.ellenorzes"}}',flip:'{{T "storage.ujratelepites"}}',redeploy:'{{T "storage.ujratelepites"}}',cleanup:'{{T "storage.forras_torlese"}}'};
        var s=names[job.phase]||job.phase;
        if(job.current_app) s+=': '+job.current_app;
        if(job.phase==='copy'&&job.bytes_total>0){ s+=' ('+Math.floor(100*job.bytes_done/job.bytes_total)+'% — '+migFmtGB(job.bytes_done)+'/'+migFmtGB(job.bytes_total)+')'; }
        return s+'…';
    }
    function migWatch(){
        var panel=document.getElementById('migrate-progress');
        var body=document.getElementById('migrate-progress-body');
        if(panel) panel.style.display='block';
        function tick(){
            fetch('/api/storage/migrate/status').then(function(r){return r.json();}).then(function(d){
                var job=d.data&&d.data.job;
                if(!job){ if(body) body.textContent='{{T "storage.nincs_folyamatban_migracio"}}'; return; }
                if(body) body.innerHTML=migRender(job);
                if(job.phase==='done'){ if(body) body.innerHTML+='<br><strong>{{T "storage.kesz"}}</strong>'; setTimeout(function(){location.reload();},1500); return; }
                if(job.phase==='aborted'){ if(body) body.innerHTML+='<br><strong style="color:var(--danger,#c0392b)">{{T "storage.megszakadt"}} '+(job.error||'')+'</strong><br>{{T "storage.a_forras_adatai_erintetlenek"}}'; return; }
                setTimeout(tick,1500);
            }).catch(function(){ setTimeout(tick,2000); });
        }
        tick();
    }
    function storageMigrateAll(source,label){
        var sel=document.getElementById('migrate-target-'+source);
        var target=sel?sel.value:'';
        if(!target){ showAlert('{{T "storage.valassz_celtarolot_a_legordulo_menubol"}}'); return; }
        openDialog({title:'{{T "storage.osszes_adat_athelyezese"}}', confirmLabel:'{{T "storage.athelyezes"}}',
            message:'{{T "storage.athelyezed_a_z"}} '+label+' {{T "storage.osszes_adatat_ide"}} '+target+'{{T "storage.n_naz_alkalmazasok_az_athelyezes"}}',
            onConfirm:function(){
        fetch('/api/storage/migrate',{method:'POST',headers:Object.assign({'Content-Type':'application/json'},csrfHeaders()),body:JSON.stringify({source:source,target:target})})
            .then(function(r){return r.json();}).then(function(d){ if(d.ok){ migWatch(); } else { showAlert('{{T "storage.hiba"}} '+(d.error||'{{T "storage.ismeretlen"}}')); } })
            .catch(function(e){ showAlert('{{T "storage.hiba"}} '+e); });
            }});
    }
    // Resume view: if a migration is STILL IN PROGRESS when the page loads, show the panel and watch.
    // Must NOT re-watch a terminal (done/aborted) job: the journal keeps returning the last completed
    // job indefinitely, and migWatch's done-branch reloads the page — so watching a persisted 'done'
    // job on every load creates an endless refresh loop. Only the active watcher (started from
    // storageMigrateAll) should fire the one-time post-completion reload.
    (function(){ fetch('/api/storage/migrate/status').then(function(r){return r.json();}).then(function(d){ var job=d.data&&d.data.job; if(job && job.phase!=='done' && job.phase!=='aborted'){ migWatch(); } }).catch(function(){}); })();
    </script>

    <div style="margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap">
        <a href="/storage/init" class="btn btn-sm btn-outline"><svg class="ico ico-sm"><use href="#i-plus"/></svg> {{T "storage.uj_meghajto_inicializalasa"}}</a>
        <a href="/storage/attach" class="btn btn-sm btn-outline"><svg class="ico ico-sm"><use href="#i-link"/></svg> {{T "storage.meglevo_meghajto_csatolasa"}}</a>
    </div>

    <div id="agent-warn-note"></div>

    <div style="margin-top:1.5rem" id="agent-unregistered-wrap" hidden>
        <div class="section-h"><h3>{{T "storage.nem_regisztralt_meghajtok"}}</h3><span class="hint">{{T "storage.az_ugynok_altal_eszlelt_meg"}}</span></div>
        <div id="agent-unregistered" class="drive-list"></div>
    </div>

    <div style="margin-top:1.5rem" id="agent-system-wrap" hidden>
        <div class="section-h"><h3>{{T "storage.rendszermeghajtok"}}</h3><span class="hint">{{T "storage.vedett_csak_operatori_alairassal_modosit"}}</span></div>
        <div id="agent-system" class="drive-list"></div>
    </div>
    <div id="confirm-root"></div>
    <div id="dialog-root"></div>
    <script>
window.__registeredPaths=[{{range .StoragePaths}}{{if .Path}}"{{.Path}}",{{end}}{{end}}];
(function(){
  function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];}); }
  function hum(b){ if(!b||b<=0) return ''; var u=['B','KB','MB','GB','TB'],i=0,v=b; while(v>=1024&&i<u.length-1){v/=1024;i++;} return (v>=10||i===0?Math.round(v):v.toFixed(1))+' '+u[i]; }
  function usageColorClass(p){ if(p>=85) return 'crit'; if(p>=70) return 'warn'; return 'nominal'; }
  var LOCK_ICO='<svg class="ico ico-sm"><use href="#i-lock"/></svg>';
  function classTag(d){
    // F5 2026-07-13: USB drives never show the class hint — the card already carries the USB
    // tag, and Observe-sourced USB drives showing "lassú" while registry-sourced ones never do
    // was a misleading inconsistency. Hub-report ClassHint is UNCHANGED (UI-only suppression).
    if(d.type==='usb') return '';
    if(d.class==='fast') return '<span class="tag">gyors</span>';
    if(d.class==='slow') return '<span class="tag tag-off">{{T "storage.lassu"}}</span>';
    return '';
  }
  function roleTag(role){
    if(role==='system') return '<span class="tag">'+LOCK_ICO+'{{T "storage.rendszer_vedett"}}</span>';
    if(role==='backup') return '<span class="tag">'+LOCK_ICO+'{{T "storage.biztonsagi_mentes_vedett"}}</span>';
    if(role==='user-data') return '<span class="tag tag-run"><span class="dot"></span>{{T "storage.felhasznaloi_adat"}}</span>';
    return '<span class="tag">'+LOCK_ICO+'{{T "storage.vedett"}}</span>';
  }
  function dataTag(d){ return d.data_bearing ? '<span class="tag tag-warn" title="'+esc(d.data_reason)+'">{{T "storage.adatot_tartalmaz"}}</span>' : ''; }
  // regKey is the path a drive is REGISTERED under: the STABLE intermediary path (guest_path,
  // /mnt/felhom-drives/<name>) the agent reports, else the raw mount_path (legacy). The registry
  // stores the STABLE path (handleStorageRegister/runStorageInit), so checking the raw mount_path
  // alone made an enrolled drive read as "Nem regisztrált" + show a spurious Regisztrálás button.
  function regKey(d){ return d.guest_path || d.mount_path; }
  function regTag(d, registered){
    if(!d.mount_path) return '';
    return registered[regKey(d)] ? '<span class="tag tag-run"><span class="dot"></span>{{T "storage.regisztralva"}}</span>' : '<span class="tag tag-off"><span class="dot"></span>{{T "storage.nem_regisztralt"}}</span>';
  }
  // appBackingTag marks the storages that actually hold deployed apps: the internal SSD (app
  // databases + Docker) and the external user-data drives (large app files). Keyed on the agent's
  // authoritative role/type — pure presentation, no agent contract change.
  function appBackingTag(d){
    if(d.type==='lvmthin') return '<span class="tag">{{T "storage.alkalmazas_rendszer"}}</span>';
    if(d.role==='user-data') return '<span class="tag">{{T "storage.alkalmazas_adatok"}}</span>';
    return '';
  }
  // purposeDesc explains, in plain Hungarian, what each storage is for — so the "which one do the
  // apps use?" question is answered per-card. Keyed on type first, then role.
  function purposeDesc(d){
    if(d.type==='lvmthin') return '{{T "storage.belso_ssd_a_szerver_rendszere"}}';
    if(d.type==='local'||d.type==='dir') return '{{T "storage.host_tarhely_rendszer_sablonok_iso"}}';
    if(d.type==='pbs'||d.role==='backup') return '{{T "storage.a_biztonsagi_mentesek_tarhelye"}}';
    if(d.role==='user-data') return '{{T "storage.kulso_adattarolo_a_telepitett_alkalmazas"}}';
    return '';
  }
  function capBar(d){
    if(!d.total_bytes || d.total_bytes<=0) return '';
    var pct = d.used_fraction ? d.used_fraction*100 : (d.used_bytes/d.total_bytes*100);
    pct = Math.max(0, Math.min(100, pct));
    return '<div class="drive-cap meter '+usageColorClass(pct)+'"><div class="meter-track"><div class="meter-fill" style="width:'+pct.toFixed(1)+'%"></div></div>'
      +'<div class="drive-cap-label">'+hum(d.used_bytes)+' / '+hum(d.total_bytes)+' ('+pct.toFixed(0)+'%)</div></div>';
  }
  function actions(d, registered, hasSafeDisconnect){
    // Destructive controls ONLY for user-data drives that are mounted under /mnt. System/backup get none.
    if(d.role!=='user-data' || !d.mount_path || d.mount_path.indexOf('/mnt/')!==0) return '';
    var dev = esc(d.backing_device||''), mpRaw = esc(d.mount_path), reg = esc(regKey(d));
    var btns = '';
    // Two distinct path arguments (the intermediary model):
    //   - registerDrive posts the RAW mount_path — its agent guest-attach operates on the raw mount
    //     (handleStorageRegister maps it to the stable path for the registry).
    //   - eject/wipe post the STABLE (registered) path — their handlers map it to raw for the agent via
    //     agentWhere() AND deregister it from the registry (which stores the stable path). Posting the
    //     raw path here would unmount the drive but leave the stable registry entry orphaned.
    if(!registered[regKey(d)]){
      btns += '<button class="btn btn-xs btn-primary" onclick="registerDrive(\''+mpRaw+'\')">{{T "storage.regisztralas"}}</button> ';
    }
    // Dedupe: if the registry card already offers "Biztonságos leválasztás" (USB safe-disconnect),
    // don't render the overlapping agent-level eject next to it — one detach affordance per card.
    if(!hasSafeDisconnect){
      btns += '<button class="btn btn-xs btn-danger-outline" onclick="confirmEject(\''+reg+'\')" title="{{T "storage.lecsatolas_title"}}">{{T "storage.levalasztas"}}</button>';
    }
    if(d.backing_device){ btns += (btns?' ':'') + '<button class="btn btn-xs btn-danger-outline" onclick="confirmWipe(\''+dev+'\',\''+reg+'\')" title="{{T "storage.formazas_title"}}">{{T "storage.formazas"}}</button>'; }
    return btns ? '<div class="drive-actions">'+btns+'</div>' : '';
  }
  // Unified drive view (D1): the agent disk list ENRICHES the registry cards in place
  // (role tag + durable-id + agent-only actions), and two extra groups render below:
  // protected system/backup drives (read-only) and unregistered user-data drives.
  function driveRow(d, registered, withActions){
    var sub = esc(d.type)+' · '+esc(d.backing_device||'—')+(d.mount_path?' · '+esc(regKey(d)):'');
    var badges = roleTag(d.role)+appBackingTag(d)+classTag(d)+dataTag(d);
    if(withActions) badges += regTag(d, registered);
    var purpose = purposeDesc(d);
    return '<div class="drive-card role-'+esc(d.role||'system')+'">'
      +'<div class="drive-card-top"><div class="drive-id"><span class="drive-name">'+esc(d.name)+'</span><span class="drive-sub">'+sub+'</span></div>'
      +'<div class="drive-badges">'+badges+'</div></div>'
      +(purpose?'<div class="drive-purpose">'+esc(purpose)+'</div>':'')
      +(d.durable_id?'<div class="drive-sub mono">'+esc(d.durable_id)+'</div>':'')
      +capBar(d)
      +(withActions?actions(d,registered):'')
      +'</div>';
  }
  function enrichCard(d, registered){
    var slot=document.getElementById('agent-extra-'+regKey(d));
    if(!slot) return false;
    var card=slot.closest('.storage-path-item');
    var hasSafeDisconnect=!!(card && card.querySelector('[onclick^="storageDisconnect"]'));
    var extra='<div class="metarows">'
      +'<span class="metarow">'+roleTag(d.role)+'</span>'
      +(d.class?'<span class="metarow">'+classTag(d)+'</span>':'')
      +(d.durable_id?'<span class="metarow mono" title="{{T "storage.tartos_azonosito"}}">'+esc(d.durable_id)+'</span>':'')
      +'</div>'
      +actions(d,registered,hasSafeDisconnect);
    slot.innerHTML=extra;
    return true;
  }
  async function load(){
    var warn=document.getElementById('agent-warn-note');
    try{
      var r=await fetch('/api/disks'); var j=await r.json();
      if(!j.ok) throw new Error(j.error||'{{T "storage.nem_elerheto"}}');
      var disks=(j.data&&j.data.disks)||[];
      var registered={}; (window.__registeredPaths||[]).forEach(function(p){registered[p]=true;});
      var sysHtml='', unregHtml='';
      disks.forEach(function(d){
        if(d.role==='user-data'){
          if(registered[regKey(d)] && enrichCard(d, registered)) return; // one card, enriched in place
          unregHtml+=driveRow(d, registered, true);
        }else{
          sysHtml+=driveRow(d, registered, false); // protected: read-only, lock tag, NO actions
        }
      });
      var sysWrap=document.getElementById('agent-system-wrap');
      var unregWrap=document.getElementById('agent-unregistered-wrap');
      if(sysHtml){ document.getElementById('agent-system').innerHTML=sysHtml; sysWrap.hidden=false; }
      if(unregHtml){ document.getElementById('agent-unregistered').innerHTML=unregHtml; unregWrap.hidden=false; }
    }catch(e){
      if(warn) warn.innerHTML='<div class="alert alert-warning" style="margin-top:1rem">{{T "storage.az_ugynok_nem_elerheto_elo"}}</div>';
    }
  }

  // ---- type-to-confirm modal (destructive user-data actions) ----
  function closeModal(){ document.getElementById('confirm-root').innerHTML=''; }
  window.__closeConfirm=closeModal;
  async function openConfirm(opts){
    // opts: {title, mount, mountName, danger, onConfirm}
    var apps=[], copies=[];
    try{
      var r=await fetch('/api/storage/impact?where='+encodeURIComponent(opts.mount));
      var j=await r.json(); if(j.ok && j.data){ apps=j.data.apps||[]; copies=j.data.backup_copies||[]; }
    }catch(e){}
    var appsHtml = apps.length
      ? '<p>{{T "storage.a_muvelet_utan_a_kovetkezo"}}</p><ul class="confirm-apps">'+apps.map(function(a){return '<li>'+esc(a)+'</li>';}).join('')+'</ul>'
      : '<p class="form-hint">{{T "storage.ehhez_a_meghajtohoz_jelenleg_nincs"}}</p>';
    // P4 (4B): this drive may also hold cross-drive backup COPIES of other apps — a wipe removes them.
    var copiesHtml = copies.length
      ? '<div class="alert alert-warning" style="margin-top:.5rem">{{T "storage.ez_a_meghajto_mas_alkalmazasok"}}<ul class="confirm-apps">'+copies.map(function(a){return '<li>'+esc(a)+'</li>';}).join('')+'</ul><span class="form-hint">{{T "storage.a_masolatok_redundansak_az_eredetik"}}</span></div>'
      : '';
    var root=document.getElementById('confirm-root');
    root.innerHTML='<div class="confirm-overlay" onclick="if(event.target===this)__closeConfirm()"><div class="confirm-box">'
      +'<h3>'+esc(opts.title)+'</h3>'
      +'<div class="alert alert-warning">'+esc(opts.danger)+'</div>'
      +appsHtml
      +copiesHtml
      +'<div class="confirm-input"><label>{{T "storage.megerositeshez_irja_be_a_csatlakoztatasi"}} <strong class="mono">'+esc(opts.mountName)+'</strong></label>'
      +'<input type="text" id="confirm-type" class="form-control" autocomplete="off" placeholder="'+esc(opts.mountName)+'" oninput="document.getElementById(\'confirm-go\').disabled=(this.value!==\''+esc(opts.mountName)+'\')"></div>'
      +'<div class="form-actions"><button id="confirm-go" class="btn btn-danger-outline" disabled>{{T "storage.megerosites"}}</button>'
      +'<button class="btn btn-outline" onclick="__closeConfirm()">{{T "storage.megsem"}}</button></div>'
      +'<div id="confirm-result" style="margin-top:.6rem"></div></div></div>';
    document.getElementById('confirm-go').onclick=opts.onConfirm;
  }

  // registerDrive records an already-mounted, unregistered user-data drive into the StoragePath
  // registry (no format, no eject) — makes the existing mount usable (schedulable + FileBrowser sync).
  window.registerDrive=async function(where){
    try{
      var r=await fetch('/api/storage/register',{method:'POST',headers:Object.assign({'Content-Type':'application/json'},csrfHeaders()),body:JSON.stringify({where:where})});
      var j=await r.json(); if(!j.ok){ showAlert('{{T "storage.regisztracio_sikertelen"}} '+(j.error||'')); return; }
      location.reload();
    }catch(e){ showAlert('{{T "storage.hiba"}} '+e.message); }
  };
  window.confirmEject=function(where){
    // The confirm name is the drive BASENAME (matches the server's path.Base(where) check); `where` may
    // be the stable /mnt/felhom-drives/<name> path, so strip the whole directory, not just the /mnt/ prefix.
    var name=where.split('/').filter(Boolean).pop()||where;
    openConfirm({title:'{{T "storage.meghajto_levalasztasa"}}', mount:where, mountName:name,
      danger:'{{T "storage.a_meghajto_levalasztasra_kerul_az"}}',
      onConfirm:async function(){
        var out=document.getElementById('confirm-result'); out.innerHTML='<p class="form-hint">{{T "storage.levalasztas_folyamatban"}}</p>';
        try{
          var r=await fetch('/api/storage/eject',{method:'POST',headers:Object.assign({'Content-Type':'application/json'},csrfHeaders()),body:JSON.stringify({where:where})});
          var j=await r.json(); if(!j.ok){ out.innerHTML='<div class="alert alert-error">{{T "storage.hiba"}} '+esc(j.error||'')+'</div>'; return; }
          location.reload();
        }catch(e){ out.innerHTML='<div class="alert alert-error">{{T "storage.hiba"}} '+esc(e.message)+'</div>'; }
      }});
  };
  window.confirmWipe=function(device, where){
    // Basename (matches the server's path.Base(where) type-to-confirm check); `where` may be the stable path.
    var name=where.split('/').filter(Boolean).pop()||where;
    openConfirm({title:'{{T "storage.meghajto_torlese_formazas"}}', mount:where, mountName:name,
      danger:'{{T "storage.figyelem_a_meghajton_levo_osszes"}}',
      onConfirm:async function(){
        var out=document.getElementById('confirm-result'); out.innerHTML='<p class="form-hint">{{T "storage.torles_folyamatban"}}</p>';
        try{
          var r=await fetch('/api/storage/wipe',{method:'POST',headers:Object.assign({'Content-Type':'application/json'},csrfHeaders()),body:JSON.stringify({device:device, where:where, mount_name:name})});
          var j=await r.json(); if(!j.ok){ out.innerHTML='<div class="alert alert-error">{{T "storage.hiba"}} '+esc(j.error||'')+'</div>'; return; }
          location.reload();
        }catch(e){ out.innerHTML='<div class="alert alert-error">{{T "storage.hiba"}} '+esc(e.message)+'</div>'; }
      }});
  };
  load();
})();
    </script>

    <details class="storage-add-details">
        <summary class="btn btn-sm btn-outline" style="margin-top:.75rem;cursor:pointer">{{T "storage.mar_csatlakoztatott_tarhely_hozzaadasa_k"}}</summary>
        <form method="POST" action="/settings/storage/add" class="storage-add-form">
            {{.CSRFField}}
            <div class="form-group">
                <label for="storage_path">{{T "storage.eleresi_ut"}}</label>
                <input type="text" id="storage_path" name="storage_path" class="form-control"
                       placeholder="/mnt/hdd_1" required>
                <span class="form-hint">{{T "storage.pl_mnt_hdd_1_a"}}</span>
            </div>
            <div class="form-group">
                <label for="storage_label">{{T "storage.megnevezes_opcionalis"}}</label>
                <input type="text" id="storage_label" name="storage_label" class="form-control"
                       placeholder="{{T "storage.kulso_hdd_1tb"}}">
            </div>
            <label class="toggle" style="margin-bottom:1rem">
                <input type="checkbox" name="storage_default" value="true">
                <span class="toggle-label">{{T "storage.legyen_alapertelmezett_uj_telepiteseknel"}}</span>
            </label>
            <button type="submit" class="btn btn-primary">{{T "storage.hozzaadas"}}</button>
        </form>
    </details>
</div>

<script>
// Light overlay dialog (D1) — replaces the native blocking browser dialogs: same texts,
// reuses the .confirm-overlay/.confirm-box pattern. typeToConfirm adds the typed-name gate
// ONLY where the old flow already had one.
function escText(s){var d=document.createElement('div');d.textContent=String(s==null?'':s);return d.innerHTML;}
function closeDialog(){ var r=document.getElementById('dialog-root'); if(r) r.innerHTML=''; }
function openDialog(opts){
    var root=document.getElementById('dialog-root');
    if(!root) return;
    var typeGate=opts.typeToConfirm||'';
    var html='<div class="confirm-overlay" onclick="if(event.target===this)document.getElementById(\'dialog-cancel\').click()"><div class="confirm-box">'
        +'<h3>'+escText(opts.title||'{{T "storage.megerosites"}}')+'</h3>'
        +'<p style="white-space:pre-line">'+escText(opts.message||'')+'</p>';
    if(typeGate){
        html+='<div class="confirm-input"><label>{{T "storage.megerositeshez_irja_be"}} <strong class="mono">'+escText(typeGate)+'</strong></label>'
            +'<input type="text" id="dialog-type" class="form-control" autocomplete="off" placeholder="'+escText(typeGate)+'"></div>';
    }
    html+='<div class="form-actions"><button id="dialog-go" class="btn '+(typeGate?'btn-danger-outline':'btn-primary')+'"'+(typeGate?' disabled':'')+'>'+escText(opts.confirmLabel||'{{T "storage.megerosites"}}')+'</button>'
        +'<button type="button" class="btn btn-outline" id="dialog-cancel">{{T "storage.megsem"}}</button></div>'
        +'</div></div>';
    root.innerHTML=html;
    var go=document.getElementById('dialog-go');
    if(typeGate){
        document.getElementById('dialog-type').oninput=function(){ go.disabled=(this.value.trim()!==typeGate); };
    }
    go.onclick=function(){ closeDialog(); if(opts.onConfirm) opts.onConfirm(); };
    document.getElementById('dialog-cancel').onclick=function(){ closeDialog(); if(opts.onCancel) opts.onCancel(); };
}
// Overlay-confirmed POST form submit (registry drive-remove forms).
function storageRemoveDialog(ev, form, msg){
    ev.preventDefault();
    openDialog({title:'{{T "storage.meghajto_eltavolitasa"}}', message:msg, confirmLabel:'{{T "storage.eltavolitas"}}', onConfirm:function(){ form.submit(); }});
    return false;
}

function editStorageLabel(path, currentLabel) {
    var wrap = document.getElementById('label-wrap-' + path);
    if (!wrap) return;
    var csrfTok = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
    wrap.innerHTML = '<form method="POST" action="/settings/storage/label" style="display:inline-flex;gap:.5rem;align-items:center">' +
        '<input type="hidden" name="_csrf" value="' + csrfTok + '">' +
        '<input type="hidden" name="storage_path" value="' + path + '">' +
        '<input type="text" name="storage_label" class="form-control" value="' + currentLabel.replace(/"/g, '&quot;') + '" style="width:200px;padding:.3rem .5rem;font-size:.9rem" maxlength="50">' +
        '<button type="submit" class="btn btn-xs btn-primary">OK</button>' +
        '<button type="button" class="btn btn-xs btn-outline" onclick="cancelEditLabel(\'' + path + '\', \'' + currentLabel.replace(/'/g, "\\'") + '\')">&#215;</button>' +
        '</form>';
    wrap.querySelector('input[name=storage_label]').focus();
}
function storageDisconnect(path, label, appCount) {
    var msg = '{{T "storage.biztos_levalasztja_a_meghajtot"}} ' + label + '?';
    if (appCount > 0) msg += '{{T "storage.n_na_rajta_futo"}} ' + appCount + ' {{T "storage.alkalmazas_le_fog_allni"}}';
    msg += '{{T "storage.n_na_meghajto_ezutan_biztonsagosan"}}';
    openDialog({title:'{{T "storage.meghajto_levalasztasa"}}', message:msg, confirmLabel:'{{T "storage.levalasztas"}}', onConfirm:function(){ doStorageDisconnect(path); }});
}
function doStorageDisconnect(path) {
    fetch('/api/storage/disconnect', {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
        body: JSON.stringify({where: path})
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.ok) {
            showAlert('{{T "storage.a_meghajto_biztonsagosan_eltavolithato"}}');
            location.reload();
        } else {
            showAlert('{{T "storage.hiba"}} ' + (data.error || '{{T "storage.ismeretlen"}}'));
        }
    }).catch(function(e) { showAlert('{{T "storage.hiba"}} ' + e); });
}
function storageReconnect(path) {
    var actionsDiv = document.getElementById('storage-actions-' + path);
    if (actionsDiv) actionsDiv.innerHTML = '<span class="form-hint">{{T "storage.csatlakoztatas_2"}}</span>';
    fetch('/api/storage/reconnect', {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
        body: JSON.stringify({where: path})
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.ok) {
            location.reload();
        } else {
            showAlert('{{T "storage.hiba"}} ' + (data.error || '{{T "storage.ismeretlen"}}'));
            if (actionsDiv) actionsDiv.innerHTML = '<button class="btn btn-xs btn-primary" onclick="storageReconnect(\'' + path + '\')">{{T "storage.csatlakoztatas"}}</button>';
        }
    }).catch(function(e) {
        showAlert('{{T "storage.hiba"}} ' + e);
        if (actionsDiv) actionsDiv.innerHTML = '<button class="btn btn-xs btn-primary" onclick="storageReconnect(\'' + path + '\')">{{T "storage.csatlakoztatas"}}</button>';
    });
}
function storageRestartApps(path) {
    fetch('/api/storage/restart-apps', {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
        body: JSON.stringify({where: path})
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.ok) {
            var r2 = data.restarted || [];
            if (r2.length) showAlert('{{T "storage.elinditva"}} ' + r2.join(', '));
            location.reload();
        } else {
            showAlert('{{T "storage.hiba"}} ' + (data.error || '{{T "storage.ismeretlen"}}'));
        }
    }).catch(function(e) { showAlert('{{T "storage.hiba"}} ' + e); });
}
// H2: decommission a drive (non-destructive). If a migrate target is picked in the inline select →
// migrate-then-decommission; otherwise decommission-anyway with type-to-confirm.
function storageDecommission(path, label, appCount) {
    var sel = document.getElementById('migrate-target-' + path);
    var target = sel ? sel.value : '';
    if (target) {
        openDialog({title:'{{T "storage.leszereles_athelyezessel"}}', confirmLabel:'{{T "storage.leszereles"}}',
            message:'{{T "storage.leszereles_athelyezessel_minden_adat_atm"}} ' + target + ', {{T "storage.majd_a_z"}} ' + label + ' {{T "storage.leszerelese_n_naz_adatok_nem"}}',
            onConfirm:function(){ doStorageDecommission({where: path, mode: 'migrate', target: target}); }});
    } else {
        var name = path.split('/').pop();
        openDialog({title:'{{T "storage.meghajto_leszerelese"}}', confirmLabel:'{{T "storage.leszereles"}}', typeToConfirm:name,
            message:'{{T "storage.a_z"}} ' + label + ' {{T "storage.leszerelesehez_athelyezes_nelkul_irja_be"}}' +
                (appCount > 0 ? '\n\n{{T "storage.figyelem"}} ' + appCount + ' {{T "storage.alkalmazas_leall_az_adatok_megmaradnak"}}' : ''),
            onConfirm:function(){ doStorageDecommission({where: path, mode: 'anyway', mount_name: name}); }});
    }
}
function doStorageDecommission(body) {
    fetch('/api/storage/decommission', {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
        body: JSON.stringify(body)
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.ok) { showAlert('{{T "storage.leszereles_elinditva"}}'); location.reload(); }
        else { showAlert('{{T "storage.hiba"}} ' + (data.error || '{{T "storage.ismeretlen"}}')); }
    }).catch(function(e) { showAlert('{{T "storage.hiba"}} ' + e); });
}
// H3: one-click re-enroll a decommissioned/ejected drive — clears the marker, re-attaches under the
// parent, restarts the gate-stopped apps (data is intact).
function storageReEnroll(path, label) {
    openDialog({title:'{{T "storage.visszacsatlakoztatas"}}', confirmLabel:'{{T "storage.visszacsatlakoztatas"}}',
        message:'{{T "storage.visszacsatlakoztatja_a_z"}} ' + label + ' {{T "storage.meghajtot_n_naz_adatok_erintetlenek"}}',
        onConfirm:function(){ doStorageReEnroll(path); }});
}
function doStorageReEnroll(path) {
    fetch('/api/storage/reconnect', {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
        body: JSON.stringify({where: path})
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.ok) { location.reload(); }
        else { showAlert('{{T "storage.hiba"}} ' + (data.error || '{{T "storage.ismeretlen"}}')); }
    }).catch(function(e) { showAlert('{{T "storage.hiba"}} ' + e); });
}
function cancelEditLabel(path, label) {
    var wrap = document.getElementById('label-wrap-' + path);
    if (!wrap) return;
    // M11: Use DOM manipulation with textContent to prevent XSS if label contains HTML.
    wrap.innerHTML = '';
    var span = document.createElement('span');
    span.className = 'storage-path-label';
    span.id = 'label-display-' + path;
    span.textContent = label;
    var btn = document.createElement('button');
    btn.className = 'btn btn-xs btn-ghost';
    btn.setAttribute('title', '{{T "storage.atnevezes"}}');
    btn.innerHTML = '<svg class="ico ico-sm"><use href="#i-pencil"/></svg>';
    btn.addEventListener('click', function() { editStorageLabel(path, label); });
    wrap.appendChild(span);
    wrap.appendChild(document.createTextNode(' '));
    wrap.appendChild(btn);
}
</script>
{{template "layout_end" .}}
{{end}}