{% load dialogos_tags %}
{% load bootstrap_tags %}
{% load pagination_tags %}
{% load url from future %}
{% load friendly_loader %}
{% load i18n %}
{% friendly_load avatar_tags %}

{% load i18n %}
<div id="comments_section" class="comments paginate paginate-manual">
  <header>
    <h3>{% trans 'Comments' %} <span class="total">({% comment_count resource %} total)</span></h3>
  </header>

  {% if user.is_authenticated %}
  <div class="clearfix">
    <a href="#form_post_comment_div" role="button" class="btn pull-right btn-primary" data-toggle="modal">{% trans 'Add Comment' %}</a>
  </div>
  {% else %}
  <div class="clearfix">
    <p class="pull-right">{% trans 'Log in to add a comment' %}</p>
  </div>
  {% endif %}
  <div class="paginate-contents">
  {% comments resource as comment_list %}
  {% autopaginate comment_list 5 %}
  {% for comment in comment_list %}      
    <article class="col-md-8 comment">
      <div class="avatar pull-left"><a href="{{ comment.author.get_absolute_url }}">{% avatar comment.author 40 %}</a></div>
      <p class="comment-description">
        {{ comment.comment }}
          <div class="comment-author">
            <p>{% trans 'By' %} <a href="{{ comment.author.get_absolute_url }}" rel="author">{{ comment.author }}</a> on <time>{{ comment.submit_date|date:"M j, Y" }}</time></p>
          </div>
          {% if comment|can_delete_comment:request.user %}
          <div class="comment-manage">
            <form method="POST" action="{% url 'delete_comment' comment.id %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-danger btn-xs">Delete</button>
            </form>
          </div>
          {% endif %}
      </p>
    </article>
  {% endfor %}
  </div>
  {% paginate %}
</div>

<!-- Modal -->
{% if user.is_authenticated %}
{% comment_form resource as form %}
<div id="form_post_comment_div" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">{% trans 'Add Comment' %}</h4>
        </div>
        <form action="{% comment_target resource %}" method="POST" id="form_post_comment">
          <div class="modal-body">
              {% csrf_token %}
              {{ form|as_bootstrap }}
          </div>
          <div class="modal-footer">
              <button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button>
              <button id="comment_submit_btn" class="btn btn-primary">{% trans 'Submit Comment' %}</button>
          </div>
        </form>
      </div>
    </div>
</div>
{% endif %}
