{% set preview_pane_id = textarea_id ~ "-preview-pane" %}
{% set preview_content_id = textarea_id ~ "-preview-content" %}
<input type="hidden" name="linkify_is_private" value="{% if linkify_is_private %}true{% else %}false{% endif %}" />
<input type="hidden" name="linkify_current_team_slug" value="{{ linkify_current_team_slug | default('', true) }}" />
<ul class="nav nav-tabs mb-2" role="tablist">
  <li class="nav-item" role="presentation">
    <button
      class="nav-link active"
      id="{{ textarea_id }}-body-tab"
      data-bs-toggle="tab"
      data-bs-target="#{{ textarea_id }}-body-pane"
      type="button"
      role="tab"
      aria-controls="{{ textarea_id }}-body-pane"
      aria-selected="true"
    >Body</button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="{{ textarea_id }}-preview-tab"
      data-bs-toggle="tab"
      data-bs-target="#{{ preview_pane_id }}"
      type="button"
      role="tab"
      aria-controls="{{ preview_pane_id }}"
      aria-selected="false"
      hx-post="/preview/markdown"
      hx-include="closest form"
      hx-target="#{{ preview_content_id }}"
      hx-swap="innerHTML"
      data-markdown-preview-tab="true"
    >Preview</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="{{ textarea_id }}-body-pane" role="tabpanel" aria-labelledby="{{ textarea_id }}-body-tab">
    <textarea
      class="{{ textarea_classes }}"
      id="{{ textarea_id }}"
      name="{{ textarea_name }}"
      rows="{{ textarea_rows }}"
      {% if textarea_autofocus | default(false) %}autofocus{% endif %}
      data-mentions-enabled
    >{{ textarea_value }}</textarea>
  </div>
  <div class="tab-pane fade" id="{{ preview_pane_id }}" role="tabpanel" aria-labelledby="{{ textarea_id }}-preview-tab">
    <div
      class="pearing-markdown-preview border rounded p-3 overflow-auto"
      id="{{ preview_content_id }}"
      data-markdown-preview-for="{{ textarea_id }}"
    >
      <span class="text-muted">Click Preview to render.</span>
    </div>
  </div>
</div>