<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-long-arrow-left fa-fw"></i>
        {{ 'expenses'|_ }} ({{ trans('firefly.topX',{number: expenseTopLength}) }})
    </div>
    <table class="table">
        {% for expense in expenses.getExpenses %}
            {% if loop.index > expenseTopLength %}
                <tr class="collapse out expenseCollapsed">
            {% else %}
                <tr>
            {% endif %}
            <td>
                <a href="{{ route('accounts.show',expense.id) }}">{{ expense.name }}</a>
                {% if expense.count > 1 %}
                    <br /><small>{{ expense.count }} {{ 'transactions'|_|lower }}</small>
                {% endif %}
            </td>
            <td><span class="text-danger">{{ (expense.amount)|formatAmountPlain }}</span></td>
            </tr>
        {% endfor %}
        {% if expenses.getExpenses|length > expenseTopLength %}
            <tr>
                <td colspan="2" class="active">
                    <a href="#" id="showExpenses">{{ trans('firefly.showTheRest',{number:incomeTopLength}) }}</a>
                </td>
            </tr>
        {% endif %}
        <tr>
            <td><em>{{ 'sum'|_ }}</em></td>
            <td><span class="text-danger">{{ (expenses.getTotal)|formatAmountPlain }}</span></td>
        </tr>
    </table>
</div>
