misuzu/templates/_layout/comments.twig

{% macro comments_input(category, user, reply_to) %}
    {% set reply_mode = reply_to is not null %}

    {% from 'macros.twig' import avatar %}
    {% from '_layout/input.twig' import input_hidden, input_csrf, input_checkbox %}

    <form class="comment comment--input{% if reply_mode %} comment--reply{% endif %}"
        method="post" action="{{ url('comment-create') }}"
        id="comment-{{ reply_mode ? 'reply-' ~ reply_to.id : 'create-' ~ category.id }}">
        {{ input_hidden('comment[category]', category.id) }}
        {{ input_csrf() }}

        {% if reply_mode %}
            {{ input_hidden('comment[reply]', reply_to.id) }}
        {% endif %}

        <div class="comment__container">
            <div class="avatar comment__avatar">
                {{ avatar(user.id, reply_mode ? 40 : 50, user.username) }}
            </div>
            <div class="comment__content">
                <textarea
                    class="comment__text input__textarea comment__text--input"
                    name="comment[text]" placeholder="Share your extensive insights..."></textarea>
                <div class="comment__actions">
                    {% if not reply_mode %}
                        {% if user.commentPerms.can_pin|default(false) %}
                            {{ input_checkbox('comment[pin]', 'Pin this comment', false, 'comment__action') }}
                        {% endif %}
                        {% if user.commentPerms.can_lock|default(false) %}
                            {{ input_checkbox('comment[lock]', 'Toggle locked status', false, 'comment__action') }}
                        {% endif %}
                    {% endif %}
                    <button class="input__button comment__action comment__action--button comment__action--post">
                        {{ reply_mode ? 'Reply' : 'Post' }}
                    </button>
                </div>
            </div>
        </div>
    </form>
{% endmacro %}

