{% extends "forum/base.html" %}
{% load humanize %}
{% load activity_tags %}

{% block title %}{{ topic.title }}{% endblock %}
{% block section_title %}{{ topic.title }}{% endblock %}

{% block forum_content %}
    <div class="large-12 columns row">
        <div class="large-10 columns push-2">
            <a href="{% url forum_home %}">Forum Home</a> &middot; <a href="{% url forum_board_home topic.forum.category.slug topic.forum.slug %}">{{ topic.forum.name }}</a>
            <h2>{{ topic.title }}</h2>
            <p>{{ topic.message.text }}</p>
            <p>{{ topic.created|naturaltime }}</p>
        </div>
        <div class="large-2 columns pull-10 center">
            <div class="hide-for-small"><img class="avatar" src="{{ topic.user.get_profile.get_mugshot_url }}" /><br /></div>
            <div><a href="{{ topic.user.get_absolute_url }}">{{ topic.user.username }}</a></div>
            {% if user.is_authenticated %}
                {% if user|is_following:topic.user %}
                    <div><a class="small button" id="unfollow_button" href="{% follow_url topic.user %}">Unfollow</a></div>
                {% else %}
                    <div><a class="small button" id="follow_button" href="{% follow_url topic.user %}">Follow</a></div>
                {% endif %}

                <div><a class="small button" href="blah">Subscribe</a></div>
            {% endif %}
        </div>
    </div>
    <hr />
    <div style="float: right; margin: -35px 10px 0 0;">
        <a class="small button" href="{% url forum_reply topic.slug %}">Reply</a>
        <a class="small button" href="blah">Subscribe</a>
    </div>
        {% for message in messages %}
            <div class="large-12 columns" style="margin: 0 0 15px 0; padding: 10px 0 15px 0; border-bottom: 1px solid #ccc;">
                <div class="large-1 small-3 columns">
                    <img class="avatar small" src="{{ message.user.get_profile.get_mugshot_url }}" />
                    <a href="{{ message.user.get_absolute_url }}">{{ message.user.username }}</a>
                </div>
                <div class="large-11 small-9 columns ">
                    <p>{{ message.text }}</p>
                    <p>{{ message.created|naturaltime }}</p>
                </div>
            </div>
        {% empty %}
            <p>Sorry, no messages in here yet.</p>
        {% endfor %}
        <div>
            {% if messages.has_other_pages %}
                <div class="large-12 columns" style="text-align: right;">
                    <ul class="pagination" style="float: right;">
                    {% if messages.has_previous %}
                        <li class="arrow"><a href="?page={{ messages.previous_page_number }}">&laquo;</a></li>
                    {% endif %}

                    {% for page_num in paginator.page_range %}
                        {% ifequal page_num page %}
                            <li class="current">{{ page_num }}</li>
                        {% else %}
                            <li><a href="?page={{ page_num }}">{{ page_num }}</a>
                        {% endifequal %}
                    {% endfor %}<br />

                    {% if messages.has_next %}
                        <li class="arrow"><a href="?page={{ messages.next_page_number }}">&raquo;</a></li>
                    {% endif %}
                    </ul>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}
