{% extends "baseTemplate/index.html" %}
{% load static %}

{% comment %}
  Two-pane file browser.

  Angular interpolation is {$ … $}; Django keeps {{ … }}. Every path shown here
  is relative to the site home — the browser never learns an absolute path, and
  the server would refuse one anyway.

  The inline editor upgrades itself to CodeMirror when
  static/vendor/codemirror/ is present (see static/vendor/README.md); without it
  the same textarea still saves correctly, just without syntax highlighting.
{% endcomment %}

{% block title %}File Manager{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{% static 'vendor/codemirror/codemirror.min.css' %}"
      onerror="this.remove();">
<style>
  .cp-fm { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
  @media (max-width: 900px) { .cp-fm { grid-template-columns: 1fr; } }

  .cp-fm__tree { max-height: 70vh; overflow: auto; }
  .cp-fm__tree button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 10px; border: 0; background: transparent; text-align: left;
    border-radius: var(--cp-radius); color: inherit; font: inherit; cursor: pointer;
  }
  .cp-fm__tree button:hover { background: var(--cp-primary-soft); }
  .cp-fm__tree button.is-active { background: var(--cp-primary-soft); font-weight: 600; }
  .cp-fm__tree .cp-fm__depth { padding-left: 18px; }

  .cp-fm__pane { position: relative; min-height: 360px; }
  .cp-fm__drop {
    position: absolute; inset: 0; z-index: 5;
    display: grid; place-items: center; gap: 8px;
    background: var(--cp-primary-soft);
    border: 2px dashed var(--cp-primary);
    border-radius: var(--cp-radius-lg);
    color: var(--cp-primary); font-weight: 600;
  }

  .cp-fm__row { cursor: default; }
  .cp-fm__row.is-selected { background: var(--cp-primary-soft); }
  .cp-fm__name { display: flex; align-items: center; gap: 8px; }
  .cp-fm__name i { width: 16px; text-align: center; color: var(--cp-neutral); }
  .cp-fm__name .fa-folder, .cp-fm__name .fa-folder-open { color: var(--cp-accent); }
  .cp-fm__link { background: 0; border: 0; padding: 0; font: inherit; color: inherit;
                 cursor: pointer; text-align: left; }
  .cp-fm__link:hover { text-decoration: underline; }

  .cp-fm__menu {
    position: fixed; z-index: 1080; min-width: 200px; padding: 6px;
    background: var(--cp-bg-subtle); border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-lg);
  }
  .cp-fm__menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 7px 10px; border: 0; background: transparent; color: inherit;
    font: inherit; border-radius: var(--cp-radius); cursor: pointer; text-align: left;
  }
  .cp-fm__menu button:hover { background: var(--cp-primary-soft); }
  .cp-fm__menu button.is-danger { color: var(--cp-danger); }
  .cp-fm__menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--cp-border); }

  .cp-fm__editor textarea { width: 100%; min-height: 55vh; font-family: var(--cp-font-mono); }
  .cp-fm__editor .CodeMirror { height: 55vh; border: 1px solid var(--cp-border);
                               border-radius: var(--cp-radius); }
  .cp-fm__perm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .cp-fm__perm fieldset { border: 1px solid var(--cp-border); border-radius: var(--cp-radius);
                          padding: 8px 12px; }
  .cp-fm__perm legend { font-size: .8rem; color: var(--cp-neutral); padding: 0 4px; }
</style>
{% endblock %}

