<table class="table table-hover">
    <thead>
    <tr>
        <th>{{ 'category'|_ }}</th>
        <th style="text-align: right;">{{ 'spent'|_ }}</th>
        <th>&nbsp;</th>
    </tr>
    </thead>
    <tbody>
    {% set sum = 0 %}
    {% for index, category in report %}
        {% set sum = sum + category.spent %}
        {% if loop.index > listLength %}
            <tr class="overListLength">
        {% else %}
            <tr>
        {% endif %}
        <td>
            <a href="{{ route('categories.show', category.id) }}">{{ category.name }}</a>
        </td>
        <td style="text-align: right;">{{ category.spent|formatAmount }}</td>
        <td style="width:20px;">
            <i class="fa fa-fw fa-info-circle text-muted firefly-info-button"
               data-location="category-entry" data-category-id="{{ category.id }}"
            ></i>
        </td>
        </tr>
    {% endfor %}
    </tbody>
    <tfoot>
    {% if report|length > listLength %}
        <tr>
            <td colspan="3" class="active">
                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
            </td>
        </tr>
    {% endif %}

    <tr>
        <td><em>{{ 'sum'|_ }}</em></td>
        <td style="text-align: right;">{{ sum|formatAmount }}</td>
        <td>&nbsp;</td>
    </tr>
    </tfoot>
</table>
