{% load extra_tags %}
{% load i18n %}

<div class="clear"></div>
<div id="comment-{{ post.id }}-form-container" class="comment-form-container">
    {% if can_comment %}
    <form id="comment-{{ post.id }}-form" method="post" action="{% url comment id=post.id %}" accept-charset="utf-8">
        {% csrf_token %}
        <div class="comment-form-widgets-container">
            <textarea name="comment" class="commentBox" id="comment"></textarea>
            <div class="comment-form-buttons">
                <span id="comment-{{ post.id }}-chars-left" class="comment-chars-left">
                    <span class="comments-char-left-count">{{ min_length }}|{{ max_length }}</span>
                    <span class="comments-chars-togo-msg">{% trans "characters needed" %}</span>
                    <span class="comments-chars-left-msg">{% trans "characters left" %}</span>
                </span>
                <input type="submit" class="comment-submit" value="{% trans " comment" %}" />
                <input type="submit" class="comment-cancel" value="{% trans " cancel" %}" />
            </div>
            <div class="clear"></div>
            {% if user.can_use_canned_comments %}
            <div class="canned_comment">
                <span id="post-{{ post.id }}-menu" class="context-menu">
                    <span id="post-{{ post.id }}-menu-trigger" class="action-link context-menu-trigger">{% trans "Use canned comment" %}</span>
                    <ul id="post-{{ post.id }}-menu-dropdown" class="context-menu-dropdown" style="width: 275px;">
                        {% for canned_comment in canned_comments %}
                        <li class="item">
                            <a style="white-space: pre-wrap;" href="javascript:void(0);" onclick="canned_comment({{ post.id }}, jQuery(this).text())">{{ canned_comment }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </span>
            </div>
            {% endif %}
        </div>
        <script type="text/html" class="new-comment-skeleton" id="new-comment-skeleton-{{ post.id }}">
            <div class="comment{% if not comment.top_scorer %} not_top_scorer{% endif %}" id="comment-%ID%">
                <div id="post-%ID%-score" class="comment-score"></div>
                <div class="comment-text">%COMMENT%</div>
                <div class="comment-info" id="comment-%ID%-info">
                    <a id="comment-%ID%-edit" href="%EDIT_URL%" title="{% trans "Edit comment" %}"
                        class="comment-edit" rel="nofollow"> </a>
                    <a id="comment-%ID%-delete" href="%DELETE_URL%" title="{% trans "Delete comment" %}"
                        class="ajax-command comment-delete confirm" rel="nofollow"> </a>
                    <a rel="nofollow" id="comment-%ID%-convert" style="display:none;" href="%CONVERT_URL%" title="{% trans "Convert comment to answer" %}"
                        class="ajax-command comment-convert confirm" rel="nofollow"> </a>

                    <span class="comment-age">({% trans "just now" %})</span>
                    <a class="comment-user" href="%PROFILE_URL%">%USERNAME%</a>
                    {% if user.is_authenticated %}
                        {% if show_gravatar %}{% gravatar user 18 %}{% endif %}
                    {% endif %}
                </div>
             </div>
        </script>
    </form>
    {% endif %}
</div>
<div class="clear"></div>