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

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

{% block meta_title %}{{ 'Payments history'|trans }}{% endblock %}
{% block breadcrumb %} <li class="active">{{ 'Payments history'|trans }}</li>{% endblock %}

{% set profile = client.client_get %}

{% block content %}
<div class="row">
<article class="span12 data-block">
    <div class="data-container">

        <header>
           <h1>{{ 'Payments history'|trans }}</h1>
           <p>{{ 'Here you can track what you have been charged for and add more funds to your account'|trans }}</p>
        </header>

        <section>
            <table class="table table-striped table-bordered table-condensed table-hover">
                <thead>
                    <tr>
                        <th>{{ 'Description'|trans }}</th>
                        <th>{{ 'Date'|trans }}</th>
                        <th>{{ 'Amount'|trans }}</th>
                    </tr>
                </thead>
                <tbody>
                {% set transactions = client.client_balance_get_list({ "per_page": 10, "page": request.page }) %}
                {% for i, tx in transactions.list %}
                <tr class="{{ cycle(['odd', 'even'], i) }}">
                    <td>{{ tx.description }}</td>
                    <td>{{ tx.created_at|bb_date }}</td>
                    <td>{{ tx.amount|money(tx.currency) }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="3">{{ 'The list is empty'|trans }}</td>
                </tr>
                {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2">{{ 'Total:'|trans }}</td>
                        <td><strong>{{ profile.balance | money(profile.currency) }}</strong></td>
                    </tr>
                </tfoot>
            </table>
            {% include "partial_pagination.phtml" with { 'list': transactions } %}

            <div class="row-fluid">
                <div class="span3">
                    <form action="" method="post" class="form-inline api-form" data-api-url="{{ 'api/client/invoice/funds_invoice'|link }}" data-api-jsonp="onAfterInvoiceCreated">
                        <fieldset>
                            <div class="control-group">
                                <div class="form-controls">
                                    <div class="input-append">
                                        <input id="appendedPrependedInput" class="span4" type="text" name="amount" placeholder="0" required="required"><button class="btn" type="submit">{{ 'Add funds!'|trans }}</button>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </section>
</article>
</div>
{% endblock %}

{% block js %}
<script>
    function onAfterInvoiceCreated(hash) {
        var link = '{{ "invoice"|link }}/' + hash;

        bb.redirect(link);
    }
</script>
{% endblock %}
