{% extends 'snippet/layout.html' %}
{% load forum_extras %}

{% block title %}
    {{ topic.title }} - 小程序开发社区
{% endblock %}

{% block stylesheet %}
    <link rel="stylesheet" href="/static/css/codehilite.css" />
{% endblock %}

{% block javascript %}
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
        });
    </script>
    <script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/javascript" src="/static/js/widget/emmet.min.js"></script>
    <script type="text/javascript" src="/static/js/widget/jquery.textarea.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $('textarea.smart-code-support').tabby();
            emmet.require('textarea').setup({
                pretty_break: false, // enable formatted line breaks (when inserting // between opening and closing tag)
                use_tab: false       // expand abbreviations by Tab key
            });
        });
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $('.J_topicVote').click(function(e) {
                var _node = $(this);
                var _errorMap = {
                    topic_not_exist: '主题不存在',
                    can_not_vote_your_topic: '不能喜欢自己的主题',
                    already_voted: '感谢已经表示过',
                };
                e.preventDefault();
                $.getJSON(_node.attr('href'), function(data) {
                    if(data.success) {
                        _node.html('<span class="f11 gray" style="text-shadow: 0px 1px 0px #fff;">感谢已表示</span>');
                    } else {
                        _node.html('<span>' + _errorMap[data.message] + '</span>');
                    }
                });
            });

            $('.J_topicFavorite').click(function(e) {
                var _node = $(this);
                var _type = _node.attr('data-type');
                var _href = _node.attr('href').replace(/\/[^\?]+/igm, '/' + _type);
                var _errorMap = {
                    topic_not_exist: '主题不存在',
                    can_not_favorite_your_topic: '不能收藏自己的主题',
                    already_favorited: '之前已经收藏过了',
                    user_not_login: '收藏失败',
                    not_been_favorited: '之前还没有收藏过',
                };
                e.preventDefault();
                _node.attr('href', _href);
                $.getJSON(_node.attr('href'), function(data) {
                    if(data.success) {
                        //_node.html('<span class="f11 gray" style="text-shadow: 0px 1px 0px #fff;">收藏成功</span>');
                        if(_type === 'favorite') {
                            _node.html('取消收藏');
                            _node.attr('data-type', 'unfavorite');
                        }

                        if(_type === 'unfavorite') {
                            _node.html('加入收藏');
                            _node.attr('data-type', 'favorite');
                        }
                    } else {
                        _node.html('<span>' + _errorMap[data.message] + '</span>');
                    }
                });
            });

            $('.J_replyTo').click(function(e) {
                username = $(this).attr('data-username');
                replyContent = $('.J_replyContent');
                oldContent = replyContent.val();
                prefix = "@" + username + " ";
                newContent = '';
                if(oldContent.length > 0){
                    if (oldContent != prefix) {
                        newContent = oldContent + "\n" + prefix;
                    }
                } else {
                    newContent = prefix;
                }
                replyContent.focus();
                replyContent.val(newContent);
            });

            $('.J_replyContent').keydown(function(e) {
                if((e.ctrlKey || e.metaKey) && e.which === 13) {
                    e.preventDefault();
                    $(e.currentTarget).parent('form').submit();
                }
            });
        });
    </script>
{% endblock %}

