{% extends request.ajax ? "layout_blank.phtml" : "layout_default.phtml" %}

{% import "macro_functions.phtml" as mf %}

{% block meta_title %}{{ topic.title }}{% endblock %}
{% block meta_description%}{{ topic.first.message|truncate(200) }}{% endblock %}

{% block breadcrumb %}
    <li> <a href="{{ '/forum' | link }}">{{ 'Forum'|trans }}</a><span class="divider">/</span> </li>
    <li> <a href="{{ '/forum'|link }}/{{forum.slug}}"> {{ forum.title }}</a><span class="divider">/</span> </li>
    <li class="active"> {{ topic.title }} </li>
{% endblock %}

{% block content %}

<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h1 class="text-center">{{ topic.title }}</h1>
                <p>{{ forum.title }}</p>
            </header>
            <section>
                {% set messages = guest.forum_get_topic_message_list({ "forum_topic_id": topic.id, "page": request.page, "per_page": 10 }) %}
                {% for i, message in messages.list %}
                    <div class="row-fluid">
                        <div class="span3">
                            <div class="thumbnails">
                                <img src="{{ message.author.email|gravatar }}?size=60" alt="{{ message.author.name }}" class="gravatar">
                                <h3>
                                    {{ message.author.name }}
                                </h3>
                            </div>
                        </div>
                        <div class="span9">
                            <header>#{{ i+1 }} | {{ message.created_at|bb_date }}
                                <div class="pull-right">
                                    <a href="#reply-{{message.id}}" class="btn btn-inverse" onclick="$('#quote-{{message.id}}').hide();$('#reply-{{message.id}}').fadeIn(500);">{{ 'Reply'|trans }}</a>
                                    <a href="#quote-{{message.id}}" class="btn btn-inverse" onclick="$('#reply-{{message.id}}').hide();$('#quote-{{message.id}}').fadeIn(500);">{{ 'Quote'|trans }}</a>
                                </div>
                            </header>

                            <article>
                                <div class="well">{{ message.message|bbmd }}</div>
                                <div id="reply-{{message.id}}" style="display:none">
                                    <form method="post" action="" class="post-reply" style="background: none; border 0px;">
                                        <fieldset>
                                            <div class="control-group">
                                                <label>{{ 'Post new message in forum'|trans }}</label>
                                                <div class="controls">
                                                    <textarea name="message" cols="5" rows="10" required="required" autofocus="autofocus" class="span12"></textarea>
                                                </div>
                                            </div>

                                            <input type="hidden" name="forum_topic_id" value="{{ topic.id }}">
                                            <div class="control-group">
                                                <div class="controls">
                                                    <input class="btn btn-primary btn-large" type="submit" value="{{ 'Post'|trans }}">
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>

                                <div id="quote-{{message.id}}" style="display: none">
                                    <form method="post" action="" class="post-quote" style="background: none; border 0px;">
                                        <fieldset>
                                            <div class="control-group">
                                                <label>{{ 'Post new message in forum'|trans }}</label>
                                                <div class="controls">
                                                    <textarea name="message" cols="5" rows="10" required="required" autofocus="autofocus" class="span12">{{ mf.markdown_quote(message.message) }}</textarea>
                                                </div>
                                            </div>
                                            <input type="hidden" name="forum_topic_id" value="{{ topic.id }}">
                                            <div class="control-group">
                                                <div class="controls">
                                                    <input class="btn btn-primary btn-large" type="submit" value="{{ 'Post'|trans }}">
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </article>
                        </div>
                    </div>
                    <hr/>
                {% else %}
                    <div class="alert alert-info">{{ 'No replies in this topic'|trans }}</div>
                {% endfor %}
                {% include "partial_pagination.phtml" with { 'list': messages } %}
            </section>
        </div>
    </article>
</div>
<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h2>{{ 'Topic information'|trans }}</h2>
                <p>{{ 'Information about topic. Here you can add this thread to favorites or choose to be notified regarding activity of this topic.'|trans }}</p>
            </header>
            <section>
                <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                    <tr>
                        <td>{{ 'Forum'|trans }}</td>
                        <td><a href="{{ '/forum'|link }}/{{forum.slug}}">{{ forum.title }}</a></td>
                    </tr>
                    <tr>
                        <td>{{ 'Topic'|trans }}</td>
                        <td><a href="{{ '/forum'|link }}/{{forum.slug}}/{{topic.slug}}">{{ topic.title }}</a></td>
                    </tr>
                    <tr>
                        <td>{{ 'Started By'|trans }}</td>
                        <td>{{ topic.first.author.name }}</td>
                    </tr>
                    <tr>
                        <td>{{ 'Views'|trans }}</td>
                        <td>{{ topic.stats.views_count }}</td>
                    </tr>
                    <tr>
                        <td>{{ 'Messages'|trans }}</td>
                        <td>{{ topic.stats.posts_count }}</td>
                    </tr>
                    <tr>
                        <td>{{ 'Since'|trans }}</td>
                        <td>{{topic.created_at|bb_date}}</td>
                    </tr>
                    </tbody>
                    {% if client %}
                    <tfoot>
                    <tr>
                        <td colspan="2">
                            {% if client.forum_is_favorite({"id":topic.id}) %}
                            <a href="{{ 'api/client/forum/favorite_remove' | link({'id' : topic.id}) }}" class="btn btn-small api" data-api-reload="1">{{ 'Remove from favorites'|trans }}</a>
                            {% else %}
                            <a href="{{ 'api/client/forum/favorite_add' | link({'id' : topic.id}) }}" class="btn btn-small api" data-api-msg="Added to favorites" data-api-reload="1" >{{ 'Add to favorites'|trans }}</a>
                            {% endif %}

                            {% if client.forum_is_subscribed({"id":topic.id}) %}
                            <a href="{{ 'api/client/forum/unsubscribe' | link({'id' : topic.id}) }}" class="btn btn-small api" data-api-reload="1">{{ 'Disable notifications for this topic'|trans }}</a>
                            {% else %}
                            <a href="{{ 'api/client/forum/subscribe' | link({'id' : topic.id}) }}" class="btn btn-small api" data-api-reload="1">{{ 'Subscribe to notifications'|trans }}</a>
                            {% endif %}
                        </td>
                    </tr>
                    </tfoot>
                    {% endif %}
                </table>
                <p>
                    <a class="btn btn-small" href="{{ '/forum'|link }}/{{forum.slug}}">{{ 'Back to threads list'|trans }}</a>
                </p>
            </section>
        </div>
    </article>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
    $(function() {
        $('.post-reply, .post-quote').bind('submit', function(event) {
            event.preventDefault();
            $('.wait').show();
            bb.post(
                'client/forum/post_message',
                $(this).serialize(),
                function(result) {
                    window.location.reload(true);
                }
            );
            
            return false;
        });
    });
</script>
{% endblock%}
