{# 右ペイン: 本文プレビュー / 編集（textarea + Ctrl+S + mtime トラッキング）。
   カードクリックで edit.js が GET /preview を呼び content を流し込む。
   保存は POST /api/cards/content（mtime 不一致なら 409 → 警告ダイアログ）。 #}
<div class="edit-pane-inner">
  <div class="ep-head">
    <div class="ep-tabs" role="tablist">
      <button type="button" class="ep-tab on" data-tab="preview" role="tab" aria-selected="true">{{ T.tab_preview }}</button>
      <button type="button" class="ep-tab" data-tab="edit" role="tab" aria-selected="false">{{ T.tab_edit }}</button>
    </div>
    <div class="ep-info">
      <span class="ep-path" data-bind="path">{{ T.select_card_hint }}</span>
    </div>
  </div>

  {# OKF（plan_okf-adoption_2026-06-29.md C4）拡張: tags / owner / related / review_status の
     インライン編集ブロック。値ゼロのカードでもそのまま編集できる（書き込みは frontmatter のみ）。 #}
  <section class="ep-okf" data-bind-section="okf" hidden>
    <h3 class="ep-okf-title">frontmatter（OKF）</h3>
    <div class="ep-okf-grid">
      <label class="ep-okf-row">
        <span class="ep-okf-label">owner</span>
        <span class="ep-okf-inputwrap">
          <input type="text" data-bind="owner" class="ep-okf-input" placeholder="{{ T.not_set }}" />
          <button type="button" class="ep-okf-btn" data-action="claim" title="{{ T.claim_title }}">claim</button>
          <button type="button" class="ep-okf-btn" data-action="unclaim" title="{{ T.unclaim_title }}">unclaim</button>
        </span>
      </label>
      <label class="ep-okf-row">
        <span class="ep-okf-label">tags</span>
        <input type="text" data-bind="tags" class="ep-okf-input"
               placeholder="{{ T.tags_placeholder }}" />
      </label>
      <label class="ep-okf-row">
        <span class="ep-okf-label">related</span>
        <input type="text" data-bind="related" class="ep-okf-input"
               placeholder="{{ T.related_placeholder }}" />
      </label>
      <label class="ep-okf-row">
        <span class="ep-okf-label">review_status</span>
        <select data-bind="review_status" class="ep-okf-input">
          <option value="">{{ T.not_set }}</option>
          <option value="draft">draft</option>
          <option value="review">review</option>
          <option value="published">published</option>
          <option value="archived">archived</option>
        </select>
      </label>
      <div class="ep-okf-row ep-okf-readonly">
        <span class="ep-okf-label">last_reviewed</span>
        <span class="ep-okf-readvalue" data-bind="last_reviewed">—</span>
      </div>
    </div>
    <div class="ep-okf-actions">
      <button type="button" class="primary" data-action="save-okf">{{ T.save_changes }}</button>
      <span class="ep-okf-status" data-bind="okf-status"></span>
    </div>
    <div class="ep-okf-backrefs" data-bind="backrefs" hidden>
      <h4 class="ep-okf-title">{{ T.backrefs_heading }}</h4>
      <ul class="ep-okf-backref-list" data-bind="backref-list"></ul>
    </div>
  </section>

  <div class="ep-body">
    <article class="ep-preview md" data-tabpanel="preview"></article>
    <form class="ep-editor" data-tabpanel="edit" hidden>
      <textarea name="content" class="ep-textarea" rows="24" spellcheck="false" aria-label="{{ T.edit_body_aria }}"></textarea>
      <div class="ep-actions">
        <span class="ep-mtime" data-bind="mtime"></span>
        <button type="button" class="primary" data-action="save-content">{{ T.save_ctrl_s }}</button>
      </div>
    </form>
  </div>
</div>