{% from "partials/css_helpers.html" import reply_kind_accent, reply_kind_badge, reply_status_badge, link_badge %}
<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="pearing-thread-reply-header flex-grow-1"
        role="button"
        tabindex="0"
        data-reply-body-toggle
        aria-expanded="{% if reply.body_is_open %}true{% else %}false{% endif %}"
      >
        <div class="pearing-thread-reply-meta 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 %}
          {% if reply.versions | length > 1 %}
            <div class="dropdown d-inline-block">
              <button class="badge text-bg-secondary border-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                v{{ reply.version }}
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                {% for version in reply.versions %}
                  <li>
                    <a class="dropdown-item{% if version.is_current %} active{% endif %}"
                       href="{{ version.href }}"
                       hx-get="{{ version.href }}"
                       hx-target="closest [data-reply-fragment]"
                       hx-swap="outerHTML">v{{ version.number }}{% if version.is_current %} (current){% endif %}</a>
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% elif reply.version > 1 %}
            <span class="badge text-bg-secondary">v{{ reply.version }}</span>
          {% endif %}
        </div>
        <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
          <span class="badge {{ reply_kind_badge(reply.kind) }} text-uppercase">{{ reply.kind }}</span>
          <span class="badge {{ reply_status_badge(reply.status) }} text-uppercase">{{ reply.status }}</span>
          {% if reply.has_children %}
            <span class="badge text-bg-light text-dark">{{ reply.child_count }} repl{% if reply.child_count == 1 %}y{% else %}ies{% endif %}</span>
          {% endif %}
        </div>
      </div>
      <div class="pearing-thread-reply-actions d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">
        {% if reply.can_edit_metadata and not reply.is_deleted %}
          <form
            hx-post="{{ reply.status_toggle_href }}"
            hx-target="closest [data-reply-fragment]"
            hx-swap="outerHTML"
          >
            <input type="hidden" name="csrf_token" value="{{ reply.status_toggle_form.csrf_token }}" />
            <input type="hidden" name="next" value="{{ reply.status_toggle_form.next }}" />
            {% if reply.status_toggle_form.reply_root %}
              <input type="hidden" name="reply_root" value="{{ reply.status_toggle_form.reply_root }}" />
            {% endif %}
            {% if reply.status_toggle_form.sort %}
              <input type="hidden" name="sort" value="{{ reply.status_toggle_form.sort }}" />
            {% endif %}
            <input type="hidden" name="page" value="{{ reply.status_toggle_form.page }}" />
            <input type="hidden" name="per_page" value="{{ reply.status_toggle_form.per_page }}" />
            <input type="hidden" name="status" value="{% if reply.status == 'accepted' %}open{% else %}accepted{% endif %}" />
            <button class="btn btn-sm {% if reply.status == 'accepted' %}btn-success{% else %}btn-outline-success{% endif %}" type="submit" aria-label="Accept">&#x2713;</button>
          </form>
          <form
            hx-post="{{ reply.status_toggle_href }}"
            hx-target="closest [data-reply-fragment]"
            hx-swap="outerHTML"
          >
            <input type="hidden" name="csrf_token" value="{{ reply.status_toggle_form.csrf_token }}" />
            <input type="hidden" name="next" value="{{ reply.status_toggle_form.next }}" />
            {% if reply.status_toggle_form.reply_root %}
              <input type="hidden" name="reply_root" value="{{ reply.status_toggle_form.reply_root }}" />
            {% endif %}
            {% if reply.status_toggle_form.sort %}
              <input type="hidden" name="sort" value="{{ reply.status_toggle_form.sort }}" />
            {% endif %}
            <input type="hidden" name="page" value="{{ reply.status_toggle_form.page }}" />
            <input type="hidden" name="per_page" value="{{ reply.status_toggle_form.per_page }}" />
            <input type="hidden" name="status" value="{% if reply.status == 'rejected' %}open{% else %}rejected{% endif %}" />
            <button class="btn btn-sm {% if reply.status == 'rejected' %}btn-danger{% else %}btn-outline-danger{% endif %}" type="submit" aria-label="Reject">&#x2717;</button>
          </form>
        {% endif %}
        {% if reply.can_edit_body or reply.can_edit_metadata %}
          <a
            class="btn btn-sm btn-outline-secondary"
            href="{{ reply.edit_href }}"
            hx-get="{{ reply.edit_href }}"
            hx-target="closest [data-reply-fragment]"
            hx-swap="outerHTML"
          >Edit</a>
        {% endif %}
        {% if reply.can_edit_body %}
          <form
            data-confirm-modal="confirm-delete-reply"
            data-confirm-name="{{ reply.id_label }}"
            hx-post="{{ reply.delete_href }}"
            hx-target="closest [data-reply-fragment]"
            hx-swap="outerHTML"
          >
            <input type="hidden" name="csrf_token" value="{{ reply.delete_form.csrf_token }}" />
            <input type="hidden" name="next" value="{{ reply.delete_form.next }}" />
            {% if reply.delete_form.reply_root %}
              <input type="hidden" name="reply_root" value="{{ reply.delete_form.reply_root }}" />
            {% endif %}
            {% if reply.delete_form.sort %}
              <input type="hidden" name="sort" value="{{ reply.delete_form.sort }}" />
            {% endif %}
            <input type="hidden" name="page" value="{{ reply.delete_form.page }}" />
            <input type="hidden" name="per_page" value="{{ reply.delete_form.per_page }}" />
            <button class="btn btn-sm btn-outline-danger" type="submit">Delete</button>
          </form>
        {% endif %}
        {% if reply.has_children and not reply.is_deleted %}
          <a class="btn btn-sm btn-outline-secondary" href="{{ reply.branch_href }}">View replies</a>
        {% endif %}
      </div>
    </div>
    <div class="pearing-thread-reply-body collapse{% if reply.body_is_open %} show{% endif %}" data-reply-body>
      {% if reply.body and reply.body | trim != "" %}
        {% if reply.is_deleted %}
          <p class="text-body-secondary fst-italic mt-3 mb-0">{{ reply.body }}</p>
        {% else %}
          <div class="pearing-markdown mt-3" data-quote-source-kind="reply" data-quote-source-number="{{ reply.number }}" data-quote-source-author="{{ reply.created_by }}">{{ reply.body | markdown | linkify(is_private=linkify_is_private, current_team_slug=linkify_current_team_slug) }}</div>
        {% endif %}
      {% endif %}
      {% if not reply.is_deleted and reply.links | length > 0 %}
        <div class="d-flex flex-column gap-2 mt-3">
          {% for link in reply.links %}
            <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
              {% if link.href %}
                <a class="badge {{ link_badge(link.kind) }} text-decoration-none{% if link.monospace %} font-monospace{% endif %}" href="{{ link.href }}">{{ link.label }}</a>
              {% else %}
                <span class="badge {{ link_badge(link.kind) }}{% if link.monospace %} font-monospace{% endif %}">{{ link.label }}</span>
              {% endif %}
              {% if link.meta %}
                <span class="text-muted small">{{ link.meta }}</span>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </div>
  </div>
</div>