{% extends "base.html" %}
{% block title %}{{ agent_name }} — Files{% endblock %}

{% block content %}
<div class="page">

  <!-- Header -->
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap">
    <h1 style="margin:0">Files</h1>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <button id="upload-btn" class="btn btn-ghost btn-small" onclick="fileBrowserUploadClick()"
              style="display:none">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
             width="14" height="14" style="vertical-align:-2px;margin-right:4px">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="17 8 12 3 7 8"/>
          <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
        Upload
      </button>
      <button id="dl-zip-btn" class="btn btn-primary btn-small" onclick="fileBrowserDownloadZip()"
              style="display:none">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
             width="14" height="14" style="vertical-align:-2px;margin-right:4px">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="7 10 12 15 17 10"/>
          <line x1="12" y1="15" x2="12" y2="3"/>
        </svg>
        Download folder as ZIP
      </button>
    </div>
  </div>
  <input type="file" id="file-upload-input" multiple style="display:none"
         onchange="fileBrowserUploadFiles(this)">

  <!-- Breadcrumb -->
  <div id="file-breadcrumb"
       style="display:flex;align-items:center;gap:4px;flex-wrap:wrap;
              font-size:13px;margin-bottom:16px;color:var(--text-dim)">
  </div>

  <!-- No folder configured -->
  <div id="file-no-folder" style="display:none;padding:40px 0;text-align:center;color:var(--text-dim)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         width="48" height="48" style="margin-bottom:12px;opacity:0.4"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
    <div style="font-size:15px;margin-bottom:6px">No files folder configured</div>
    <div style="font-size:13px">Ask your administrator to set up a files folder for your account.</div>
  </div>

  <!-- File table -->
  <div id="file-table-wrap" class="table-wrap" style="display:none">
    <table>
      <thead>
        <tr>
          <th style="width:32px"></th>
          <th>Name</th>
          <th style="width:100px;text-align:right">Size</th>
          <th style="width:170px">Modified</th>
          <th style="width:180px"></th>
        </tr>
      </thead>
      <tbody id="file-tbody">
        <tr><td colspan="5" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
      </tbody>
    </table>
  </div>

  <!-- Empty folder -->
  <div id="file-empty" style="display:none;padding:32px 0;text-align:center;color:var(--text-dim);font-size:13px">
    This folder is empty.
  </div>

</div>

<!-- File viewer modal -->
<div class="modal-overlay" id="file-viewer-modal" style="display:none;align-items:flex-start;padding:40px 16px"
     onclick="if(event.target===this)closeFileViewer()">
  <div class="modal" style="max-width:860px;width:100%;max-height:calc(100vh - 80px);display:flex;flex-direction:column">
    <div class="modal-header" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
      <span id="fv-title" style="font-family:var(--mono);font-size:13px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 40px)"></span>
      <button class="btn btn-ghost btn-small" onclick="closeFileViewer()">✕</button>
    </div>
    <div id="fv-truncated" style="display:none;font-size:12px;color:var(--yellow);margin-bottom:8px"></div>
    <pre id="fv-content"
         style="margin:0;overflow:auto;flex:1;background:var(--bg3);border:1px solid var(--border);
                border-radius:4px;padding:12px 14px;font-family:var(--mono);font-size:12px;
                line-height:1.6;white-space:pre-wrap;word-break:break-all;max-height:70vh"></pre>
  </div>
</div>

{% endblock %}
