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

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

{% block meta_title %}{{ ticket.subject }}{% endblock %}

{% block breadcrumb %}
<li><a href="{{ 'support/contact-us' | link}}">{{ 'Contact us'|trans }}</a><span class="divider">/</span></li>
<li class="active">{{ ticket.subject }}</li>
{% endblock %}

{% block content_before %}

<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h2>{{ 'Ticket information'|trans }}</h2>
                <div class="pull-right">
                    {% if ticket.status != 'closed' %}
                        <button class="btn btn-small" href="{{ 'api/guest/support/ticket_close'|link({ 'hash': ticket.hash })}}" id="new-ticket-button" data-api-reload="1"> {{ 'Close ticket'|trans }}</button>
                    {% endif %}
                </div>
            </header>
            <section>
                <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                    <tr>
                        <td>{{ 'Subject'|trans }}</td>
                        <td><b>{{ ticket.subject }}</b></td>
                    </tr>

                    <tr>
                        <td>{{ 'Author'|trans }}</td>
                        <td>{{ ticket.author.name }}</td>
                    </tr>

                    <tr>
                        <td>{{ 'Email'|trans }}</td>
                        <td>{{ ticket.author.email }}</td>
                    </tr>

                    <tr>
                        <td>{{ 'Status'|trans }}</td>
                        <td>
                            <div class="label {% if ticket.status=='open' %}label-success{% elseif ticket.status == 'on_hold' %}label-warning{% endif %}">{{ mf.status_name(ticket.status) }}</div>
                        </td>
                    </tr>

                    <tr>
                        <td>{{ 'Time opened'|trans }}</td>
                        <td>{{ ticket.created_at|bb_date }}</td>
                    </tr>
                    </tbody>

                    {% if ticket.status != 'closed' %}
                    {% endif %}
                </table>
            </section>
        </div>
    </article>
</div>
{% endblock %}

{% block content %}
<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h1>{{ ticket.subject }}</h1>
                <p>{{ 'by '|trans }} {{ ticket.author_email }}</p>
            </header>
            <section>
                {% for i, message in ticket.messages %}
                <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>{{ message.created_at|bb_date }}
                            <div class="pull-right">
                                <a href="#" class="btn btn-inverse reply-to-message" message-quote="{{ mf.markdown_quote(message.content) }}">{{ 'Reply'|trans }}</a>
                            </div>
                        </header>
                        <section>
                            <div class="well" id="message-{{ message.id }}">{{ message.content|bbmd }}</div>
                        </section>
                    </div>
                </div>
                <hr/>
                {% endfor %}
                <div class="row-fluid">
                    <div class="span3"></div>
                    <div class="span9">
                        {% if ticket.status != 'closed' %}
                        <form method="post" action="" class="api_form" data-api-url="guest/support/ticket_reply" data-api-reload="1">
                            <fieldset>
                                <textarea name="message" cols="5" rows="10" class="span12" required="required" id="ticket-reply-text"></textarea>
                                <button class="btn btn-primary btn-large" type="submit" value="{{ 'Post'|trans }}" onclick="$('.wait').show()">{{ 'Post'|trans }}</button>
                                <input type="hidden" name="hash" value="{{ ticket.hash }}" />
                            </fieldset>
                        </form>
                        {% elseif ticket.status == 'closed' %}
                        <div class="alert alert-white">{{ 'Ticket was closed and cannot be reopened.'|trans }}</div>
                        {% endif %}
                    </div>
                </div>
            </section>
        </div>
    </article>
</div>
{% endblock %}

{% block js %}
<script>
$(function() {
    $('.reply-to-message').click(function(event) {
        event.preventDefault();

        var quote = $(this).attr('message-quote');
        
        $('#ticket-reply-text').text(quote);
        $('#ticket-reply-text').focus();
    });

    $('#public-ticket-reply').bind('submit', function(event) {
        $('.wait').show();
        bb.post(
            'guest/support/ticket_reply',
            $(this).serialize(),
            function(result) {
                bb.reload();
            }
        );
        
        return false;
    });

    $('#new-ticket-button').click(function(e) {
        e.preventDefault();
        
        bb.post("guest/support/ticket_close", { hash: '{{ ticket.hash }}' }, function(r) {
            bb.msg("Ticket was closed");
            bb.reload();
        });
    });
});
</script>
{% endblock %}
