{% extends base_layout %}
{% block title %}{% if is_new %}New file{% else %}Edit {{ rel_path }}{% endif %} · {{ overlay.name }}{% endblock %}
{% block extra_head %}{% include "_editor_assets.html" %}{% endblock %}
{% block content %}
<div id="files-editor-fragment" aria-labelledby="files-editor-title">
  <div class="modal-header">
    <h2 id="files-editor-title" class="files-editor-path">
      <span class="files-editor-title-text">{% if is_new %}{{ at_folder ~ '/' if at_folder else '' }}…new file{% else %}{{ rel_path }}{% endif %}</span>
    </h2>
    <button type="button" class="modal-close" data-routed-modal-dismiss aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    <label class="files-editor-field">
      <span class="files-field-label">Filename</span>
      <input type="text" class="files-editor-filename" data-editor-filename autocomplete="off" spellcheck="false" value="{{ rel_path }}">
    </label>
    <p class="files-editor-rename-hint" hidden>↻ Save will rename <code class="files-rename-from"></code> → <code class="files-rename-to"></code>.</p>

    {% if not is_binary %}
    <div class="files-editor-text">
      <label class="files-editor-field files-editor-language-field">
        <span class="files-field-label">Language</span>
        <select data-editor-language-select aria-label="Editor language">
          <option value="auto">auto (from filename)</option>
          <option value="srccfg">srccfg (.cfg)</option>
          <option value="bash">bash (.sh)</option>
          <option value="plain">plain</option>
        </select>
      </label>
      <label class="files-editor-field">
        <span class="files-field-label">Content</span>
        <div class="editor-mount" style="--editor-rows: 14"><textarea class="files-editor-content" rows="14" spellcheck="false" data-editor-language="auto" data-overlay-id="{{ overlay.id }}" data-rel-path="{{ rel_path }}" data-at-folder="{{ at_folder }}">{{ content }}</textarea></div>
      </label>
      <div class="files-editor-meta muted">
        <span class="files-editor-byte-count">UTF-8 · {{ byte_count }} bytes</span>
        <span>Ctrl+S to save</span>
      </div>
    </div>
    {% else %}
    <div class="files-editor-binary" data-rel-path="{{ rel_path }}">
      <div class="files-editor-binary-note">
        <strong>⛌ Inline editing not available</strong>
        · <span class="files-editor-binary-size">{{ byte_count }} bytes</span> · {{ mime_type }}
      </div>
      <label class="files-field-label files-editor-binary-replace-label">Replace file</label>
      <div class="files-editor-replace-zone">
        <p class="files-editor-replace-idle">↑ Drop a file here to replace ·
          <button type="button" class="link-button files-editor-replace-browse">browse</button> ·
          single file only · keeps the filename
        </p>
        <p class="files-editor-replace-queued" hidden>
          ↻ <strong class="files-editor-replace-name"></strong> ·
          <span class="files-editor-replace-size"></span> ·
          <span class="muted">queued</span>
          <button type="button" class="link-button files-editor-replace-clear" aria-label="Clear queued replacement">✕</button>
        </p>
        <input type="file" class="files-editor-replace-input" hidden>
      </div>
    </div>
    {% endif %}
  </div>
  <div class="modal-footer files-editor-footer">
    {% if not is_new %}<button type="button" class="danger-outline files-editor-delete">Delete</button>{% endif %}
    <span class="files-editor-footer-spacer"></span>
    {% if not is_new %}<a class="button-secondary files-editor-download" href="/overlays/{{ overlay.id }}/files/download?path={{ rel_path|urlencode }}">⬇ Download</a>{% endif %}
    <button type="button" class="button-secondary" data-routed-modal-dismiss>Cancel</button>
    <button type="button" class="files-editor-save"{% if is_binary %} disabled{% endif %}>{% if is_new %}Create{% elif is_binary %}Replace{% else %}Save{% endif %}</button>
  </div>
</div>
{% endblock %}