{% block content %}
<div ng-controller="fileManagerController" ng-cloak>

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title">File Manager</h1>
      <p class="cp-page-head__sub">
        Everything here runs as the website's own system user, inside its home
        directory. Paths outside it are refused, not clipped.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <select class="cp-select" ng-model="site" ng-change="changeSite()"
              aria-label="Website">
        {% for website in websites %}
        <option value="{{ website }}">{{ website }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  {% if not websites %}
  <div class="cp-alert cp-alert--info">
    <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
    <p>You have no websites yet, so there are no files to manage.</p>
  </div>
  {% else %}

  <div class="cp-fm">

    <!-- left pane: shortcuts and folders ------------------------------- -->
    <aside class="cp-card">
      <div class="cp-card__head">
        <div>
          <h2 class="cp-card__title">Folders</h2>
          <p class="cp-card__sub cp-truncate" ng-bind="siteUser ? 'as ' + siteUser : ''"></p>
        </div>
      </div>
      <div class="cp-card__body cp-fm__tree">
        <button type="button" ng-class="{'is-active': path === ''}" ng-click="open('')">
          <i class="fa-solid fa-house" aria-hidden="true"></i> Site home
        </button>
        <button type="button" ng-class="{'is-active': path === 'public_html'}"
                ng-click="open('public_html')">
          <i class="fa-solid fa-globe" aria-hidden="true"></i> public_html
        </button>
        <button type="button" ng-class="{'is-active': path === 'logs'}" ng-click="open('logs')">
          <i class="fa-solid fa-file-lines" aria-hidden="true"></i> logs
        </button>

        <hr>

        <button type="button" ng-if="path" ng-click="open(parentPath())">
          <i class="fa-solid fa-turn-up" aria-hidden="true"></i> Up one level
        </button>
        <button type="button" class="cp-fm__depth"
                ng-repeat="entry in directories()"
                ng-click="open(entry.path)">
          <i class="fa-solid fa-folder" aria-hidden="true"></i>
          <span class="cp-truncate" ng-bind="entry.name"></span>
        </button>
        <p class="cp-empty" ng-if="!directories().length && !busy">No sub-folders here.</p>
      </div>
    </aside>

    <!-- right pane: listing -------------------------------------------- -->
    <section class="cp-card cp-fm__pane"
             ng-class="{'is-dragging': dragging}"
             on-file-drop="uploadFiles(files)">

      <div class="cp-fm__drop" ng-if="dragging">
        <i class="fa-solid fa-cloud-arrow-up fa-2x" aria-hidden="true"></i>
        <span>Drop files to upload into <span ng-bind="path || 'the site home'"></span></span>
      </div>

      <div class="cp-card__head">
        <nav class="cp-breadcrumb" aria-label="Breadcrumb">
          <button type="button" class="cp-fm__link" ng-click="open('')">
            <i class="fa-solid fa-house" aria-hidden="true"></i>
            <span ng-bind="site"></span>
          </button>
          <span ng-repeat="crumb in crumbs()">
            <span aria-hidden="true">/</span>
            <button type="button" class="cp-fm__link"
                    ng-click="open(crumb.path)" ng-bind="crumb.name"></button>
          </span>
        </nav>
        <div class="cp-page-head__actions">
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="refresh()">
            <i class="fa-solid fa-rotate" aria-hidden="true"></i> Refresh
          </button>
        </div>
      </div>

      <div class="cp-table-toolbar">
        <div class="cp-btn-group">
          <button type="button" class="cp-btn cp-btn--primary cp-btn--sm" ng-click="pickFiles()">
            <i class="fa-solid fa-upload" aria-hidden="true"></i> Upload
          </button>
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="newFolder()">
            <i class="fa-solid fa-folder-plus" aria-hidden="true"></i> New folder
          </button>
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="newFile()">
            <i class="fa-solid fa-file-circle-plus" aria-hidden="true"></i> New file
          </button>
        </div>

        <div class="cp-btn-group" ng-if="selection().length">
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="startClipboard('copy')">
            <i class="fa-solid fa-copy" aria-hidden="true"></i> Copy
          </button>
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="startClipboard('move')">
            <i class="fa-solid fa-scissors" aria-hidden="true"></i> Cut
          </button>
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="compressSelection()">
            <i class="fa-solid fa-file-zipper" aria-hidden="true"></i> Compress
          </button>
          <button type="button" class="cp-btn cp-btn--danger cp-btn--sm" ng-click="deleteSelection()">
            <i class="fa-solid fa-trash" aria-hidden="true"></i>
            Delete (<span ng-bind="selection().length"></span>)
          </button>
        </div>

        <div class="cp-btn-group" ng-if="clipboard.paths.length">
          <button type="button" class="cp-btn cp-btn--accent cp-btn--sm" ng-click="paste()">
            <i class="fa-solid fa-paste" aria-hidden="true"></i>
            Paste <span ng-bind="clipboard.paths.length"></span>
            (<span ng-bind="clipboard.mode"></span>)
          </button>
          <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="clearClipboard()">
            Cancel
          </button>
        </div>

        <input class="cp-input cp-table-search" type="search" ng-model="filter"
               placeholder="Filter this folder" aria-label="Filter">
      </div>

      <div class="cp-card__body cp-card__body--flush">
        <div class="cp-empty" ng-if="busy">
          <span class="cp-spinner" aria-hidden="true"></span> Reading folder…
        </div>

        <div class="cp-alert cp-alert--danger" ng-if="error && !busy">
          <i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i>
          <p ng-bind="error"></p>
        </div>

        <div class="cp-empty" ng-if="!busy && !error && !visible().length">
          <p>This folder is empty.</p>
        </div>

        <div class="cp-table-wrap" ng-if="!busy && visible().length">
          <table class="cp-table cp-table--compact">
            <thead>
              <tr>
                <th scope="col" style="width: 32px;">
                  <input type="checkbox" ng-model="allSelected" ng-change="toggleAll()"
                         aria-label="Select everything in this folder">
                </th>
                <th scope="col">Name</th>
                <th scope="col" class="cp-nowrap">Size</th>
                <th scope="col" class="cp-nowrap">Permissions</th>
                <th scope="col" class="cp-nowrap">Owner</th>
                <th scope="col" class="cp-nowrap">Modified</th>
                <th scope="col" class="cp-table__actions">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr class="cp-fm__row" ng-repeat="entry in visible()"
                  ng-class="{'is-selected': entry.selected}"
                  ng-click="select(entry, $event)"
                  ng-dblclick="activate(entry)"
                  on-context-menu="showMenu(entry, $event)">
                <td><input type="checkbox" ng-model="entry.selected"
                           ng-click="$event.stopPropagation()"
                           aria-label="Select"></td>
                <td>
                  <span class="cp-fm__name">
                    <i class="fa-solid" aria-hidden="true"
                       ng-class="iconFor(entry)"></i>
                    <button type="button" class="cp-fm__link cp-truncate"
                            ng-click="activate(entry); $event.stopPropagation()"
                            ng-bind="entry.name"></button>
                    <span class="cp-badge cp-badge--info" ng-if="entry.isLink">link</span>
                    <span class="cp-badge cp-badge--danger" ng-if="entry.brokenLink">broken</span>
                  </span>
                </td>
                <td class="cp-nowrap cp-faint"
                    ng-bind="entry.type === 'dir' ? '—' : (entry.size | cpBytes)"></td>
                <td class="cp-nowrap cp-mono" ng-bind="entry.mode"></td>
                <td class="cp-nowrap cp-faint" ng-bind="entry.owner"></td>
                <td class="cp-nowrap cp-faint" ng-bind="when(entry.mtime)"></td>
                <td class="cp-table__actions">
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                          ng-click="showMenu(entry, $event)" title="Actions">
                    <i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <p class="cp-help" ng-if="skipped">
          <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
          <span ng-bind="skipped"></span> item(s) in this folder have names containing
          a tab or newline and cannot be shown safely. Rename them over SSH.
        </p>
      </div>
    </section>
  </div>

  <!-- context menu ----------------------------------------------------- -->
  <div class="cp-fm__menu" ng-if="menu.open"
       ng-style="{ top: menu.y + 'px', left: menu.x + 'px' }">
    <button type="button" ng-click="activate(menu.entry)">
      <i class="fa-solid fa-folder-open" aria-hidden="true"></i>
      <span ng-bind="menu.entry.type === 'dir' ? 'Open' : 'Edit'"></span>
    </button>
    <button type="button" ng-if="menu.entry.type === 'file'" ng-click="download(menu.entry)">
      <i class="fa-solid fa-download" aria-hidden="true"></i> Download
    </button>
    <button type="button" ng-click="rename(menu.entry)">
      <i class="fa-solid fa-pen" aria-hidden="true"></i> Rename
    </button>
    <button type="button" ng-click="openProperties(menu.entry)">
      <i class="fa-solid fa-sliders" aria-hidden="true"></i> Properties &amp; permissions
    </button>
    <hr>
    <button type="button" ng-click="startClipboard('copy', menu.entry)">
      <i class="fa-solid fa-copy" aria-hidden="true"></i> Copy
    </button>
    <button type="button" ng-click="startClipboard('move', menu.entry)">
      <i class="fa-solid fa-scissors" aria-hidden="true"></i> Cut
    </button>
    <button type="button" ng-click="compressSelection(menu.entry)">
      <i class="fa-solid fa-file-zipper" aria-hidden="true"></i> Compress
    </button>
    <button type="button" ng-if="isArchive(menu.entry)" ng-click="extract(menu.entry)">
      <i class="fa-solid fa-box-open" aria-hidden="true"></i> Extract here
    </button>
    <hr>
    <button type="button" class="is-danger" ng-click="deleteSelection(menu.entry)">
      <i class="fa-solid fa-trash" aria-hidden="true"></i> Delete
    </button>
  </div>

  <input type="file" id="fmUploadInput" multiple class="cp-hidden" tabindex="-1"
         aria-label="Choose files to upload"
         on-file-picked="uploadFiles(files)" aria-hidden="true">

  <!-- editor ----------------------------------------------------------- -->
  <div class="modal fade" id="fmEditorModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title cp-mono" ng-bind="editor.path"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body cp-fm__editor">
          <p class="cp-help" ng-if="!editor.rich">
            Syntax highlighting is off because <span class="cp-mono">static/vendor/codemirror/</span>
            is not installed. Saving works exactly the same.
          </p>
          <textarea id="fmEditorArea" ng-model="editor.content" spellcheck="false"
                    aria-label="File contents"></textarea>
        </div>
        <div class="modal-footer">
          <span class="cp-faint" ng-bind="editor.status"></span>
          <button type="button" class="cp-btn cp-btn--ghost" data-bs-dismiss="modal">Close</button>
          <button type="button" class="cp-btn cp-btn--primary"
                  ng-click="saveEditor()" ng-disabled="editor.busy">
            <i class="fa-solid fa-floppy-disk" aria-hidden="true"></i> Save
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- properties / chmod ------------------------------------------------ -->
  <div class="modal fade" id="fmPropertiesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Properties</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="cp-table-wrap">
            <table class="cp-table cp-table--compact">
              <tbody>
                <tr><th scope="row">Name</th><td class="cp-mono" ng-bind="props.name"></td></tr>
                <tr><th scope="row">Path</th><td class="cp-mono" ng-bind="props.path || '(site home)'"></td></tr>
                <tr><th scope="row">Type</th><td ng-bind="props.kind"></td></tr>
                <tr ng-if="props.linkTarget">
                  <th scope="row">Points to</th>
                  <td class="cp-mono" ng-bind="props.linkTarget"></td>
                </tr>
                <tr><th scope="row">Size</th><td ng-bind="props.isDir ? props.diskUsage : (props.size | cpBytes)"></td></tr>
                <tr><th scope="row">Owner</th><td class="cp-mono" ng-bind="props.owner + ':' + props.group"></td></tr>
                <tr><th scope="row">Modified</th><td ng-bind="when(props.mtime)"></td></tr>
              </tbody>
            </table>
          </div>

          <h6 class="cp-label">Permissions</h6>
          <div class="cp-fm__perm">
            <fieldset ng-repeat="who in ['Owner', 'Group', 'Others']">
              <legend ng-bind="who"></legend>
              <label class="cp-check">
                <input type="checkbox" ng-model="perm[$index].r" ng-change="syncMode()"> Read
              </label>
              <label class="cp-check">
                <input type="checkbox" ng-model="perm[$index].w" ng-change="syncMode()"> Write
              </label>
              <label class="cp-check">
                <input type="checkbox" ng-model="perm[$index].x" ng-change="syncMode()"> Execute
              </label>
            </fieldset>
          </div>

          <div class="cp-field">
            <label class="cp-label" for="fmMode">Octal mode</label>
            <input class="cp-input cp-mono" id="fmMode" type="text" maxlength="3"
                   ng-model="modeText" ng-change="syncBoxes()">
            <p class="cp-help">
              Three octal digits. The setuid, setgid and sticky bits cannot be set
              from the panel — use SSH if you genuinely need them.
            </p>
          </div>

          <label class="cp-check" ng-if="props.isDir">
            <input type="checkbox" ng-model="recursive">
            Apply to everything inside this folder
          </label>
        </div>
        <div class="modal-footer">
          <button type="button" class="cp-btn cp-btn--ghost" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="cp-btn cp-btn--primary" ng-click="applyChmod()">
            Apply permissions
          </button>
        </div>
      </div>
    </div>
  </div>

  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_FM = {
    site: "{{ websites.0|default:''|escapejs }}",
    maxUploadMB: {{ maxUploadMB }},
    maxEditKB: {{ maxEditKB }},
    allowedExtensions: "{{ allowedExtensions|escapejs }}",
    blockedExtensions: "{{ blockedExtensions|escapejs }}"
  };
</script>
<script src="{% static 'vendor/codemirror/codemirror.min.js' %}" onerror="this.remove();"></script>
<script src="{% static 'fileManager/fileManager.js' %}"></script>
{% endblock %}