{% from 'topic/reply/_macro.html' import like,no_replies %}
{% set replies = topic.replies.paginate(1,10) %}
<style>
 .like-active {
     color:#a40004;
 }
 .like-no-active {
     color:#ccc;
 }
 .reply-order a{
     padding: 1px 2px;
     color: #778087;
     text-decoration: none;
     font-size:13px;
 }
 .reply-count {
     font-size:12px;
     color:#999;
 }
 .reply-content a {
     color:#778087;
 }
</style>
<div class="panel panel-default">
  <div class="panel-heading">
    {{ _('Received %(total)s replies',total=replies.total) }}
    <ul class="pull-right list-inline reply-order">
      <li><a href="{{ url_for('topic.topic',topicId=topic.id,orderby='time')}}"> <i class="icon icon-time"></i>{{_('time')}}</a></li>
      <li><a href="{{ url_for('topic.topic',topicId=topic.id,orderby='like')}}"> <i class="icon icon-thumbs-up"></i>{{_('likers')}}</a></li>
    </ul>
  </div>
  {% if replies.items %}
  {% set num = 1 %}
  {% for reply in replies.items %}
  {% set user = reply.author %}
  <div class="panel-body media" id="reply-{{ reply.id }}" style="border-bottom:1px solid #eee;margin:0">
    <div class="media-left">
      <a href="{{ url_for('user.user',username=reply.author.username) }}">
        <img class="media-object img-circle" src="{{ url_for('avatar',text=user.username) }}" alt="avatar" style="width:64px;height:64px"/>
      </a>
    </div>
    <div class="media-body">
      <small class="media-heading" style="color:#999">
        <span>{{ link.user(reply.author.username)}}</span>
        <span>{{ reply.created_at | timesince }}</span>
        <a name="reply{{ reply.id }}" class="anchor" href="#reply{{ num }}" aria-hidden="true">#{{ num }}</a>
      </small>
      <div  class="reply-content">
        {{ reply.content | safe_clean }}
      </div>
    </div>
    <div class="media-right">
      {{ like(reply) }}
    </div>
    <div class="media-right">
      <a href="javascript:void(0);" style="color:#ccc;padding:0" class="reply-author btn btn-sm" data-id="{{ reply.author.username }}" title="回复">
        <i class="fa fa-reply"></i>
      </a>
    </div>
  </div>
  {% set num = num + 1 %}
  {% endfor %}
  {{ p_footer(replies,'topic.topic',dict(topicId=topic.id))}}
  {% else %}
  {{ no_replies() }}
  {% endif %}
</div>
{% include "topic/reply/form.html" %}