{{define "storage_network"}}
{{template "layout_start" .}}

<div class="page-header">
    <h2>Tárhely — Hálózati tárhely (NAS)</h2>
</div>

<div class="settings-card">
    <!-- NAS network storage (Part A2) — a distinct class from the physical drives above. No
         leválasztás/leszerelés/áthelyezés/törlés; the only lifecycle action is Eltávolítás. -->
    <div class="storage-section">
        <h3 style="margin-bottom:.25rem">NAS-megosztások</h3>
        <p class="form-hint" style="margin-top:0">
            Egy NAS-megosztás (NFS vagy SMB) csatlakoztatása nagy méretű médiatartalomhoz (film, fotó, zene).
            A megosztás kiválasztható médiaalkalmazás adatkönyvtáraként. A hálózati tárhely nem fizikai
            meghajtó — nincs leszerelés/áthelyezés, csak eltávolítás.
        </p>
        {{if .NetworkStoragePaths}}
        <div class="storage-paths-list">
            {{range .NetworkStoragePaths}}
            <div class="storage-path-item{{if eq .Health "unreachable"}} storage-disconnected{{end}}">
                <div class="storage-path-header">
                    <div class="storage-path-info">
                        <span class="storage-path-label">{{.Label}}</span>
                        <span class="storage-path-path mono">{{.Protocol}} · {{.Server}}:{{.Export}} → {{.Path}}</span>
                    </div>
                    <div class="storage-path-badges">
                        {{if eq .Health "ok"}}<span class="badge badge-ok" title="A megosztás elérhető és csatlakoztatva van">Elérhető</span>
                        {{else if eq .Health "idle"}}<span class="badge badge-neutral" title="Elérhető, jelenleg készenlétben (igény szerint csatlakozik)">Készenlét</span>
                        {{else if eq .Health "unreachable"}}<span class="badge badge-warn" title="A NAS jelenleg nem érhető el — az érintett alkalmazások átmenetileg nem olvasnak róla">Nem elérhető</span>
                        {{else}}<span class="badge badge-neutral" title="Az állapot jelenleg nem lekérdezhető">Ismeretlen</span>{{end}}
                    </div>
                </div>
                <div class="storage-path-actions">
                    <button class="btn btn-xs btn-danger-outline" onclick="netStorageRemove('{{.Name}}','{{.Label}}')">Eltávolítás</button>
                </div>
            </div>
            {{end}}
        </div>
        {{else}}
        <p class="form-hint">Nincs hálózati tárhely beállítva.</p>
        {{end}}

        <details style="margin-top:.75rem">
            <summary class="btn btn-xs btn-primary" style="cursor:pointer;display:inline-block">Hálózati tárhely hozzáadása</summary>
            <div style="margin-top:.75rem;padding:1rem;border:1px solid var(--border,#ddd);border-radius:6px;max-width:520px">
                <div class="form-row"><label>Név (azonosító)</label>
                    <input id="ns-name" type="text" placeholder="pl. media" class="form-input"></div>
                <div class="form-row"><label>Protokoll</label>
                    <select id="ns-protocol" class="form-input" onchange="nsToggleSmb()">
                        <option value="nfs">NFS (ajánlott)</option>
                        <option value="smb">SMB / CIFS</option>
                    </select></div>
                <div class="form-row"><label>Szerver (IP vagy hosztnév)</label>
                    <input id="ns-server" type="text" placeholder="pl. 192.168.0.10" class="form-input"></div>
                <div class="form-row"><label id="ns-export-label">Megosztás (NFS export útvonal)</label>
                    <input id="ns-export" type="text" placeholder="pl. /volume1/media" class="form-input"></div>
                <div class="form-row"><label>Alkalmazás felhasználói azonosító (uid)</label>
                    <input id="ns-uid" type="number" value="1000" class="form-input">
                    <span class="form-hint">A legtöbb médiaalkalmazás 1000-es uid-del fut.</span></div>
                <div id="ns-smb-creds" style="display:none">
                    <div class="form-row"><label>SMB felhasználónév</label>
                        <input id="ns-username" type="text" autocomplete="off" class="form-input"></div>
                    <div class="form-row"><label>SMB jelszó</label>
                        <input id="ns-password" type="password" autocomplete="new-password" class="form-input">
                        <span class="form-hint">A jelszót a gazda ügynök 0600-as fájlba írja; a vezérlő nem tárolja.</span></div>
                </div>
                <button class="btn btn-sm btn-primary" style="margin-top:.5rem" onclick="netStorageAdd()">Csatlakoztatás</button>
                <div id="ns-add-msg" class="form-hint" style="margin-top:.5rem"></div>
            </div>
        </details>
    </div>
    <script>
    function nsToggleSmb(){
        var smb = document.getElementById('ns-protocol').value === 'smb';
        document.getElementById('ns-smb-creds').style.display = smb ? 'block' : 'none';
        document.getElementById('ns-export-label').textContent = smb ? 'Megosztás (SMB megosztásnév)' : 'Megosztás (NFS export útvonal)';
        document.getElementById('ns-export').placeholder = smb ? 'pl. media' : 'pl. /volume1/media';
    }
    function netStorageAdd(){
        var msg = document.getElementById('ns-add-msg');
        var body = {
            name: (document.getElementById('ns-name').value||'').trim(),
            protocol: document.getElementById('ns-protocol').value,
            server: (document.getElementById('ns-server').value||'').trim(),
            export: (document.getElementById('ns-export').value||'').trim(),
            mapped_uid: parseInt(document.getElementById('ns-uid').value||'1000',10),
            mapped_gid: parseInt(document.getElementById('ns-uid').value||'1000',10),
            username: (document.getElementById('ns-username').value||''),
            password: (document.getElementById('ns-password').value||'')
        };
        msg.textContent = 'Csatlakoztatás folyamatban…';
        fetch('/api/storage/netstorage/add',{method:'POST',headers:Object.assign({'Content-Type':'application/json'},csrfHeaders()),body:JSON.stringify(body)})
            .then(function(r){return r.json();}).then(function(d){
                if(d.ok){ msg.textContent='Sikeres'; setTimeout(function(){location.reload();},900); }
                else { msg.textContent='Hiba: '+(d.error||'ismeretlen'); }
            }).catch(function(e){ msg.textContent='Hiba: '+e; });
    }
    function netStorageRemove(name,label){
        openDialog({title:'Hálózati tárhely eltávolítása', confirmLabel:'Eltávolítás',
            message:'Biztosan eltávolítja a(z) '+label+' hálózati tárhelyet?\n\nA megosztás leválasztásra kerül; a NAS-on lévő adatok érintetlenek maradnak.',
            onConfirm:function(){
        fetch('/api/storage/netstorage/remove',{method:'POST',headers:Object.assign({'Content-Type':'application/json'},csrfHeaders()),body:JSON.stringify({name:name})})
            .then(function(r){return r.json();}).then(function(d){
                if(d.ok){ location.reload(); } else { alert('Hiba: '+(d.error||'ismeretlen')); }
            }).catch(function(e){ alert('Hiba: '+e); });
            }});
    }
    </script>
</div>
<div id="dialog-root"></div>
<script>
// Light overlay dialog (D1) — replaces the native blocking browser dialogs (same texts).
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;
    root.innerHTML='<div class="confirm-overlay" onclick="if(event.target===this)document.getElementById(\'dialog-cancel\').click()"><div class="confirm-box">'
        +'<h3>'+escText(opts.title||'Megerősítés')+'</h3>'
        +'<p style="white-space:pre-line">'+escText(opts.message||'')+'</p>'
        +'<div class="form-actions"><button id="dialog-go" class="btn btn-primary">'+escText(opts.confirmLabel||'Megerősítés')+'</button>'
        +'<button type="button" class="btn btn-outline" id="dialog-cancel">Mégsem</button></div>'
        +'</div></div>';
    document.getElementById('dialog-go').onclick=function(){ closeDialog(); if(opts.onConfirm) opts.onConfirm(); };
    document.getElementById('dialog-cancel').onclick=function(){ closeDialog(); if(opts.onCancel) opts.onCancel(); };
}
</script>
{{template "layout_end" .}}
{{end}}