1 files changed, 62 insertions, 0 deletions
diff --git a/templates/admin/form.html b/templates/admin/form.html
new file mode 100644
index 0000000..1b577c9
--- /dev/null
+++ b/templates/admin/form.html
@@ -0,0 +1,62 @@
+{{define "form-content"}}
+  <h1>{{.Title}}</h1>
+  <form method="POST" action="{{.Action}}">
+    <label for="title">Title</label>
+    <input type="text" id="title" name="title" value="{{.Post.Title}}" required autofocus>
+
+    <label for="date">Date</label>
+    <input type="date" id="date" name="date" value="{{.Post.Date}}">
+
+    <label for="tags">Tags</label>
+    <input type="text" id="tags" name="tags" value="{{.Post.Tags}}" placeholder="tag1, tag2, tag3">
+    <p class="hint">Comma-separated list of tags.</p>
+
+    <label for="content">Content (Markdown)</label>
+    <textarea id="content" name="content" style="display: none;">{{.Post.Content}}</textarea>
+    <div id="editor" style="border: 1px solid #ccc; border-radius: 4px; min-height: 340px;"></div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn btn-primary">
+        {{if .IsNew}}Create Post{{else}}Save Changes{{end}}
+      </button>
+      <a href="/admin/" class="btn btn-secondary">Cancel</a>
+    </div>
+  </form>
+
+  <script type="module">
+    import { Crepe } from '@milkdown/crepe';
+
+    const contentField = document.getElementById('content');
+    const editorContainer = document.getElementById('editor');
+    const form = contentField.closest('form');
+
+    // Initialize Crepe with the textarea content
+    const crepe = new Crepe({
+      root: editorContainer,
+      defaultValue: contentField.value,
+    });
+
+    // Sync editor content back to textarea before form submission
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      try {
+        // Get the markdown content from Crepe
+        const markdown = await crepe.getMarkdown();
+        contentField.value = markdown;
+      } catch (err) {
+        console.error('Failed to get markdown from editor:', err);
+      }
+
+      // Submit the form
+      form.submit();
+    });
+  </script>
+
+  <noscript>
+    <style>
+      #editor { display: none; }
+      #content { display: block !important; }
+    </style>
+  </noscript>
+{{end}}