{% extends "base.html" %}
{% block title %}Edit — MemForge{% endblock %}

{% block content %}
<div class="max-w-5xl" x-data="editor({{ content | tojson }})">
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-lg font-bold truncate text-gray-600 dark:text-gray-400 font-mono text-sm">{{ file_path }}</h1>
    <div class="flex items-center gap-2">
      <span id="save-status" class="text-sm text-gray-400"></span>
      <button @click="togglePreview()"
              class="text-sm px-3 py-1.5 border border-gray-200 dark:border-gray-600 rounded text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
              x-text="showPreview ? 'Editor' : 'Preview'"></button>
      <button @click="save()"
              class="text-sm px-4 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded font-medium">
        Save
      </button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden" style="height: calc(100vh - 8rem)">
    <!-- Editor pane -->
    <textarea x-show="!showPreview"
              x-model="content"
              class="w-full h-full font-mono text-sm p-4 bg-transparent resize-none focus:outline-none dark:text-gray-100"
              spellcheck="false"
              placeholder="Start typing markdown…"></textarea>

    <!-- Preview pane -->
    <div x-show="showPreview" x-cloak
         class="h-full overflow-y-auto p-6 prose prose-sm dark:prose-invert max-w-none"
         x-html="renderedHtml"></div>
  </div>
</div>

<script>
function editor(initialContent) {
  return {
    content: initialContent,
    showPreview: false,
    renderedHtml: '',

    async togglePreview() {
      this.showPreview = !this.showPreview;
      if (this.showPreview) await this.renderPreview();
    },

    async renderPreview() {
      const params = new URLSearchParams({ content: this.content });
      const res = await fetch('/api/preview?' + params.toString());
      this.renderedHtml = await res.text();
    },

    async save() {
      const status = document.getElementById('save-status');
      status.textContent = 'Saving…';
      const form = new FormData();
      form.append('file_path', {{ file_path | tojson }});
      form.append('content', this.content);
      const res = await fetch('/api/article', { method: 'PUT', body: form });
      const text = await res.text();
      const div = document.createElement('div');
      div.innerHTML = text;
      status.textContent = div.textContent || (res.ok ? '✓ Saved' : '✗ Error');
      setTimeout(() => { status.textContent = ''; }, 3000);
    }
  }
}
</script>
{% endblock %}