{% from "partials/css_helpers.html" import thread_kind_badge, thread_status_badge %}
{% if related_threads | length > 0 %}
  <div class="card shadow-sm">
    <div class="card-body py-3">
      <div class="small text-muted text-uppercase fw-semibold mb-2">{{ related_threads_label }}</div>
      <div class="d-flex flex-column gap-2">
        {% for related_thread in related_threads %}
          <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2">
            <div class="d-flex flex-wrap align-items-center gap-2">
              <a class="fw-semibold text-decoration-none" href="{{ related_thread.href }}">#{{ related_thread.number }} {{ related_thread.title }}</a>
              <span class="badge {{ thread_kind_badge(related_thread.kind) }} text-uppercase">{{ related_thread.kind }}</span>
              <span class="badge {{ thread_status_badge(related_thread.status) }} text-uppercase">{{ related_thread.status }}</span>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% endif %}