{{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}}