{% block markdown_row %}
  {{ form_row(form, {
    help: block('_markdown_help'),
    raw_help: true,
    container_attr: { class: 'form-flex--stretch' },
  }) }}
{%- endblock markdown_row %}

{% block markdown_widget -%}
  <div class="flow-slim" {{ (app.user.enablePostPreviews ?? false) ? 'data-controller="markdown"' }}>
    {{- form_widget(form, {
      attr: {
        class: 'flex__grow',
        'data-action': ((form.vars.attr['data-action'] ?? '')~' markdown#preview')|trim,
        'data-markdown-target': 'input',
      },
    }) -}}

    <div class="markdown-preview" data-markdown-target="previewContainer" hidden>
      <h3 class="markdown-preview__title">{{ 'markdown.preview'|trans }}</h3>
      <div class="markdown-preview__inner text-flow" data-markdown-target="preview"></div>
    </div>
  </div>
{%- endblock markdown_widget %}

{% block _markdown_help %}
  <span class="fg-muted text-sm">
    {{ 'markdown.allowed'|trans }}

    {# TODO: use invoker API when Chrome 109/Firefox 115 support is dropped #}
    <a href="{{ path('site_markdown_help') }}"
       rel="nofollow"
       target="_blank"
       data-controller="modal"
       data-action="modal#show"
       data-modal-target-value="#markdown-help-dialog">
      {{- 'markdown.help'|trans -}}
    </a>
  </span>
{% endblock _markdown_help %}