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

{% block meta_title %}{{ forum.title }}{% endblock %}
{% block meta_description %}{{ forum.description }}{% endblock %}
{% block breadcrumb %}
	<li> <a href="{{ '/forum' | link }}">{% trans 'Forum' %}</a><span class="divider">/</span> </li>
    <li> {{ forum.title }}</li>
{% endblock %}
{% block content %}
<div class="row">
    <article class="span12 data-block" role="main">
        <div class="data-container">
            <header>
                <h1>{{ forum.title }}</h1>
                <br/>
                {{ forum.description }}
                <ul class="data-header-actions">
                    <li>
                        <button class="btn btn-alt" type="button" onclick="parent.location='{{ '/forum'|link }}'">{% trans 'Forum list' %}</button>
                    </li>
                    <li>
                        {% if client %}
                        <a href="#new-topic-modal" class="btn btn-alt btn-info" type="button" role="button" data-toggle="modal" id="new-topic">{% trans 'New topic' %}</a>
                        {% else %}
                        <button class="btn btn-alt" type="button" onclick="parent.location='{{ '/login'|link }}'"><span class="awe-comments"></span> {% trans 'Register' %}</button>
                        {% endif %}
                    </li>
                </ul>
            </header>
            <section>
                <table class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th style="width:5%">&nbsp;</th>
                        <th style="width:5%">&nbsp;</th>
                        <th style="width:40%">{% trans 'Thread / Thread Starter' %}</th>
                        <th>{% trans 'Last post' %}</th>
                        <th>{% trans 'Replies' %}</th>
                        <th>{% trans 'Views' %}</th>
                    </tr>
                </thead>

                <tbody>
                    {% set topics = guest.forum_get_topic_list({"forum_id":forum.id, "per_page":10,"page":request.page}) %}
                    {% for i, topic in topics.list %}

                    <tr class="{{ cycle(['odd', 'even'], i) }}">
                        <td>
                            <span class="awe-comments awe-2x {{topic.status}}" style="padding-right: 0px; padding-left: 5px"></span>
                        </td>
                        <td>
                            <img src="{{ topic.first.author.email|gravatar }}?size=30" alt="{{ topic.first.author.name }}" />
                        </td>
                        <td>
                            <a href="{{ '/forum'|link }}/{{forum.slug}}/{{topic.slug}}">{{topic.title}}</a>
                            <p style="font-size: .9em">{{ topic.first.author.name }}</p>
                        </td>
                        <td>
                            {{ topic.last.created_at|bb_date }}
                            <p style="font-size: .9em">{% trans 'by' %} <a href="{{ '/forum'|link }}/{{forum.slug}}/{{topic.slug}}#m-{{ topic.last.id }}">{{ topic.last.author.name }} {#<img src="{{ topic.last.author.email|gravatar }}?size=15" alt="{{ topic.last.author.name }}"></a>#}</p>
                        </td>
                        <td>{{ topic.stats.posts_count }}</td>
                        <td>{{ topic.stats.views_count }}</td>
                    </tr>

                    {% else %}

                    <tr>
                        <td colspan="6">{% trans 'The list is empty' %}</td>
                    </tr>

                    {% endfor %}

                </tbody>

            </table>
            </section>
        </div>
    </article>
</div>

    {% include "partial_pagination.phtml" with {'list': topics} %}

<div class="modal hide fade" id="new-topic-modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3><span class="awe-comments"></span> {% trans 'Start new topic in' %} "{{ forum.title }}"</h3>
    </div>
    <div class="modal-body">
        <form action="" method="post" id="forum-new-topic" class="form-horizontal" style="background-color: white; border: 0px">
            <div class="control-group">
                <label class="control-label" for="topic">{% trans 'Topic title' %}: </label>
                <div class="controls">
                    <input type="text" name="topic" id="topic" value="{{ request.topic }}" required="required">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="message">{% trans 'Topic message' %}: </label>
                <div class="controls">
                    <textarea name="message" id="message" cols="5" rows="5" required="required">{{ request.message }}</textarea>
                </div>
            </div>
                <input type="hidden" name="return" value="slug">
                <input type="hidden" name="forum_id" value="{{ forum.id }}">
    </div>
    <div class="modal-footer" aria-hidden="true">
        <input class="btn btn-primary btn-large" type="submit" value="{% trans 'Create new topic' %}">
    </div>
    </form>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
$(function() {

    $('#forum-new-topic').bind('submit', function(){
        bb.post(
            'client/forum/start_topic',
            $(this).serialize(),
            function(result) {
                bb.redirect('{{ "forum"|link }}' + '/' + '{{ forum.slug }}' + '/' + result);
            }
        );
        return false;
    });

});
</script>
{% endblock %}