{% from "partials/css_helpers.html" import reply_kind_accent %}
<div data-reply-fragment>
  <div class="card shadow-sm border-start border-4 {{ reply_kind_accent(reply.kind) }}">
    <div class="card-body">
      <div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3">
        <div class="d-flex flex-wrap align-items-center gap-2 small">
          {% if reply.reply_href %}
            <a class="pearing-thread-reply-permalink text-decoration-none" href="{{ reply.reply_href }}">{{ reply.id_label }}</a>
          {% else %}
            <span class="pearing-thread-reply-permalink">{{ reply.id_label }}</span>
          {% endif %}
          {% if reply.author_href %}
            {% with user_link_href = reply.author_href, user_link_username = reply.created_by, user_link_label = reply.created_by, user_link_class = "fw-semibold text-decoration-none" %}
              {% include "partials/hover_card_user_link.html" %}
            {% endwith %}
          {% else %}
            <span class="fw-semibold">{{ reply.created_by }}</span>
          {% endif %}
          {% if reply.reply_href %}
            <a class="text-muted text-decoration-none" href="{{ reply.reply_href }}">{{ reply.created_at | humantime }}</a>
          {% else %}
            <span class="text-muted">{{ reply.created_at | humantime }}</span>
          {% endif %}
        </div>
        <button
          class="btn btn-sm btn-outline-secondary"
          type="button"
          hx-get="{{ reply.reply_href }}"
          hx-target="closest [data-reply-fragment]"
          hx-swap="outerHTML"
        >Cancel</button>
      </div>
      {% if edit_error %}
        <div class="alert alert-danger py-2 mt-3 mb-0" role="alert">{{ edit_error }}</div>
      {% endif %}
      <form
        method="post"
        action="{{ reply.update_href }}"
        class="row g-3 mt-1"
        hx-post="{{ reply.update_href }}"
        hx-target="closest [data-reply-fragment]"
        hx-swap="outerHTML"
      >
        <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}" />
        <input type="hidden" name="next" value="{{ form.next }}" />
        {% if form.reply_root %}
          <input type="hidden" name="reply_root" value="{{ form.reply_root }}" />
        {% endif %}
        {% if form.sort %}
          <input type="hidden" name="sort" value="{{ form.sort }}" />
        {% endif %}
        <input type="hidden" name="page" value="{{ form.page }}" />
        <input type="hidden" name="per_page" value="{{ form.per_page }}" />
        {% set reply_form_prefix = "edit-" ~ reply.number %}
        {% include "repo/partials/thread_reply_kind_status_controls.html" %}
        {% if form.can_edit_body %}
          <div class="col-12">
            <label class="form-label small" for="reply-edit-body-{{ reply.number }}">Body</label>
            {% with
              textarea_id=("reply-edit-body-" ~ reply.number),
              textarea_name="body",
              textarea_rows=8,
              textarea_value=form.body,
              textarea_classes="form-control form-control-sm",
              textarea_autofocus=true
            %}
              {% include "partials/markdown_preview_tabs.html" %}
            {% endwith %}
          </div>
        {% else %}
          <div class="col-12">
            <div class="small text-muted mb-2">Body</div>
            {% if reply.body and reply.body | trim != "" %}
              <div class="pearing-markdown">{{ reply.body | markdown | linkify(is_private=linkify_is_private, current_team_slug=linkify_current_team_slug) }}</div>
            {% else %}
              <p class="text-muted mb-0">No body.</p>
            {% endif %}
          </div>
        {% endif %}
        <div class="col-12 d-flex flex-column flex-sm-row gap-2">
          <button class="btn btn-sm btn-primary" type="submit">Save changes</button>
          <button
            class="btn btn-sm btn-outline-secondary"
            type="button"
            hx-get="{{ reply.reply_href }}"
            hx-target="closest [data-reply-fragment]"
            hx-swap="outerHTML"
          >Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>