{% load static %}
{% load i18n %}
{% load tz %}
{% load vote_filters %}
{% load comment_render %}
{% load time_filters %}

<div class="single-comment" id="comment-{{ comment.id }}">
    <div class="voter">
        <form action="{% if user.is_authenticated %}{% url 'weblog:post' post.slug %}{% else %}javascript:presentAlert('{% translate "Please register or log in to upvote comments." %}');{% endif %}" method="post">
           {% csrf_token %}
           {% if user.is_authenticated %}
               <input type="hidden" name="mode" value="upvote">
               <input type="hidden" name="comment_id" value="{{ comment.id }}">
               <input type="hidden" name="next" value="#comment-{{ comment.id }}">
           {% endif %}
            <button type="submit" class="upvote-button{% if not user.is_authenticated %} disabled{% elif comment|user_vote:user == 1 %} voted{% endif %}">
                <img src="{% static 'images/core/icons/upvote.png' %}" alt="Upvote" width="16" height="16" />
            </button>
        </form>
        <span>{{ comment.vote_score }}</span>
        <form action="{% if user.is_authenticated %}{% url 'weblog:post' post.slug %}{% else %}javascript:presentAlert('{% translate "Please register or log in to downvote comments." %}');{% endif %}" method="post">
           {% csrf_token %}
           {% if user.is_authenticated %}
                <input type="hidden" name="mode" value="downvote">
                <input type="hidden" name="comment_id" value="{{ comment.id }}">
                <input type="hidden" name="next" value="#comment-{{ comment.id }}">
           {% endif %}
            <button type="submit" class="downvote-button{% if not user.is_authenticated %} disabled{% elif comment|user_vote:user == -1 %} voted{% endif %}">
                <img src="{% static 'images/core/icons/downvote.png' %}" alt="Downvote" width="16" height="16" />
            </button>
        </form>
    </div>
    <div class="comment-area">
        <div class="comment-avatar">
            {% if comment.user %}
                {% with comment.user.userprofile_set.first as userprofile %}
                    <img src="{% static "images/avatars/" %}{{ userprofile.avatar_url }}.gif" alt="{{ comment.user.username }}'s avatar" width="48" height="48" />
                {% endwith %}
            {% else %}
                <img src="{% static "images/avatars/" %}{{ comment.anonymous_user.avatar }}.gif" alt="Anonymous avatar" width="48" height="48" />
            {% endif %}
        </div>
        <div class="comment-content">
            <div class="comment-header">
                <div class="comment-header-left">
                    {% if comment.user %}
                        <a href="#">@{{ comment.user.username }}</a>
                    {% else %}
                        <span class="anonymous-comment-user">@{{ comment.anonymous_user.name }}</span>
                    {% endif %}
                </div>
                <div class="comment-header-right">
                    <span class="timesince">{{ comment.created_at|translated_timesince }} {% translate "ago" %}</span>
                    {% if comment.edited %}
                        <span class="timesince">({% translate "edited" %})</span>
                    {% endif %}
                    {% if comment.user %}
                        <span class="comment-author-pill pill-registered">{% translate "Registered" %}</span>
                    {% else %}
                        <span class="comment-author-pill pill-anonymous">{% translate "Anonymous" %}</span>
                    {% endif %}
                </div>
            </div>
            <div class="comment-text" id="comment-text-{{ comment.id }}">
                {{ comment.body|render_comment|safe }}
            </div>
                        {% if comment.user == user %}
                <div class="comment-edit-area" id="edit-comment-{{ comment.id }}">
                    <form action="{% url 'weblog:post' post.slug %}" method="post" onsubmit="return submitCommentForm('{{ comment.id }}', 'edit')">
                        {% csrf_token %}
                        <input type="hidden" name="mode" value="edit">
                        <input type="hidden" name="comment_id" value="{{ comment.id }}">
                        <input type="hidden" name="next" value="#comment-{{ comment.id }}">
                        <input type="hidden" name="body" id="edit-body-{{ comment.id }}">
                        <div class="miku-comment-editor" id="miku-edit-editor-{{ comment.id }}">{{ comment.body }}</div>
                        <div class="comment-edit-actions">
                            <button type="submit" class="comment-edit-action-button save-comment-button">{% translate "Save" %}</button>
                            <button type="button" class="comment-edit-action-button cancel-save-comment-button" onclick="editComment('{{ comment.id }}'); return false;">{% translate "Cancel" %}</button>
                        </div>
                    </form>
                </div>
            {% endif %}
            <div class="comment-action-bar">
                {% if user.is_authenticated %}
                    <span class="comment-action-link-button reply-comment-button" onclick="replyToComment('{{ comment.id }}'); return false;">{% translate "Reply" %}</span>
                {% endif %}
                {% if comment.user == user %}
                    <span class="comment-action-link-button edit-comment-button" onclick="editComment('{{ comment.id }}'); return false;">{% translate "Edit" %}</span>
                {% endif %}
                {% if comment.user == user or user.is_staff %}
                    <form action="{% url 'weblog:post' post.slug %}" method="post" class="delete-comment-form" onsubmit="return confirm('{% translate "Are you sure you want to delete this comment? This action cannot be undone." %}');">
                        {% csrf_token %}
                        <input type="hidden" name="mode" value="delete">
                        <input type="hidden" name="comment_id" value="{{ comment.id }}">
                        <input type="hidden" name="next" value="#comments">
                        <button type="submit" class="comment-action-link-button delete-comment-button">{% translate "Delete" %}</button>
                    </form>
                {% endif %}
            </div>
            {% if user.is_authenticated %}
                <div class="comment-reply-area" id="reply-comment-{{ comment.id }}">
                    <form action="{% url 'weblog:post' post.slug %}" method="post" onsubmit="return submitCommentForm('{{ comment.id }}', 'reply')">
                        {% csrf_token %}
                        <input type="hidden" name="mode" value="reply">
                        <input type="hidden" name="parent_comment_id" value="{{ comment.id }}">
                        <input type="hidden" name="next" value="#comment-{{ comment.id }}">
                        <input type="hidden" name="body" id="reply-body-{{ comment.id }}">
                        <div class="miku-comment-editor" id="miku-reply-editor-{{ comment.id }}"></div>
                        <div class="comment-reply-actions">
                            <button type="submit" class="comment-edit-action-button save-comment-button">{% translate "Reply" %}</button>
                            <button type="button" class="comment-edit-action-button cancel-save-comment-button" onclick="replyToComment('{{ comment.id }}'); return false;">{% translate "Cancel" %}</button>
                        </div>
                    </form>
                </div>
            {% endif %}
        </div>
    </div>
</div>

{% if comment.replies.all %}
    <div class="comment-replies">
        {% for reply in comment.replies.all %}
            {% include "weblog/_partials/post_comments.html" with comment=reply %}
        {% endfor %}
    </div>
{% endif %}