<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-long-arrow-right fa-fw"></i>
        {{ 'income'|_ }} ({{ trans('firefly.topX',{number: incomeTopLength}) }})
    </div>
    <table class="table">
        {% for income in incomes.getIncomes %}
            {% if loop.index > incomeTopLength %}
                <tr class="collapse out incomesCollapsed">
            {% else %}
                <tr>
            {% endif %}
            <td>
                <a href="{{ route('accounts.show',income.id) }}" title="{{ income.name }}">{{ income.name }}</a>
                {% if income.count > 1 %}
                    <br /><small>{{ income.count }} {{ 'transactions'|_|lower }}</small>
                {% endif %}
            </td>
            <td>{{ income.amount|formatAmount }}</td>
            </tr>
        {% endfor %}
        {% if incomes.getIncomes|length > incomeTopLength %}
            <tr>
                <td colspan="2" class="active">
                    <a href="#" id="showIncomes">{{ trans('firefly.showTheRest',{number:incomeTopLength}) }}</a>
                </td>
            </tr>
        {% endif %}
        <tr>
            <td><em>{{ 'sum'|_ }}</em></td>
            <td>{{ incomes.getTotal|formatAmount }}</td>
        </tr>
    </table>
</div>
