{% extends 'base.html.twig' %}

{% block title %}{{ 'trans.History of balance changes' | trans }}{% endblock %}

{% block body %}
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-4 col-lg-3 mb-4 d-none d-md-block">
                {% include 'user/_part/user_navigation_card.html.twig' %}
            </div>

            <div class="col-md-8 col-lg-9">
                <h3>
                    {{- 'trans.History of balance changes' | trans -}}
                </h3>

                <div class="my-4">
                    {{ 'trans.Current balance' | trans }}:
                    <strong class="badge badge-success">{{ userBalance | moneyPrecise }}</strong>
                    {{ 'trans.that you can use to feature listings' | trans }}
                </div>

                <table class="table table-responsive-sm">
                    <thead>
                    <tr>
                        <th>{{ 'trans.Date' | trans }}</th>
                        <th>{{ 'trans.Balance difference' | trans }}</th>
                        <th>{{ 'trans.Balance after change' | trans }}</th>
                        <th>{{ 'trans.Description' | trans }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for userBalanceChange in userBalanceHistoryList %}
                        <tr>
                            <td><span class="text-nowrap">{{ userBalanceChange.datetime | date }}</span></td>
                            <td>
                                {{- plusPrefixForPositiveNumber(userBalanceChange.balanceChange) -}}
                                {{- userBalanceChange.balanceChange | moneyPrecise -}}
                            </td>
                            <td>{{ userBalanceChange.balanceFinal | moneyPrecise }}</td>
                            <td class="text-break">{{ userBalanceChange.description }}</td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="99">{{ 'trans.no records found' | trans }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}