{% block main %}
    <div class="topic-detail container-box">
        <div class="ui-header">
            <a href="/u/{% if topic.author.username %}{{ topic.author.username }}{% else %}{{ topic.author.id }}{% endif %}/">
                <img src="/static/avatar/m_{% if topic.author.avatar %}{{ topic.author.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" alt="" class="avatar" />
            </a>
            <div class="main">
                <h3 class="title">{{ topic.title }}</h3>
                <div class="meta">
                    <span class="node"><a href="/node/{{ topic.node.slug }}/">{{ topic.node.name }}</a></span> •
                    <span class="username">
                        <a href="/u/{% if topic.author.username %}{{ topic.author.username }}{% else %}{{ topic.author.id }}{% endif %}/">{{ topic.author.username }}</a>
                    </span> •
                    {% if topic.last_replied_time %}
                        <span class="created-time">发表于 {{ topic.created|pretty_date }}</span> •
                        <span class="last-reply-username">最后回复来自
                            <a href="/u/{% if topic.last_replied_by.username %}{{ topic.last_replied_by.username }}{% else %}{{ topic.last_replied_by.id }}{% endif %}/">
                                <strong>{{ topic.last_replied_by.username }}</strong>
                            </a>
                        </span> •
                        <span class="last-reply-time">{{ topic.last_replied_time|pretty_date }}</span>
                    {% else %}
                        <span class="created-time">发表于 {{ topic.created|pretty_date }}</span>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ui-content">
            {{ topic.content|markdown|content_process|safe }}
        </div>
        <div class="ui-footer">
            {% if not topic_favorited %}
            <a href="/favorite/?topic_id={{ topic.id }}" class="J_topicFavorite" data-type="favorite">加入收藏</a>
            {% else %}
            <a href="/unfavorite/?topic_id={{ topic.id }}" class="J_topicFavorite" data-type="unfavorite">取消收藏</a>
            {% endif %}
            <a href="#" onclick="window.open('https://twitter.com/intent/tweet?hashtags={{ topic.node.slug }}&text={{ topic.title }}&url=http://{{ request.get_host }}{{ request.get_full_path }}');">Tweet</a>
            <a href="#" onclick="window.open('http://service.weibo.com/share/share.php?url=http://{{ request.get_host }}{{ request.get_full_path }}&title=F2E%20-%20{{ topic.title }}', '_blank', 'width=550, height=370');">新浪微博</a>
            <a href="/vote/?topic_id={{ topic.id }}" class="J_topicVote">喜欢</a>
            {% if user.is_authenticated and user.id == topic.author.id %}
                <a href="/t/edit/{{ topic.id }}/" class="fr">编辑主题</a>
            {% endif %}
            <span class="hits fr mr10">{% if topic.hits %}{{ topic.hits }}{% else %}0{% endif %} 次点击</span>
        </div>
    </div>

    {% ifnotequal reply_page.total 0 %}
    <div class="topic-reply container-box mt10">
        <div class="ui-header">
            <span>共收到{{ reply_page.total }}条回复</span>
        </div>
        <div class="ui-content">
            {% for reply in replies %}
                <div id="reply{{ floor|add:forloop.counter }}" class="reply-item">
                    <a href="/u/{{ reply.author.username }}/">
                        <img src="/static/avatar/m_{% if reply.author.avatar %}{{ reply.author.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" alt="" class="avatar" />
                    </a>
                    <div class="main">
                        <div class="meta">
                            <a href="/u/{{ reply.author.username }}/" class="reply-username">
                                <span class="username">{{ reply.author.username }}</span>
                            </a>
                            <span class="time">{{ reply.created|pretty_date }}</span>
                            {% if user.is_authenticated %}
                            {% ifequal user.id reply.author.id %}
                                <a href="/reply/edit/{{ reply.id }}/">编辑回复</a>
                            {% endifequal %}
                            {% endif %}
                            <span class="floor fr">#{{ floor|add:forloop.counter }}</span>
                            <span class="reply-to fr J_replyTo" data-username="{{ reply.author.username }}">
                                <img src="/static/images/reply.png" alt="" />
                            </span>
                        </div>
                        <span class="content">{{ reply.content|markdown|content_process|safe }}</span>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="ui-footer">
            {% if reply_page.pages > 1 %}
            <div class="pagination pagination-mini">
                {% pagination reply_page request.get_full_path %}
            </div>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div class="alert mt20 no-replies">
        暂无回复，说出你的观点吧
    </div>
    {% endifnotequal %}

    <div class="topic-reply-create container-box mt10">
        {% if user.is_authenticated %}
            <div class="ui-header">
                <span class="title">创建新的回复</span>
            </div>
            <div class="ui-content">
                <form class="mt10" action="" method="post">
                    {{ errors|dump_errors }}
                    <textarea rows="3" class="content mt5 smart-code-support J_replyContent" placeholder="回复内容" name="content"></textarea>
                    <input type="submit" id="checkall" class="btn btn-small" value="立即回复">
                    {% csrf_token %}
                </form>
            </div>
        {% else %}
            <div class="ui-header">
                <span class="title">登录后即可参与回复</span>
            </div>
            <div class="ui-content">
                <a class="btn btn-small mt5 mr10" type="button" href="/login/?next={{ request.get_full_path }}">登录</a>
                <a class="btn btn-small mt5" type="button" href="/register/">注册</a>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block sidebar %}
    {% if user.is_authenticated %}
        <div class="usercard container-box">
            <div class="ui-header">
                <a href="/u/{{ user.username }}/">
                    <img src="/static/avatar/m_{% if user.avatar %}{{ user.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" alt="" class="avatar" />
                </a>
                <div class="username">{{ user.username }}</div>
                <div class="website"><a href="{% if user.website %}{{ user.website }}{% endif %}">{% if user.website %}{{ user.website }}{% endif %}</a></div>
            </div>
            <div class="ui-content">
                <div class="status status-topic">
                    <strong><a href="/u/{{ user.username }}/topics/">{{ counter.topics }}</a></strong> 主题
                </div>
                <div class="status status-reply">
                    <strong><a href="/u/{{ user.username }}/replies/">{{ counter.replies }}</a></strong> 回复
                </div>
                <div class="status status-favorite">
                    <strong><a href="/u/{{ user.username }}/favorites/">{{ counter.favorites }}</a></strong> 收藏
                </div>
                <div class="status status-reputation">
                    <strong>{% if user.reputation %}{{ user.reputation }}{% else %}0{% endif %}</strong> 威望
                </div>
            </div>
        </div>
    {% else %}
        <div class="login-box container-box">
            <div class="ui-content tc">
                <a class="btn btn-small mr10" type="button" href="/login/?next={{ request.get_full_path }}">登录</a>
                <a class="btn btn-small mr10" type="button" href="/register/">注册</a>
                <a class="btn btn-small" type="button" href="/forgot/">找回密码</a>
            </div>
        </div>
    {% endif %}
{% endblock %}