{% macro comments_entry(comment, indent, category, user) %}
    {% from 'macros.twig' import avatar %}
    {% from '_layout/input.twig' import input_checkbox_raw %}

    {% set replies = comment.replies %}
    {% set poster = comment.user|default(null) %}
    {% if comment.post is defined %}
        {% set userVote = comment.vote.weight %}
        {% set comment = comment.post %}
        {% set body = comment.body %}
        {% set likes = comment.votesPositive %}
        {% set dislikes = comment.votesNegative %}
        {% set isReply = comment.isReply %}
    {% else %}
        {% set body = comment.text %}
        {% set userVote = comment.userVote %}
        {% set likes = comment.likes %}
        {% set dislikes = comment.dislikes %}
        {% set isReply = comment.hasParent %}
    {% endif %}

    {% set hide_details = poster is null or comment.deleted and not user.commentPerms.can_delete_any|default(false) %}

    {% if user.commentPerms.can_delete_any|default(false) or (not comment.deleted or replies|length > 0) %}
        <div class="comment{% if comment.deleted %} comment--deleted{% endif %}" id="comment-{{ comment.id }}">
            <div class="comment__container">
                {% if hide_details %}
                    <div class="comment__avatar">
                        {{ avatar(0, indent > 1 ? 40 : 50) }}
                    </div>
                {% else %}
                    <a class="comment__avatar" href="{{ url('user-profile', {'user': poster.id}) }}">
                        {{ avatar(poster.id, indent > 1 ? 40 : 50, poster.username) }}
                    </a>
                {% endif %}
                <div class="comment__content">
                    <div class="comment__info">
                        {% if not hide_details %}
                            <a class="comment__user comment__user--link"
                                href="{{ url('user-profile', {'user': poster.id}) }}"
                                style="--user-colour: {{ poster.colour}}">{{ poster.username }}</a>
                        {% endif %}
                        <a class="comment__link" href="#comment-{{ comment.id }}">
                            <time class="comment__date"
                                title="{{ comment.createdTime|date('r') }}"
                                datetime="{{ comment.createdTime|date('c') }}">
                                {{ comment.createdTime|time_diff }}
                            </time>
                        </a>
                        {% if comment.pinned %}
                            <span class="comment__pin">{% apply spaceless %}
                                Pinned
                                {% if comment.pinnedTime != comment.createdTime %}
                                    <time title="{{ comment.pinnedTime|date('r') }}"
                                        datetime="{{ comment.pinnedTime|date('c') }}">
                                        {{ comment.pinnedTime|time_diff }}
                                    </time>
                                {% endif %}
                            {% endapply %}</span>
                        {% endif %}
                    </div>
                    <div class="comment__text">
                        {{ hide_details ? '(deleted)' : body|parse_comment|raw }}
                    </div>
                    <div class="comment__actions">
                        {% if not comment.deleted and user is not null %}
                            {% if user.commentPerms.can_vote|default(false) %}
                                {% set like_vote_state = userVote > 0 ? 0 : 1 %}
                                {% set dislike_vote_state = userVote < 0 ? 0 : -1 %}

                                <a class="comment__action comment__action--link comment__action--vote comment__action--like{% if userVote > 0 %} comment__action--voted{% endif %}" data-comment-id="{{ comment.id }}" data-comment-vote="{{ like_vote_state }}"
                                href="{{ url('comment-vote', {'comment':comment.id,'vote':like_vote_state}) }}">
                                    Like
                                    {% if likes > 0 %}
                                        ({{ likes|number_format }})
                                    {% endif %}
                                </a>
                                <a class="comment__action comment__action--link comment__action--vote comment__action--dislike{% if userVote < 0 %} comment__action--voted{% endif %}" data-comment-id="{{ comment.id }}" data-comment-vote="{{ dislike_vote_state }}"
                                href="{{ url('comment-vote', {'comment':comment.id,'vote':dislike_vote_state}) }}">
                                    Dislike
                                    {% if dislikes > 0 %}
                                        ({{ dislikes|number_format }})
                                    {% endif %}
                                </a>
                            {% endif %}
                            {% if user.commentPerms.can_comment|default(false) %}
                                <label class="comment__action comment__action--link" for="comment-reply-toggle-{{ comment.id }}">Reply</label>
                            {% endif %}
                            {% if user.commentPerms.can_delete_any|default(false) or (poster.id|default(0) == user.id and user.commentPerms.can_delete|default(false)) %}
                                <a class="comment__action comment__action--link comment__action--hide comment__action--delete" data-comment-id="{{ comment.id }}" href="{{ url('comment-delete', {'comment':comment.id}) }}">Delete</a>
                            {% endif %}
                            {# if user is not null %}
                                <a class="comment__action comment__action--link comment__action--hide" href="#">Report</a>
                            {% endif #}
                            {% if not isReply and user.commentPerms.can_pin|default(false) %}
                                <a class="comment__action comment__action--link comment__action--hide comment__action--pin" data-comment-id="{{ comment.id }}" data-comment-pinned="{{ comment.pinned ? '1' : '0' }}" href="{{ url('comment-' ~ (comment.pinned ? 'unpin' : 'pin'), {'comment':comment.id}) }}">{{ comment.pinned ? 'Unpin' : 'Pin' }}</a>
                            {% endif %}
                        {% elseif user.commentPerms.can_delete_any|default(false) %}
                            <a class="comment__action comment__action--link comment__action--restore" data-comment-id="{{ comment.id }}" href="{{ url('comment-restore', {'comment':comment.id}) }}">Restore</a>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="comment__replies comment__replies--indent-{{ indent }}" id="comment-{{ comment.id }}-replies">
                {% from _self import comments_entry, comments_input %}
                {% if user|default(null) is not null and category|default(null) is not null and user.commentPerms.can_comment|default(false) %}
                    {{ input_checkbox_raw('', false, 'comment__reply-toggle', '', false, {'id':'comment-reply-toggle-' ~ comment.id}) }}
                    {{ comments_input(category, user, comment) }}
                {% endif %}
                {% if replies|length > 0 %}
                    {% for reply in replies %}
                        {{ comments_entry(reply, indent + 1, category, user) }}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endmacro %}

{% macro comments_section(category, user) %}
    {% if category.category is defined %}
        {% set user = category.user %}
        {% set posts = category.posts %}
        {% set category = category.category %}
    {% else %}
        {% set posts = category.posts %}
    {% endif %}

    <div class="comments" id="comments">
        <div class="comments__input">
            {% if user|default(null) is null %}
                <div class="comments__notice">
                    Please <a href="{{ url('auth-login') }}" class="comments__notice__link">login</a> to comment.
                </div>
            {% elseif category|default(null) is null %}
                <div class="comments__notice">
                    Posting new comments here is disabled.
                </div>
            {% elseif not user.commentPerms.can_lock|default(false) and category.locked %}
                <div class="comments__notice">
                    This comment section was locked, <time datetime="{{ category.lockedTime|date('c') }}" title="{{ category.lockedTime|date('r') }}">{{ category.lockedTime|time_diff }}</time>.
                </div>
            {% elseif not user.commentPerms.can_comment|default(false) %}
                <div class="comments__notice">
                    You are not allowed to post comments.
                </div>
            {% else %}
                {% from _self import comments_input %}
                {{ comments_input(category, user) }}
            {% endif %}
        </div>

        {% if user.commentPerms.can_lock|default(false) and category.locked %}
            <div class="comments__notice comments__notice--staff">
                This comment section was locked, <time datetime="{{ category.lockedTime|date('c') }}" title="{{ category.lockedTime|date('r') }}">{{ category.lockedTime|time_diff }}</time>.
            </div>
        {% endif %}

        {#<noscript>
            <div class="comments__javascript">
                While the comments work fine without Javascript, it is recommended you enable it as it has a lower bandwidth overhead.
            </div>
        </noscript>#}

        <div class="comments__listing">
            {% if posts|length > 0 %}
                {% from _self import comments_entry %}
                {% for comment in posts %}
                    {{ comments_entry(comment, 1, category, user) }}
                {% endfor %}
            {% else %}
                <div class="comments__none" id="_no_comments_notice_{{ category.id }}">
                    There are no comments yet.
                </div>
            {% endif %}
        </div>
    </div>
{% endmacro %}