{% extends "components/base.html" %}
{% block title %}Create Post{% endblock %}

{% block main_area %}
  <h1>Create New Post</h1>
  <div class="row">
    <!-- 왼쪽: 마크다운 에디터 -->
    <div class="col-md-6">
      <form method="POST" id="post-form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary mt-3">Save</button>
      </form>
    </div>

    <!-- 오른쪽: 미리보기 -->
    <div class="col-md-6">
      <h2>Preview</h2>
      <div id="preview" class="border p-3" style="background: #f8f9fa; min-height: 300px;"></div>
    </div>
  </div>

  <!-- 마크다운 파서 및 스크립트 -->
  <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
  <script>
    // 마크다운 파서 초기화
    const md = window.markdownit();

    // content 필드와 미리보기 연결
    const textarea = document.getElementById("markdown-editor");
    const preview = document.getElementById("preview");

    // 실시간 미리보기 업데이트
    textarea.addEventListener("input", function () {
      const markdownContent = textarea.value; // textarea 내용 가져오기
      preview.innerHTML = md.render(markdownContent); // 마크다운 -> HTML 변환
    });
  </script>
{% endblock %}