{% extends 'base/base.html' %}
{% block content %}
{% set board = topic.board %}
{{ breadcrumb(hrefs={board.parent_board:url_for('board.board',parent_b=board.parent_board),
board.board:url_for('board.board',parent_b=board.parent_board,child_b=board.board)},active=topic.title)}}
{% set last_reply = topic.replies.first() %}
<style>
 .vote {
     font-size: 10px;
     line-height: 1;
     padding: 2px 8px;
     border: 1px solid #C4C4C4;
     border-radius: 3px;
     color: #778;
     display: inline-block;
     vertical-align: baseline;
     text-align: center;
     background-color: #fff;
     text-decoration: none;
 }
</style>
<script type="text/javascript">
 function upVoteTopic(topicId) {
     if (g.csrftoken) {
         var data = JSON.stringify({
         });
         $.ajax ({
             type : "POST",
             url : "{{ url_for('topic.vote_up',topicId=topic.uid)}}",
             data:data,
             contentType: 'application/json;charset=UTF-8',
             success: function(result) {
                 if (result.judge)
                 {
                     $('.votes').html(result.html);
                 } else
                 {
                     window.location.href = result.url;
                 }
             }});
     }
 }
 function downVoteTopic(topicId) {
     if (g.csrftoken) {
         var data = JSON.stringify({
         });
         $.ajax ({
             type : "POST",
             url : "{{ url_for('topic.vote_down',topicId=topic.uid)}}",
             data:data,
             contentType: 'application/json;charset=UTF-8',
             success: function(result) {
                 if (result.judge)
                 {
                     $('.votes').html(result.html);
                 } else
                 {
                     window.location.href = result.url;
                 }
             }});
     }
 }
</script>
{% from 'base/paginate.html' import footer as p_footer %}
<div class="row">
    <div class="col-md-9">
        <div class="panel panel-default">
            <div class="panel-heading media ">
                <div class="media-body">
                    <h3 class="media-heading">{{ topic.title}}</h3>
                    <small style="color:#999">
                        <div class="votes">
                            {% if topic.vote and topic.vote > 0 -%}
                            <a class="vote" href="javascript:void(0)" onclick="upVoteTopic({{ topic.uid }});" style="text-decoration:none;">
                                <i class="icon-chevron-up">{{ topic.vote}}</i>
                            </a>
                            {% else %}
                            <a class="vote" href="javascript:void(0)" onclick="upVoteTopic({{ topic.uid }});" style="text-decoration:none;">
                                <i class="icon-chevron-up"></i>
                            </a>
                            {%- endif %}
                            {% if topic.vote and topic.vote < 0 %}
                            <a class="vote" href="javascript:void(0)" onclick="downVoteTopic({{ topic.uid }});" style="text-decoration:none;">
                                <i class="icon-chevron-down">{{ topic.vote}}</i>
                            </a>
                            {% else %}
                            <a class="vote" href="javascript:void(0)" onclick="downVoteTopic({{ topic.uid }});" style="text-decoration:none;">
                                <i class="icon-chevron-down"></i>
                            </a>
                            {%- endif %}
                        </div>
                        {% for tag in topic.tags %}
                        {{ link_base.tag(tag) }}
                        {% endfor %}
                        <br/>
                        {{ link_base.user(topic.author.username )}}
                        于 <abbr class="timeago" title="{{ topic.publish}}">{{ topic.publish | timesince }}</abbr>发布
                        {% if last_reply %}
                        最后由{{ link_base.user(last_reply.author.username )}}于
                        <abbr class="timeago" title="{{ topic.publish}}">{{ last_reply.publish | timesince }}</abbr>回复
                        {% endif %}
                    </small>
                </div>
                <div class="media-right">
                    <a href="{{ url_for('user.user',user_url=topic.author.username)}}">
                        <img class="media-object img-circle" src="{{ link_base.avatar(topic.author.infor) }}" alt="avatar" style="width:64px;height:64px">
                    </a>
                </div>
            </div>
            <div class="panel-body topic-content">
                {% if topic.is_markdown %}
                {{ topic.content | markdown }}
                {% else %}
                {{ topic.content | safe_clean }}
                {% endif %}
            </div>
        </div>
        {% include 'topic/replies.html' %}
    </div>
    <div class="col-md-3" style="padding-left:0">
        {% set ask_url = url_for('topic.ask',boardId=topic.board.id) %}
        {% include 'topic/panel.html' %}
    </div>
</div>
{% endblock %}
