{% 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}}">{% trans 'Contact us' %}</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>{% trans 'Ticket information' %}</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"> {% trans 'Close ticket' %}</button>
                    {% endif %}
                </div>
            </header>
            <section>
                <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                    <tr>
                        <td>{% trans 'Subject' %}</td>
                        <td><b>{{ticket.subject}}</b></td>
                    </tr>

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

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

                    <tr>
                        <td>{% trans 'Status' %}</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>{% trans 'Time opened' %}</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>{% trans 'by '%} {{ 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) }}">{% trans 'Reply' %}</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="{% trans 'Post' %}" onclick="$('.wait').show()">{% trans 'Post' %}</button>
                                <input type="hidden" name="hash" value="{{ ticket.hash }}" />
                            </fieldset>
                        </form>
                        {% elseif ticket.status == 'closed' %}
                        <div class="alert alert-white">{% trans 'Ticket was closed and cannot be reopened.' %}</div>
                        {% endif %}
                    </div>
                </div>
            </section>
        </div>
    </article>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
$(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 %}