{# Macro to render reaction counts summary #}
{% macro render_counts(counts, css_class='', element='span') %}
{% if counts and counts.total %}
<{{ element }} class="{{ css_class }}">
  {% if counts.likes %}<span title="Likes">⭐ {{ counts.likes }}</span>{% endif %}
  {% if counts.boosts %}<span title="Boosts">🔁 {{ counts.boosts }}</span>{% endif %}
  {% if counts.replies %}<span title="Replies">💬 {{ counts.replies }}</span>{% endif %}
  {% if counts.quotes %}<span title="Quotes">🗣️ {{ counts.quotes }}</span>{% endif %}
  {% if counts.mentions %}<span title="Mentions">📣 {{ counts.mentions }}</span>{% endif %}
  {% if counts.webmentions %}<span title="Webmentions">🔗 {{ counts.webmentions }}</span>{% endif %}
  {% if counts.author_replies %}<span title="Author replies">✍️ {{ counts.author_replies }}</span>{% endif %}
</{{ element }}>
{% endif %}
{% endmacro %}

{# Recursive macro to render a thread node and its children #}
{% macro render_thread_node(node, depth=0, parent_anchor=None) %}
  {% set max_indent = 5 %}
  {% set indent_depth = [depth, max_indent] | min %}
  {% set current_anchor = get_anchor_id(node) %}
  <div class="reaction-thread reaction-thread-{{ 'nested' if indent_depth > 0 else 'top' }} depth-{{ indent_depth }}" style="margin-left: {{ indent_depth * 0.25 }}em;">
    {% if node.reaction_type.value == 'webmention' %}
      {{ render_webmention(node.item, node.identity, parent_anchor) }}
    {% elif node.reaction_type.value == 'ap_interaction' %}
      {{ render_ap_interaction(node.item, node.identity, parent_anchor) }}
    {% elif node.reaction_type.value == 'author_reply' %}
      {{ render_author_reply(node.item, parent_anchor) }}
    {% endif %}

    {% for child in node.children %}
      {{ render_thread_node(child, depth + 1, current_anchor) }}
    {% endfor %}
  </div>
{% endmacro %}

{# Helper to get anchor ID for a node #}
{% macro get_anchor_id(node) %}
{%- if node.reaction_type.value == 'webmention' -%}
wm-{{ node.identity | hash_id }}
{%- elif node.reaction_type.value == 'ap_interaction' -%}
ap-{{ node.identity | hash_id }}
{%- elif node.reaction_type.value == 'author_reply' -%}
reply-{{ node.item.full_url | hash_id }}
{%- endif -%}
{% endmacro %}

{# Render media attachments grid (shared by AP and WM) #}
{% macro render_media_attachments(metadata, max_visible=4) %}
  {# Normalize attachments from AP or WM format #}
  {% set attachments = [] %}

  {# AP format: metadata.raw_object.attachment #}
  {% if metadata is mapping and metadata.get('raw_object') %}
    {% set raw_obj = metadata.get('raw_object') %}
    {% if raw_obj is mapping and raw_obj.get('attachment') %}
      {% for att in raw_obj.get('attachment') or [] %}
        {% if att is mapping %}
          {% set media_type = att.get('mediaType', '') %}
          {% set att_type = att.get('type', '') | lower %}
          {% set url = att.get('url', '') %}
          {# Handle url as string or object #}
          {% if url is mapping %}
            {% set url = url.get('href', '') %}
          {% endif %}
          {# Determine type from mediaType first, then fall back to type field #}
          {% set normalized_type = none %}
          {% if media_type.startswith('image/') or att_type in ['image', 'document'] and media_type.startswith('image/') %}
            {% set normalized_type = 'image' %}
          {% elif media_type.startswith('video/') or att_type == 'video' %}
            {% set normalized_type = 'video' %}
          {% elif media_type.startswith('audio/') or att_type == 'audio' %}
            {% set normalized_type = 'audio' %}
          {% elif att_type == 'image' %}
            {% set normalized_type = 'image' %}
          {% elif att_type == 'document' and not media_type %}
            {# Guess from URL extension for Document type without mediaType #}
            {% if url.lower().endswith(('.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg')) %}
              {% set normalized_type = 'image' %}
            {% elif url.lower().endswith(('.mp4', '.webm', '.mov', '.avi')) %}
              {% set normalized_type = 'video' %}
            {% elif url.lower().endswith(('.mp3', '.ogg', '.wav', '.flac', '.m4a')) %}
              {% set normalized_type = 'audio' %}
            {% endif %}
          {% endif %}
          {% if normalized_type and url %}
            {% set _ = attachments.append({
              'type': normalized_type,
              'url': url,
              'name': att.get('name', ''),
              'media_type': media_type
            }) %}
          {% endif %}
        {% endif %}
      {% endfor %}
    {% endif %}
  {% endif %}

  {# WM format: metadata.mf2.photo/video/audio #}
  {# Items can be strings (URLs) or objects with value/alt properties #}
  {% if metadata is mapping and metadata.get('mf2') %}
    {% set mf2 = metadata.get('mf2') %}
    {% if mf2 is mapping %}
      {% for item in mf2.get('photo') or [] %}
        {% if item %}
          {% if item is mapping %}
            {% set url = item.get('value', '') %}
            {% set alt = item.get('alt', '') %}
          {% else %}
            {% set url = item %}
            {% set alt = '' %}
          {% endif %}
          {% if url %}
            {% set _ = attachments.append({'type': 'image', 'url': url, 'name': alt, 'media_type': ''}) %}
          {% endif %}
        {% endif %}
      {% endfor %}
      {% for item in mf2.get('video') or [] %}
        {% if item %}
          {% if item is mapping %}
            {% set url = item.get('value', '') %}
            {% set alt = item.get('alt', '') %}
          {% else %}
            {% set url = item %}
            {% set alt = '' %}
          {% endif %}
          {% if url %}
            {% set _ = attachments.append({'type': 'video', 'url': url, 'name': alt, 'media_type': ''}) %}
          {% endif %}
        {% endif %}
      {% endfor %}
      {% for item in mf2.get('audio') or [] %}
        {% if item %}
          {% if item is mapping %}
            {% set url = item.get('value', '') %}
            {% set alt = item.get('alt', '') %}
          {% else %}
            {% set url = item %}
            {% set alt = '' %}
          {% endif %}
          {% if url %}
            {% set _ = attachments.append({'type': 'audio', 'url': url, 'name': alt, 'media_type': ''}) %}
          {% endif %}
        {% endif %}
      {% endfor %}
    {% endif %}
  {% endif %}

  {# Render attachments if any #}
  {% if attachments %}
    {% set visible = attachments[:max_visible] %}
    {% set overflow = attachments[max_visible:] %}
    {% set visible_count = visible | length %}
    <div class="reaction-media">
      <div class="reaction-media-grid" data-count="{{ visible_count }}">
        {% for att in visible %}
          {% set safe_url = att.url | safe_url %}
          {% if safe_url %}
            {% if att.type == 'image' %}
              <a href="{{ safe_url }}" class="reaction-media-item" rel="nofollow noopener noreferrer" target="_blank">
                <img src="{{ safe_url }}" alt="{{ att.name or '' }}" loading="lazy" referrerpolicy="no-referrer" />
              </a>
            {% elif att.type == 'video' %}
              <video class="reaction-media-item" controls preload="metadata" referrerpolicy="no-referrer">
                <source src="{{ safe_url }}" {% if att.media_type %}type="{{ att.media_type }}"{% endif %} />
              </video>
            {% elif att.type == 'audio' %}
              <div class="reaction-media-item reaction-media-audio">
                <audio controls preload="metadata">
                  <source src="{{ safe_url }}" {% if att.media_type %}type="{{ att.media_type }}"{% endif %} />
                </audio>
              </div>
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>
      {% if overflow %}
        {% set toggle_id = 'media-toggle-' ~ (attachments | string | hash_id) %}
        <input type="checkbox" class="reaction-media-toggle" id="{{ toggle_id }}">
        <label class="reaction-media-expand" data-more-text="+{{ overflow | length }} more ▾" for="{{ toggle_id }}"></label>
        <div class="reaction-media-overflow">
          <div class="reaction-media-grid" data-count="{{ overflow | length }}">
            {% for att in overflow %}
              {% set safe_url = att.url | safe_url %}
              {% if safe_url %}
                {% if att.type == 'image' %}
                  <a href="{{ safe_url }}" class="reaction-media-item" rel="nofollow noopener noreferrer" target="_blank">
                    <img src="{{ safe_url }}" alt="{{ att.name or '' }}" loading="lazy" referrerpolicy="no-referrer" />
                  </a>
                {% elif att.type == 'video' %}
                  <video class="reaction-media-item" controls preload="metadata" referrerpolicy="no-referrer">
                    <source src="{{ safe_url }}" {% if att.media_type %}type="{{ att.media_type }}"{% endif %} />
                  </video>
                {% elif att.type == 'audio' %}
                  <div class="reaction-media-item reaction-media-audio">
                    <audio controls preload="metadata">
                      <source src="{{ safe_url }}" {% if att.media_type %}type="{{ att.media_type }}"{% endif %} />
                    </audio>
                  </div>
                {% endif %}
              {% endif %}
            {% endfor %}
          </div>
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endmacro %}

{# Render a single Webmention #}
{% macro render_webmention(wm, identity, parent_anchor=None) %}
  {% set anchor_id = 'wm-' ~ (identity | hash_id) %}
  {% set source = wm.source or wm.author_url %}
  {% set source_url = ('https://' ~ utils.hostname(source)) if source and not source.startswith('https://') else source %}
  {% set source_hostname = utils.hostname(source_url) %}
  {% set author_name = wm.author_name or 'Anonymous' %}
  <div class="reaction reaction-webmention wm-{{ wm.mention_type.value if wm.mention_type else 'mention' }}" id="{{ anchor_id }}">
    <div class="reaction-header">
      {% if wm.author_photo %}
        <img class="reaction-avatar" src="{{ wm.author_photo }}" alt="" loading="lazy">
      {% else %}
        {% include 'icons/user.html' %}
      {% endif %}
      <div class="reaction-meta">
        <div class="reaction-meta-row">
          <span class="reaction-author">
            {% if wm.author_url %}
              <a href="{{ wm.author_url }}" rel="nofollow noopener" target="_blank">{{ author_name }}</a>
            {% else %}
              {{ author_name }}
            {% endif %}
          </span>
          {% if wm.mention_type and wm.mention_type.value != 'mention' and wm.mention_type.value != 'reply' %}
            <span class="reaction-type" title="{{ wm.mention_type.label }}">
              {% if wm.mention_type.value == 'like' %}
                <span class="reaction-like">⭐</span>
              {% elif wm.mention_type.value == 'reblog' %}
                <span class="reaction-reblog">🔁</span>
              {% elif wm.mention_type.value == 'quote' %}
                <span class="reaction-quote">🗣️</span>
              {% elif wm.mention_type.value == 'webmention' %}
                <span class="reaction-webmention">🔗</span>
              {% elif wm.mention_type.value == 'author_reply' %}
                <span class="reaction-author-reply">>✍️</span>
              {% endif %}
            </span>
          {% endif %}
          {% if parent_anchor %}
            <a href="#{{ parent_anchor }}" class="reaction-reply-to" title="In reply to">↩</a>
          {% endif %}
          {% if wm.published %}
            <time class="reaction-date" datetime="{{ wm.published.isoformat() }}">
              {{ wm.published.strftime('%b %d, %Y @ %H:%M') }}
            </time>
          {% endif %}
        </div>
        {% if source_url %}
          <div class="reaction-meta-row">
            <div class="source-id">
              <a href="{{ source_url }}" rel="nofollow noopener" target="_blank">{{ source_hostname }}</a>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
    {% if wm.title and wm.title != wm.excerpt %}
      <div class="reaction-title">
        <a href="{{ wm.source }}" rel="nofollow noopener" target="_blank">{{ wm.title }}</a>
      </div>
    {% endif %}
    {% if wm.content %}
      <div class="reaction-content{{ ' reaction-collapsible' if wm.content|length > 1000 }}">{{ wm.content | safe }}</div>
      {% if wm.content|length > 1000 %}
        <label class="reaction-expand"><input type="checkbox" class="reaction-toggle"></label>
      {% endif %}
    {% elif wm.excerpt %}
      <div class="reaction-content{{ ' reaction-collapsible' if wm.excerpt|length > 1000 }}">{{ wm.excerpt }}</div>
      {% if wm.excerpt|length > 1000 %}
        <label class="reaction-expand"><input type="checkbox" class="reaction-toggle"></label>
      {% endif %}
    {% endif %}
    {# Render mf2 metadata if present #}
    {% if wm.metadata %}
      {% set metadata = wm.metadata | fromjson %}
      {% set mf2 = (metadata.get("mf2") if metadata is mapping else None) | fromjson %}
      {% if mf2 and mf2 is mapping %}
        {% set bookmark_of = mf2.get("bookmark_of") or [] %}
        {% set follow_of = mf2.get("follow_of") or [] %}
        {% set rsvp = mf2.get("rsvp") %}
        {% set location = mf2.get("location") %}
        {% set category = mf2.get("category") or [] %}
        {% set syndication = mf2.get("syndication") or [] %}
        {% set has_mf2_fields = bookmark_of or follow_of or rsvp or location or category or syndication %}
        {% if has_mf2_fields %}
        <div class="reaction-mf2">
          {% if bookmark_of %}
            <div class="reaction-mf2-field reaction-mf2-bookmark" title="Bookmarks">
              <span class="reaction-mf2-label">🔖</span>
              {% for url in bookmark_of %}
                {% set bmurl = url | safe_url %}
                {% if bmurl %}
                  <a href="{{ bmurl }}" rel="nofollow noopener" target="_blank">{{ utils.hostname(bmurl) or bmurl }}</a>{% if not loop.last %}, {% endif %}
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
          {% if follow_of %}
            <div class="reaction-mf2-field reaction-mf2-follow" title="Follows">
              <span class="reaction-mf2-label">👋</span>
              {% for url in follow_of %}
                {% set furl = url | safe_url %}
                {% if furl %}
                  <a href="{{ furl }}" rel="nofollow noopener" target="_blank">{{ utils.hostname(furl) or furl }}</a>{% if not loop.last %}, {% endif %}
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
          {% if rsvp %}
            <div class="reaction-mf2-field reaction-mf2-rsvp" title="RSVP">
              <span class="reaction-mf2-label">📅</span>
              <span class="reaction-mf2-value">{{ rsvp }}</span>
            </div>
          {% endif %}
          {% if location %}
            <div class="reaction-mf2-field reaction-mf2-location" title="Location">
              <span class="reaction-mf2-label">📍</span>
              <span class="reaction-mf2-value">{{ location }}</span>
            </div>
          {% endif %}
          {% if category %}
            <div class="reaction-mf2-field reaction-mf2-category" title="Categories">
              <span class="reaction-mf2-label">🏷️</span>
              {% for c in category %}
                <span class="reaction-mf2-value">{{ c }}</span>{% if not loop.last %}, {% endif %}
              {% endfor %}
            </div>
          {% endif %}
          {% if syndication %}
            <div class="reaction-mf2-field reaction-mf2-syndication" title="Syndication">
              <span class="reaction-mf2-label">🔗</span>
              {% for url in syndication %}
                {% set surl = url | safe_url %}
                {% if surl %}
                  <a href="{{ surl }}" rel="nofollow noopener" target="_blank">{{ utils.hostname(surl) or surl }}</a>{% if not loop.last %}, {% endif %}
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
        </div>
        {% endif %}
        {{ render_media_attachments(metadata) }}
      {% endif %}
    {% endif %}
    <div class="reaction-counts">
      {% set wm_counts = interaction_counts.get(wm.source, {}) if interaction_counts is defined else {} %}
      {{ render_counts(wm_counts, 'interaction-counts') }}
    </div>
    <div class="reaction-footer">
      <span class="reaction-source-type" title="Webmention">🔗 Webmention</span>
      <a href="{{ wm.source }}" class="reaction-source" rel="nofollow noopener" target="_blank">View source</a>
      <a href="#{{ anchor_id }}" class="reaction-permalink" title="Permalink">🔗</a>
    </div>
  </div>
{% endmacro %}

{# Render a single AP interaction #}
{% macro render_ap_interaction(interaction, identity, parent_anchor=None) %}
  {% set anchor_id = 'ap-' ~ (identity | hash_id) %}
  {% set counts = interaction_counts.get(interaction.object_id, {}) if interaction_counts is defined else {} %}
  <div class="reaction reaction-ap reaction-ap-{{ interaction.interaction_type.value }}" id="{{ anchor_id }}">
    <div class="reaction-header">
      {% if interaction.author_photo %}
        <img class="reaction-avatar" src="{{ interaction.author_photo }}" alt="" loading="lazy">
      {% else %}
        {% include 'icons/user.html' %}
      {% endif %}
      <div class="reaction-meta">
        <div class="reaction-meta-row">
          <span class="reaction-author">
            {% if interaction.author_url %}
              <a href="{{ interaction.author_url }}" rel="nofollow noopener" target="_blank">{{ interaction.author_name or interaction.source_actor_id }}</a>
            {% else %}
              {{ interaction.author_name or interaction.source_actor_id }}
            {% endif %}
          </span>
          {% if interaction.interaction_type.value != 'reply' and interaction.interaction_type.value != 'mention' %}
            <span class="reaction-type" title="{{ interaction.interaction_type.value.capitalize() }}">
              {% if interaction.interaction_type.value == 'like' %}
                <span class="reaction-like">⭐</span>
              {% elif interaction.interaction_type.value == 'boost' %}
                <span class="reaction-reblog">🔁</span>
              {% elif interaction.interaction_type.value == 'quote' %}
                <span class="reaction-quote">🗣️</span>
              {% elif interaction.interaction_type.value == 'webmention' %}
                <span class="reaction-webmention">🔗</span>
              {% elif interaction.interaction_type.value == 'author_reply' %}
                <span class="reaction-author-reply">>✍️</span>
              {% endif %}
            </span>
          {% endif %}
          {% if parent_anchor %}
            <a href="#{{ parent_anchor }}" class="reaction-reply-to" title="In reply to">↩</a>
          {% endif %}
          {% if interaction.published %}
            <time class="reaction-date" datetime="{{ interaction.published.isoformat() }}">
              {{ interaction.published.strftime('%b %d, %Y @ %H:%M') }}
            </time>
          {% endif %}
        </div>
        {% if interaction.author_url %}
          <div class="reaction-meta-row">
            <div class="source-id">
              <a href="{{ interaction.author_url }}" rel="nofollow noopener" target="_blank">{{ utils.ap.actor_fqn(interaction.author_url) }}</a>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
    {% if interaction.content %}
      <div class="reaction-content{{ ' reaction-collapsible' if interaction.content|length > 1000 }}">{{ interaction.content | safe }}</div>
      {% if interaction.content|length > 1000 %}
        <label class="reaction-expand"><input type="checkbox" class="reaction-toggle"></label>
      {% endif %}
    {% endif %}
    {{ render_media_attachments(interaction.metadata) }}
    {% set ap_author_likes = author_likes_map.get(interaction.object_id, []) if author_likes_map is defined and author_likes_map else [] %}
    {% if ap_author_likes %}
    <div class="author-liked-by" title="Liked by the author">
      {% if config.author_photo %}
        <img class="author-liked-avatar" src="{{ config.author_photo }}"
             alt="" loading="lazy">
      {% endif %}
      ⭐
    </div>
    {% endif %}
    <div class="reaction-counts">
      {{ render_counts(counts, 'interaction-counts') }}
    </div>
    <div class="reaction-footer">
      <span class="reaction-source-type" title="ActivityPub">🌐 ActivityPub</span>
      {% set source_url = interaction.object_id or interaction.activity_id %}
      {% if source_url %}
        <a href="{{ source_url }}" class="reaction-source" rel="nofollow noopener" target="_blank">View source</a>
      {% endif %}
      <a href="#{{ anchor_id }}" class="reaction-permalink" title="Permalink">🔗</a>
    </div>
  </div>
{% endmacro %}

{# Render an author reply #}
{% macro render_author_reply(reply, parent_anchor=None) %}
  {% set anchor_id = 'reply-' ~ (reply.full_url | hash_id) %}
  <div class="reaction reaction-author-reply" id="{{ anchor_id }}">
    <div class="reaction-header">
      {% if reply.author_photo %}
        <img class="reaction-avatar" src="{{ reply.author_photo }}" alt="" loading="lazy">
      {% else %}
        {% include 'icons/user.html' %}
      {% endif %}
      <div class="reaction-meta">
        <div class="reaction-meta-row">
          <span class="reaction-author author-badge">
            {% if reply.author_url %}
              <a href="{{ reply.author_url }}" rel="me">{{ reply.author or 'Author' }}</a>
            {% else %}
              {{ reply.author or 'Author' }}
            {% endif %}
            <span class="author-label">Author</span>
          </span>
          {% if parent_anchor %}
            <a href="#{{ parent_anchor }}" class="reaction-reply-to" title="In reply to">↩</a>
          {% endif %}
          {% if reply.published %}
            <time class="reaction-date" datetime="{{ reply.published.isoformat() }}">
              {{ reply.published.strftime('%b %d, %Y @ %H:%M') }}
            </time>
          {% endif %}
        </div>
      </div>
    </div>
    {% if reply.title and reply.title != reply.slug %}
      <div class="reaction-title">
        <a href="{{ reply.permalink }}">{{ reply.title }}</a>
      </div>
    {% endif %}
    <div class="reaction-content{{ ' reaction-collapsible' if reply.content_html|length > 1000 }}">{{ reply.content_html | safe }}</div>
    {% if reply.content_html|length > 1000 %}
      <label class="reaction-expand"><input type="checkbox" class="reaction-toggle"></label>
    {% endif %}
    <div class="reaction-counts">
      {% set reply_counts = interaction_counts.get(reply.full_url, {}) if interaction_counts is defined else {} %}
      {{ render_counts(reply_counts, 'interaction-counts') }}
    </div>
    <div class="reaction-footer">
      <a href="{{ reply.permalink }}" class="reaction-source">View full reply</a>
      <a href="#{{ anchor_id }}" class="reaction-permalink" title="Permalink">🔗</a>
    </div>
  </div>
{% endmacro %}

{# Main reactions section #}
{% if reactions_tree or config.enable_webmentions or config.enable_activitypub %}
<section class="reactions-section">
  {% if not is_unlisted %}
  <h2 class="reactions-heading">Reactions</h2>
  {% endif %}
  {% if (config.enable_webmentions or config.enable_activitypub) and not is_unlisted %}
  <details class="reactions-howto">
    <summary>How to interact with this page</summary>
    <div class="reactions-howto-content">
      <div class="reactions-howto-content-inner">
        {% if config.enable_webmentions %}
        <h4>Webmentions</h4>
        <p>
          To interact via <a href="https://indieweb.org/Webmention" target="_blank" rel="noopener">Webmentions</a>,
          send an activity that references <a href="{{ config.link if is_guestbook else url }}">this URL</a> from a platform that supports Webmentions,
          such as <a href="https://joinlemmy.org/" target="_blank" rel="noopener">Lemmy</a>,
          <a href="https://wordpress.org/plugins/webmention/" target="_blank" rel="noopener">WordPress with Webmention plugins</a>,
          or any <a href="https://indieweb.org/Webmention#Publishing_Software" target="_blank" rel="noopener">IndieWeb-compatible site</a>.
        </p>
        {% endif %}
        {% if config.enable_activitypub %}
        <h4>ActivityPub</h4>
        <ul class="reactions-howto-ap">
          <li>
            Follow <a href="{{ config.activitypub_profile_url }}">{{ activitypub_handle or ('@' ~ config.activitypub_username) }}</a>
            on your ActivityPub platform (e.g. Mastodon, Misskey, Pleroma, Lemmy).
          </li>
          {% if config.enable_guestbook %}
          <li>
            Mention <a href="{{ config.activitypub_profile_url }}">{{ activitypub_handle or ('@' ~ config.activitypub_username) }}</a>
            in a post to feature on the <a href="{{ config.link.rstrip('/') }}/guestbook">Guestbook</a>.
          </li>
          {% endif %}
          {% if not is_guestbook %}
          <li>
            Search for <a href="{{ url }}">this URL</a> on your instance to find and interact with the post.
          </li>
          <li>
            Like, boost, quote, or reply to the post to feature your activity here.
          </li>
          {% endif %}
        </ul>
        {% endif %}
      </div>
    </div>
  </details>
  {% endif %}
  {{ render_counts(reactions_counts, 'reactions-summary', 'div') }}
  <div class="reactions-list">
    {% for node in reactions_tree %}
      {{ render_thread_node(node, 0) }}
    {% endfor %}
  </div>
</section>
{% endif %}