{% 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 }}">{% trans 'Forum' %}</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);">{% trans 'Reply' %}</a>
                                    <a href="#quote-{{message.id}}" class="btn btn-inverse" onclick="$('#reply-{{message.id}}').hide();$('#quote-{{message.id}}').fadeIn(500);">{% trans 'Quote' %}</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>{% trans 'Post new message in forum' %}</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="{% trans 'Post' %}">
                                                </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>{% trans 'Post new message in forum' %}</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="{% trans 'Post' %}">
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </article>
                        </div>
                    </div>
                    <hr/>
                {% else %}
                    <div class="alert alert-info">{% trans 'No replies in this topic' %}</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>{% trans 'Topic information' %}</h2>
                <p>{% trans 'Information about topic. Here you can add this thread to favorites or choose to be notified regarding activity of this topic.' %}</p>
            </header>
            <section>
                <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                    <tr>
                        <td>{% trans 'Forum' %}</td>
                        <td><a href="{{ '/forum'|link }}/{{forum.slug}}">{{ forum.title }}</a></td>
                    </tr>
                    <tr>
                        <td>{% trans 'Topic' %}</td>
                        <td><a href="{{ '/forum'|link }}/{{forum.slug}}/{{topic.slug}}">{{ topic.title }}</a></td>
                    </tr>
                    <tr>
                        <td>{% trans 'Started By' %}</td>
                        <td>{{ topic.first.author.name }}</td>
                    </tr>
                    <tr>
                        <td>{% trans 'Views' %}</td>
                        <td>{{ topic.stats.views_count }}</td>
                    </tr>
                    <tr>
                        <td>{% trans 'Messages' %}</td>
                        <td>{{ topic.stats.posts_count }}</td>
                    </tr>
                    <tr>
                        <td>{% trans 'Since' %}</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">{% trans 'Remove from favorites' %}</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" >{% trans 'Add to favorites' %}</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">{% trans 'Disable notifications for this topic' %}</a>
                            {% else %}
                            <a href="{{ 'api/client/forum/subscribe' | link({'id' : topic.id}) }}" class="btn btn-small api" data-api-reload="1">{% trans 'Subscribe to notifications' %}</a>
                            {% endif %}
                        </td>
                    </tr>
                    </tfoot>
                    {% endif %}
                </table>
                <p>
                    <a class="btn btn-small" href="{{ '/forum'|link }}/{{forum.slug}}">{% trans 'Back to threads list' %}</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%}