reaction_list

<xf:if is="$title">
    <xf:title>{$title}</xf:title>
<xf:else />
    <xf:title>{{ phrase('members_who_reacted_to_this') }}</xf:title>
</xf:if>

<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>

<xf:if is="$breadcrumbs">
    <xf:breadcrumb source="$breadcrumbs" />
</xf:if>

<xf:if is="!$listOnly">
    <div class="block">
        <div class="block-container">
            <h3 class="tabs hScroller block-minorTabHeader" data-xf-init="tabs h-scroller"
                data-panes="< .block-container | .js-reactionTabPanes" role="tablist">
                <span class="hScroller-scroll">
                    <xf:foreach loop="$tabSummary" key="$reactionId" value="$total">
                        <a class="tabs-tab tabs-tab--reaction{$reactionId}{{ $reactionId == $activeReactionId ? ' is-active' : '' }}" role="tab" id="{{ $reactionId ? 'reaction-' . $reactionId : '' }}">
                            <xf:if is="$reactionId">
                                <xf:reaction id="{$reactionId}" small="true" showtitle="true" appendtitle="{$total|number|parens}" />
                            <xf:else />
                                <bdi>{{ phrase('all') }}</bdi> {$total|number|parens}
                            </xf:if>
                        </a>
                    </xf:foreach>
                </span>
            </h3>
            <ul class="tabPanes js-reactionTabPanes">
                <xf:foreach loop="$tabSummary" key="$reactionId" value="$total">
                    <xf:if is="$reactionId == $activeReactionId">
                        <li class="{{ $reactionId == $activeReactionId ? 'is-active' : '' }}" role="tabpanel" id="reaction-{$reactionId}">
                            <xf:macro name="reactions_list"
                                arg-reactions="{$reactions}"
                                arg-hasNext="{$hasNext}"
                                arg-content="{$content}"
                                arg-link="{$link}"
                                arg-linkParams="{$linkParams}"
                                arg-page="{$page}"
                                arg-reactionId="{$reactionId|default(0)}" />
                        </li>
                    <xf:else />
                        <li data-href="{{ link($link, $content, $linkParams + {'reaction_id': $reactionId, 'list_only': 1}) }}" class="{{ $reactionId == $activeReactionId ? 'is-active' : '' }}" role="tabpanel" id="reaction-{$reactionId}">
                            <div class="blockMessage">{{ phrase('loading...') }}</div>
                        </li>
                    </xf:if>
                </xf:foreach>
            </ul>
        </div>
    </div>
<xf:else />
    <xf:macro name="reactions_list"
        arg-reactions="{$reactions}"
        arg-hasNext="{$hasNext}"
        arg-content="{$content}"
        arg-link="{$link}"
        arg-linkParams="{$linkParams}"
        arg-page="{$page}"
        arg-reactionId="{$activeReactionId}" />
</xf:if>

<xf:macro name="reactions_list"
    arg-reactions="!"
    arg-hasNext="!"
    arg-content="!"
    arg-link="!"
    arg-linkParams="!"
    arg-page="!"
    arg-reactionId="0">
    <ol class="block-body js-reactionList-{$reactionId}">
        <xf:foreach loop="$reactions" value="$reaction">
            <li class="block-row block-row--separated">
                <xf:set var="$extraData">
                    <xf:reaction id="{$reaction}" class="reaction--right" />
                    <xf:date time="{$reaction.reaction_date}" />
                </xf:set>
                <xf:macro template="member_list_macros" name="item"
                    arg-user="{$reaction.ReactionUser}"
                    arg-extraData="{$extraData|preescaped}" />
            </li>
        </xf:foreach>
        <xf:if is="$hasNext">
            <li class="block-footer">
                <span class="block-footer-controls"><xf:button href="{{ link($link, $content, $linkParams + {'reaction_id': $reactionId, 'list_only': 1, 'page': $page + 1}) }}"
                    data-xf-click="inserter"
                    data-replace=".js-reactionList-{$reactionId}"
                    data-scroll-target="< .overlay">
                        {{ phrase('continue...') }}
                </xf:button></span>
            </li>
        </xf:if>
    </ol>
</xf:macro>