{if !isset($page) || ($page < 2)}
    <script>
        $.wa_blog.comments = $.extend(true, $.wa_blog.comments, {
            'options': {
                pageless: {
                    url: '?module=comments',
                    target: '.b-comments',
                    count: {$pages|string_format:'%d'},
                }
            }
        });
    </script>
    <div class="b-stream-title custom-pb-0 rounded-block">
        <h1 class="custom-m-0">[`Comments`]</h1>
        {* @event backend_comments.%plugin_id%.toolbar *}
        <!-- plugin hook: "backend_comments.toolbar" -->
        {foreach $backend_comments as $plugin => $output}
            {if is_array($output) && isset($output.toolbar)}

                    <!-- begin {$plugin} -->{$output.toolbar}<!-- end {$plugin} -->
            {/if}
        {/foreach}
        <!-- end plugin hook: "backend_comments.%plugin_id%.toolbar" -->
    </div>


        {if count($blogs) > 1 || $yet_authors_exist}
            <ul class="chips small custom-ml-0 custom-mt-0" id="b-comments-filter">
                <li {if $filter == 'all'}class="selected"{/if}>
                    <a href="?module=comments&filter=all" data-filter="all" title="[`All blogs`]">
                        [`All blogs`]
                    </a>
                </li>
                {if $yet_authors_exist}
                    <li {if $filter == 'myposts'}class="selected"{/if}>
                        <a href="?module=comments&filter=myposts" data-filter="myposts" title="[`My posts only`]">
                            [`My posts only`]
                        </a>
                    </li>
                {/if}
                {foreach $blogs as $blog}
                    <li {if $filter == $blog.id}class="selected"{/if}>
                        <a href="?module=comments&filter={$blog.id}" data-filter="{$blog.id}" title="{$blog.name|escape}">
                            {$blog.name|escape}
                            {if $blog.status == blogBlogModel::STATUS_PRIVATE}
                                <span class="count">
                                    <i class="fas fa-lock custom-ml-4 smaller"></i>
                                </span>
                            {/if}
                        </a>
                    </li>
                {/foreach}
            </ul>
        {/if}

        {if !count($comments)}
            <p class="gray custom-ml-0 custom-mt-0">[`There are no comments in this view.`]</p>
        {/if}

        <div class="b-comments">
{/if}
            {foreach $comments as $comment}
                <div class="rounded-block">
                    {include file="../comments/include.comment.html" allow_reply=$comment.post.comments_allowed|default:false inline}
                </div>
            {/foreach}

            {if count($comments)}
                <div class="pageless-wrapper">
                    <em>{sprintf(_w("%d comment of %d (including deleted)", "%d comments of %d (including deleted)", $comments_count,false),$comments_count,$comments_total_count)}</em>
                    {if $comments_count < $comments_total_count}
                        <p>
                            <a href="#next" class="pageless-link">[`Show older comments`]</a>
                            <em class="pageless-progress small" style="display:none">
                                <i class="fas fa-spin fa-spinner"></i> {_w("Loading next %d comment...", "Loading next %d comments...", min($comments_total_count-$comments_count,$comments_per_page))}
                            </em>
                        </p>
                    {/if}
                </div>
            {/if}

{if !isset($page) || ($page < 2)}

            <div id="b-comment-add" class="rounded-block custom-mb-0" style="display: none;">
                <!-- plugin hook: "comment-list-entry" -->
                <span class="flexbox middle space-8 custom-mb-8">
                    <i class="icon userpic userpic-20" style="background-image: url('{$current_contact.photo20}');"></i>
                    {$current_contact.name|escape}
                </span>
                <form id="b-comment-add-form" action="?module=comments&amp;action=add" method="post">
                    <p>
                        <textarea name="text" cols="60" rows="30"></textarea>
                    </p>
                    <p>
                        <input type="hidden" name="parent" value="0">
                        <input type="button" class="button blue" id="send" value="[`Done`]">
                        <span class="b-comment-add-form-status b-ajax-status" style="display: none;">
                            <i class="b-ajax-status-loading fas fa-spin fa-spinner"></i>
                        </span>
                    </p>
                </form>
            </div>
        </div>
{/if}