{% extends admin_config.templates ~ "/base.html" %} {% block title %}{% if
file_path %}Edit: {{ file_path }}{% else %}New File{% endif %}{% endblock %} {%
set active_page = 'editor' %} {% block head %} {# ── TUI Editor (toast-ui) —
WYSIWYG/Markdown editor for content. #}
<link
  rel="stylesheet"
  href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css"
/>
<link
  rel="stylesheet"
  href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css"
/>
<link
  rel="stylesheet"
  href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css"
/>
<link
  rel="stylesheet"
  href="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.css"
/>
<script
  src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"
  defer
></script>
<script
  src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"
  defer
></script>
<script
  src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.js"
  defer
></script>
<script
  src="https://uicdn.toast.com/editor-plugin-chart/latest/toastui-editor-plugin-chart.min.js"
  defer
></script>
<script
  src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"
  defer
></script>
<script
  src="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.js"
  defer
></script>
<script
  src="https://uicdn.toast.com/editor-plugin-table-merged-cell/latest/toastui-editor-plugin-table-merged-cell.min.js"
  defer
></script>
<script
  src="https://uicdn.toast.com/editor-plugin-uml/latest/toastui-editor-plugin-uml.min.js"
  defer
></script>

{# ── Guifier — Visual JSON/YAML editor for frontmatter metadata. #} {# Note:
Guifier ships as an ES module only — must use type="module" to import. #}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/guifier@1.0.33/dist/Guifier.min.css"
/>
<script type="module">
  import Guifier from "https://cdn.jsdelivr.net/npm/guifier@1.0.33/dist/Guifier.min.js";
  window.Guifier = Guifier;
</script>

{# ── File Icons — file-type icons from Atom File-icons (port for browser). #}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/css/file-icons-cdn.min.css"
/>
<script type="module">
  import FileIcons from "https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/js/file-icons.esm.min.js";
  window.FileIcons = FileIcons;
</script>
{% endblock %} {% block content %}
<div class="mx-auto space-y-4">
  {# ── Page header with clickable breadcrumbs ── #}
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      {% if file_path %}
      <nav class="text-sm text-moose-500 mb-1" aria-label="Breadcrumb">
        <a
          href="/{{ prefix }}/browse/"
          class="hover:text-moose-900 transition-colors"
          >Content</a
        >
        {% set parts = file_path.split('/') %} {% for part in parts %}
        <span class="text-moose-300">/</span>
        {% if loop.last %}
        <span class="text-moose-900 font-medium">{{ part }}</span>
        {% else %}
        <a
          href="/{{ prefix }}/browse/{{ parts[:loop.index]|join('/') }}"
          class="hover:text-moose-900 transition-colors"
          >{{ part }}</a
        >
        {% endif %} {% endfor %}
      </nav>
      <h1 class="text-2xl font-bold text-moose-900">Edit</h1>
      {% else %}
      <h1 class="text-2xl font-bold text-moose-900">New File</h1>
      {% endif %}
    </div>
    <div class="flex items-center gap-2">
      <button
        id="btn-save"
        onclick="saveFile()"
        class="inline-flex items-center gap-1.5 bg-moose-700 hover:bg-moose-800 disabled:opacity-60 disabled:cursor-not-allowed text-white text-sm font-medium px-4 py-1.5 rounded-lg transition-colors"
      >
        <svg
          id="save-icon"
          class="w-4 h-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M5 13l4 4L19 7"
          />
        </svg>
        <svg id="save-spinner" class="hidden w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden="true"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path></svg>
        <span id="save-label">Save</span>
      </button>
    </div>
  </div>

  {# ── File path input (for new files) ── #} {% if not file_path %}
  <div>
    <label
      for="file-path-input"
      class="block text-xs font-medium text-moose-500 mb-1"
      >File path (e.g. blog/my-post.md)</label
    >
    <input
      id="file-path-input"
      type="text"
      placeholder="blog/my-post.md"
      class="w-full border border-moose-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-moose-500 focus:border-transparent"
    />
  </div>
  {% endif %} {# ── Tabbed editor interface ── #}
  <div class="bg-white rounded-xl border border-moose-200 overflow-hidden">
    {# ── Tab navigation ── #}
    <div class="flex items-center justify-between">
      <div class="flex border-b border-moose-200">
        <button
          id="tab-content"
          onclick="switchTab('content')"
          class="tab-button active px-5 py-3 text-sm font-medium border-b-2 border-moose-700 text-moose-900 bg-moose-50"
        >
          Content
        </button>
        <button
          id="tab-metadata"
          onclick="switchTab('metadata')"
          class="tab-button px-5 py-3 text-sm font-medium border-b-2 border-transparent text-moose-500 hover:text-moose-700 hover:bg-moose-50 transition-colors"
        >
          Metadata
        </button>
      </div>

      <div class="pr-2">
        <button
          id="preview-style-toggle"
          type="button"
          onclick="togglePreviewStyle()"
          aria-pressed="false"
          title="Switch to tabbed preview"
          class="inline-flex items-center gap-1.5 bg-white hover:bg-moose-100 text-moose-700 border border-moose-300 text-sm font-medium px-3 py-1.5 rounded-lg transition-colors"
        >
          <svg
            class="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 5h16v14H4zM12 5v14"
            />
          </svg>
          <span id="preview-style-label">Split</span>
        </button>
      </div>
    </div>

    {# ── Tab content panels ── #}
    <div id="panel-content" class="tab-panel">
      <div id="tui-editor"></div>
      <textarea
        id="fallback-editor"
        class="hidden w-full h-full p-4 text-sm font-mono text-moose-800 border-0 focus:outline-none resize-none"
        placeholder="Write your markdown here…"
      ></textarea>
    </div>

      <div id="panel-metadata" class="tab-panel hidden">
        <div class="relative flex items-center justify-between gap-3 border-b border-moose-200 bg-moose-50 px-4 py-3">
          <div>
            <p class="text-sm font-semibold text-moose-900">Frontmatter</p>
            <p class="text-xs text-moose-500">Add fields currently supported by Moosey CMS.</p>
          </div>
          <button id="metadata-field-toggle" type="button" onclick="toggleMetadataFieldMenu()" aria-expanded="false" class="rounded-lg bg-moose-700 px-3 py-2 text-sm font-medium text-white hover:bg-moose-800">Add metadata</button>
          <div id="metadata-field-menu" class="absolute right-4 top-16 z-30 hidden w-[min(28rem,calc(100vw-3rem))] overflow-hidden rounded-xl border border-moose-200 bg-white shadow-2xl">
            <div class="border-b border-moose-200 p-3"><input id="metadata-field-search" type="search" placeholder="Search supported fields…" oninput="renderMetadataFieldMenu(this.value)" class="w-full rounded-lg border border-moose-300 px-3 py-2 text-sm focus:border-moose-700 focus:outline-none focus:ring-2 focus:ring-moose-200"></div>
            <div id="metadata-field-list" class="max-h-80 overflow-y-auto p-2"></div>
          </div>
        </div>
        <div id="guifier-container" class="p-4"></div>
      </div>
  </div>
</div>
{# ── File Picker Modal ── #} {% if admin_config._static_dir %}
<div id="file-picker-modal" class="fixed inset-0 z-50 hidden">
  {# Backdrop #}
  <div class="absolute inset-0 bg-black/50" onclick="closeFilePicker()"></div>

  {# Modal #}
  <div
    class="absolute inset-4 md:inset-8 lg:inset-16 bg-white rounded-xl shadow-2xl flex flex-col overflow-hidden"
  >
    {# Header #}
    <div
      class="flex items-center justify-between px-4 py-3 border-b border-moose-200"
    >
      <h2 class="text-lg font-semibold text-moose-900">File Picker</h2>
      <button
        onclick="closeFilePicker()"
        class="text-moose-400 hover:text-moose-600"
      >
        <svg
          class="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    {# Breadcrumbs #}
    <div
      id="fp-breadcrumbs"
      class="px-4 py-2 text-sm text-moose-600 border-b border-moose-100 bg-moose-50"
    >
      <span class="cursor-pointer hover:text-moose-900" onclick="fpNavigate('')"
        >Root</span
      >
    </div>

    {# Main content area: grid + preview #}
    <div class="flex flex-1 overflow-hidden">
      {# File grid #}
      <div class="flex-1 overflow-y-auto p-4">
        <div
          id="fp-grid"
          class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3"
        >
          {# Populated by JS #}
        </div>
        <div id="fp-empty" class="hidden text-center py-12 text-moose-400">
          <p class="text-lg mb-2">No files yet</p>
          <button
            onclick="document.getElementById('fp-upload-input').click()"
            class="text-sm text-moose-600 underline hover:text-moose-900"
          >
            Upload one
          </button>
        </div>
      </div>

      {# Preview panel (hidden by default) #}
      <div
        id="fp-preview"
        class="hidden w-80 border-l border-moose-200 bg-moose-50 p-4 overflow-y-auto"
      >
        <div id="fp-preview-content" class="mb-4"></div>
        <div id="fp-preview-info" class="text-sm text-moose-600 mb-4"></div>
        <button
          id="fp-insert-btn"
          onclick="fpInsertSelected()"
          class="w-full bg-moose-700 hover:bg-moose-800 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
        >
          Insert
        </button>
      </div>
    </div>

    {# Footer #}
    <div
      class="flex items-center justify-between px-4 py-3 border-t border-moose-200 bg-moose-50"
    >
      <div class="flex gap-2">
        <input
          type="file"
          id="fp-upload-input"
          multiple
          class="hidden"
          onchange="fpUploadFiles(this.files)"
        />
        <button
          onclick="document.getElementById('fp-upload-input').click()"
          class="text-sm bg-white border border-moose-300 hover:bg-moose-100 text-moose-700 px-3 py-1.5 rounded-lg transition-colors"
        >
          Upload
        </button>
        <button
          onclick="fpCreateFolder()"
          class="text-sm bg-white border border-moose-300 hover:bg-moose-100 text-moose-700 px-3 py-1.5 rounded-lg transition-colors"
        >
          New Folder
        </button>
      </div>
      <button
        onclick="closeFilePicker()"
        class="text-sm text-moose-500 hover:text-moose-700"
      >
        Cancel
      </button>
    </div>
  </div>
</div>
{% endif %} {% endblock %} {% block scripts %}
<script>
  {% include admin_config.templates ~ "/editor.js" %}
</script>
{% endblock %}