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

{% 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/base/juicer-min.js"></script>
    <script type="text/juicer" id="J_githubTpl">
        <ul>
            {@each github_repos as repo}
                {@if !repo.fork}
                    <li>
                        <div class="title">
                            <a href="${repo.svn_url}" rel="nofollow" target="_blank">${repo.name}</a>
                            <span class="watchers" title="${repo.watchers} Watchers">${repo.watchers}</span>
                        </div>
                        <p class="desc">
                            ${repo.description}
                        </p>
                    </li>
                {@/if}
            {@/each}
        </ul>
    </script>
    {% if user_info.github %}
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $.ajax({
                type: 'GET',
                dataType: 'jsonp',
                url: 'https://api.github.com/users/{{ user_info.github }}/repos',
                data: {},
                success: function(data) {
                    $('.J_githubContainer').html(juicer('#J_githubTpl', {github_repos: data.data}));
                }
            });
        });
    </script>
    {% endif %}
{% endblock %}

{% block main %}
    <div class="user-page">
        <div class="profile container-box">
            <div class="ui-header">
                <a href="/u/{{ user_info.username }}/">
                    <img src="/static/avatar/m_{% if user_info.avatar %}{{ user_info.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" alt="" class="avatar" />
                </a>
                <div class="username">{{ user_info.username }}</div>
                {% if user_info.website %}
                    <div class="website"><a href="{% if user_info.website %}{{ user_info.website }}{% endif %}">{% if user_info.website %}{{ user_info.website }}{% endif %}</a></div>
                {% endif %}
                <div class="user-number">
                    <div class="number">小程序开发社区第{{ user_info.id }}号成员</div>
                    <div class="since">入住于{{ user_info.date_joined.date }}</div>
                </div>
            </div>
            <div class="ui-content">
                <dl>
                    <dt>ID</dt>
                    <dd>{{ user_info.username }}</dd>
                </dl>
                {% if user_info.nickname %}
                <dl>
                    <dt>名号</dt>
                    <dd>{{ user_info.nickname }}</dd>
                </dl>
                {% endif %}
                {% if user_info.location %}
                <dl>
                    <dt>城市</dt>
                    <dd>{{ user_info.location }}</dd>
                </dl>
                {% endif %}
                {% if user_info.company %}
                <dl>
                    <dt>公司</dt>
                    <dd>{{ user_info.company }}</dd>
                </dl>
                {% endif %}
                <dl>
                    <dt>Email</dt>
                    <dd>{{ user_info.email|email_mosaic }}</dd>
                </dl>
                {% if user_info.twitter %}
                <dl>
                    <dt>Twitter</dt>
                    <dd><a href="http://twitter.com/{{ user_info.twitter }}">http://twitter.com/{{ user_info.twitter }}</a></dd>
                </dl>
                {% endif %}
                {% if user_info.github %}
                <dl>
                    <dt>Github</dt>
                    <dd><a href="http://github.com/{{ user_info.github }}">http://github.com/{{ user_info.github }}</a></dd>
                </dl>
                {% endif %}
                {% if user_info.website %}
                <dl>
                    <dt>Blog</dt>
                    <dd><a href="{{ user_info.website }}">{{ user_info.website }}</a></dd>
                </dl>
                {% endif %}
                {% if user_info.signature %}
                <dl>
                    <dt>签名</dt>
                    <dd>{{ user_info.signature }}</dd>
                </dl>
                {% endif %}
            </div>
        </div>

        {% if user_info.github %}
        <div class="project-lists container-box mt10">
            <div class="ui-header">
                <span class="title">开源项目</span>
            </div>
            <div class="ui-content J_githubContainer">
                {% comment %}
                <ul>
                    {% for repo in github_repos if not repo.fork %}
                        <li>
                            <div class="title">
                                <a href="{{ repo.svn_url }}" rel="nofollow" target="_blank">{{ repo.name }}</a>
                                <span class="watchers" title="{{ repo.watchers }} Watchers">{{ repo.watchers }}</span>
                            </div>
                            <p class="desc">
                                {{ repo.description }}
                            </p>
                        </li>
                    {% endfor %}
                </ul>
                {% endcomment %}
                <img src="/static/images/ajax-loader.gif" alt="" class="mt5" />
            </div>
        </div>
        {% endif %}

        {% ifnotequal topic_page.total 0 %}
        <div class="topic-lists container-box mt10">
            <div class="ui-header">
                <span class="title">主题列表</span>
            </div>
            <div class="ui-content topics">
                {% for topic in topics %}
                    <div class="topic-item">
                        <img src="/static/avatar/m_{% if topic.author.avatar %}{{ topic.author.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" alt="" class="avatar" />
                        <div class="main">
                            <h3 class="title">
                                <a href="/t/{{ topic.id }}/">{{ topic.title }}</a>
                            </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="last-touched">{{ topic.last_touched|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>
                                {% else %}
                                    <span class="last-touched">{{ topic.last_touched|pretty_date }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% if topic.reply_count %}
                            <div class="count">
                                <a href="/t/{{ topic.id }}/#reply{% if topic.reply_count %}{{ topic.reply_count }}{% else %}0{% endif %}">{% if topic.reply_count %}{{ topic.reply_count }}{% else %}0{% endif %}</a>
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}

                {% comment %}
                <div class="pagination">
                    {% pagination topic_page request.get_full_path %}
                </div>
                {% endcomment %}
            </div>
            <div class="ui-footer">
                <a href="/u/{{ user_info.username }}/topics/">›› 查看更多主题</a>
            </div>
        </div>
        {% endifnotequal %}

        {% ifnotequal reply_page.total 0 %}
        <div class="replies-lists container-box mt10">
            <div class="ui-header">
                <span class="title">回复列表</span>
            </div>
            <div class="ui-content topics">
                {% for reply in replies %}
                    <div class="reply-item">
                        <div class="main">
                            <span class="title">
                                回复了 {{ reply.topic.author.username }} 创建的主题 <a href="/t/{{ reply.topic.id }}/">{{ reply.topic.title }}</a>
                            </span>
                            <div class="content">
                                {{ reply.content|markdown|content_process|safe }}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="ui-footer">
                <a href="/u/{{ user_info.username }}/replies/">›› 查看更多回复</a>
            </div>
        </div>
        {% endifnotequal %}
    </div>
{% endblock %}

{% block sidebar %}
    <div class="user-page">
        <div class="usercard container-box">
            <div class="ui-content">
                <div class="status status-topic">
                    <strong><a href="/u/{{ user_info.username }}/topics/">{{ counter.topics }}</a></strong> 主题
                </div>
                <div class="status status-reply">
                    <strong><a href="/u/{{ user_info.username }}/replies/">{{ counter.replies }}</a></strong> 回复
                </div>
                <div class="status status-favorite">
                    <strong><a href="/u/{{ user_info.username }}/favorites/">{{ counter.favorites }}</a></strong> 收藏
                </div>
                <div class="status status-reputation">
                    <strong>{% if user_info.reputation %}{{ user_info.reputation }}{% else %}0{% endif %}</strong> 威望
                </div>
            </div>
        </div>

        {% if user_info.self_intro %}
            <div class="self-introduction container-box mt10">
                <div class="ui-header">
                    <span class="title">自我介绍</span>
                </div>
                <div class="ui-content">
                    {{ user_info.self_intro|linebreaks }}
                </div>
            </div>
        {% endif %}

        {% if user_info.douban %}
            <div class="book-lists container-box mt10">
                <div class="ui-header">
                    <span class="title">正在读的书籍列表</span>
                </div>
                <div class="ui-content">
                    <script type="text/javascript" src="http://www.douban.com/service/badge/{{ user_info.douban }}/?show=dolist&amp;n=12&amp;columns=3&amp;picsize=medium&amp;hidelogo=yes&amp;hideself=yes&amp;cat=book" ></script>
                </div>
            </div>

            <div class="book-lists container-box mt10">
                <div class="ui-header">
                    <span class="title">已读过的书籍列表</span>
                </div>
                <div class="ui-content">
                    <script type="text/javascript" src="http://www.douban.com/service/badge/{{ user_info.douban }}/?show=collection&amp;n=12&amp;columns=3&amp;picsize=medium&amp;hidelogo=yes&amp;hideself=yes&amp;cat=book" ></script>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}