{% set likes = post.likers | length %}
<div class="like-widget d-inline" data-post-id="{{ post.id }}">
    {# the likers are fetched when the modal opens, so a page of posts never
       loads them. Every swap attribute is set here, because the post menu
       sits inside the topic page's element that sets the swap targets of
       its moderation actions. #}
    <a href="#"
       data-bs-toggle="modal"
       data-bs-target="#likers-post-{{ post.id }}"
       {% if likes %}
       hx-get="{{ url_for('like.post_likers', post_id=post.id) }}"
       hx-target="#likers-post-{{ post.id }} .modal-body"
       hx-select="unset"
       hx-swap="innerHTML"
       hx-select-oob="unset"
       {% endif %}>
        <small>{{ _("%(count)s like%(plural)s", count=likes, plural="" if likes == 1 else "s") }}</small>
    </a>
    <div class="modal fade" id="likers-post-{{ post.id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ _("Users who liked this post") }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {% if likes %}
                    <div class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">{{ _("Loading...") }}</span>
                    </div>
                    {% else %}
                    <div>{{ _("No likes yet") }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if can_like %}
    {% set action = url_for('like.unlike_post' if already_liked else 'like.like_post', post_id=post.id) %}
    {# swaps this widget through htmx. Every swap attribute is set here, because
       the post menu sits inside the topic page's element that sets the swap
       targets of its moderation actions. #}
    <form class="d-inline"
          method="post"
          action="{{ action }}"
          hx-post="{{ action }}"
          hx-target="closest .like-widget"
          hx-select="unset"
          hx-swap="outerHTML"
          hx-select-oob="unset"
          hx-disabled-elt="find button">
        {{ form.hidden_tag() }}
        {% if already_liked %}
        <button type="submit" class="btn btn-icon fas fa-heart text-red" data-bs-toggle="tooltip" title="{{ _('Withdraw like') }}" aria-label="{{ _('Withdraw like') }}"></button>
        {% else %}
        <button type="submit" class="btn btn-icon far fa-heart text-red" data-bs-toggle="tooltip" title="{{ _('Like') }}" aria-label="{{ _('Like') }}"></button>
        {% endif %}
    </form>
    {% endif %}
</div>