{% extends request.ajax ? "layout_blank.phtml" : "layout_default.phtml" %}
{% import "macro_functions.phtml" as mf %}
{% block meta_title %}{% trans 'Payments history' %}{% endblock %}
{% block breadcrumb %} <li class="active">{% trans 'Payments history' %}</li>{% endblock %}
{% set profile = client.client_get %}

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

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

        <section>
            <table class="table table-striped table-bordered table-condensed table-hover">
                <thead>
                <tr>
                    <th>{% trans 'Description' %}</th>
                    <th>{% trans 'Date' %}</th>
                    <th>{% trans 'Amount' %}</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">{% trans 'The list is empty' %}</td>
                </tr>
                {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2">{% trans 'Total:' %}</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">{% trans 'Add funds!' %}</button>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>

            </div>

        </section>

</article>
</div>

{% endblock %}

{% block js %}
<script type="text/javascript">
    function onAfterInvoiceCreated(hash) {
        var link = '{{ "invoice"|link }}/' + hash;
        bb.redirect(link);
    }
</script>
{% endblock %}

