{{define "body-files"}}
<div class="editor-container">
  <div class="editor-list" id="fileList">
    <div class="search-bar"><input placeholder="Filter files..." oninput="filterFiles(this.value)"></div>
    <div id="listEntries"></div>
  </div>
  <div class="editor-main" id="editorMain">
    <p style="color:#888;text-align:center;margin-top:60px">Select a file to edit</p>
  </div>
</div>
<script>
var currentPath = '';
window._allFiles = [];

function loadFiles(path) {
  currentPath = path || '';
  API.get('/api/files' + (path ? '?path=' + encodeURIComponent(path) : '')).then(function(r){
    var files = r.files || r || [];
    window._allFiles = files;
    renderFileList('');
  }).catch(function(e){notify('Failed: '+e.message,'error')});
}

function renderFileList(filter){
  var el = $('#listEntries');
  var f = filter.toLowerCase();
  var items = window._allFiles.filter(function(x){ return !f || x.name.toLowerCase().indexOf(f) >= 0; });
  var html = '<div class="item" onclick="loadFiles(\'\')" style="color:#6cf">[root]</div>';
  if (currentPath) {
    var parent = currentPath.split('/').slice(0,-1).join('/');
    html += '<div class="item" onclick="loadFiles(\''+escJs(parent)+'\')" style="color:#6cf">[..]</div>';
  }
  items.forEach(function(x){
    if (x.dir) {
      var sub = currentPath ? currentPath + '/' + x.name : x.name;
      html += '<div class="item" onclick="loadFiles(\''+escJs(sub)+'\')" style="color:#fc6">'+escHtml(x.name)+'/</div>';
    } else {
      var fp = currentPath ? currentPath + '/' + x.name : x.name;
      html += '<div class="item" onclick="loadFileContent(\''+escJs(fp)+'\',\''+escJs(x.name)+'\')">'+escHtml(x.name)+'</div>';
    }
  });
  el.innerHTML = html;
}

function filterFiles(val) { renderFileList(val); }

function loadFileContent(path, name) {
  currentPath = path;
  API.get('/api/files?path=' + encodeURIComponent(path)).then(function(r){
    var content = r.content || r.raw || JSON.stringify(r,null,2);
    var html = '<h2>'+escHtml(name)+'</h2>';
    html += '<div class="form-group"><label>Path</label><span style="font-size:11px;color:#888">'+escHtml(path)+'</span></div>';
    html += '<textarea id="fileContent" rows="20" style="width:100%;font-family:monospace;font-size:12px;background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);padding:8px">'+escHtml(content)+'</textarea>';
    html += '<div class="btn-row"><button class="btn btn-primary" onclick="saveFile(\''+escJs(path)+'\')">Save</button></div>';
    $('#editorMain').innerHTML = html;
  }).catch(function(e){notify('Failed: '+e.message,'error')});
}

function saveFile(path) {
  var content = $('#fileContent').value;
  fetch('/api/files?path=' + encodeURIComponent(path), {
    method: 'PUT',
    headers: {'Content-Type': 'text/plain'},
    body: content,
    credentials: 'same-origin'
  }).then(function(r) {
    if (!r.ok) throw new Error('Save failed');
    return r.json();
  }).then(function() {
    notify('File saved', 'success');
    updateUndoBar();
  }).catch(function(e) { notify('Save failed: '+e.message, 'error'); });
}

window.refreshPage = function() { loadFiles(currentPath); };
function escHtml(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
function escJs(s) { return String(s||'').replace(/\\/g,'\\\\').replace(/'/g,"\\'").replace(/"/g,'\\"'); }

loadFiles('');
</script>
{{end}}