firefly-iii/resources/views/v1/list/piggy-banks.twig

<table class="table table-hover table-condensed" id="piggy-sortable">
    <thead>
    <tr>
        <th colspan="2">&nbsp;</th>
        <th>{{ 'piggy_bank'|_ }}</th>
        <th style="text-align: right;">{{ 'saved_so_far'|_ }}</th>
        <th colspan="3" class="hidden-sm hidden-xs">&nbsp;</th>
        <th style="text-align: right;" class="hidden-sm hidden-xs">{{ 'target_amount'|_ }}</th>
        <th style="text-align: right;" class="hidden-sm hidden-xs">{{ 'left_to_save'|_ }}</th>
        <th style="text-align: right;" class="hidden-sm hidden-xs">{{ 'suggested_savings_per_month'|_ }}</th>
    </tr>
    </thead>

    {% for objectGroupOrder, objectGroup in piggyBanks %}
        {% if objectGroup.piggy_banks|length > 0 %}
            <tbody class="piggy-connected-list" {% if objectGroupOrder != 0 %}data-title="{{ objectGroup.object_group_title }}"{% else %}data-title=""{% endif %}>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="8"><small>{{ objectGroup.object_group_title }}</small></td>
            </tr>
            {% for piggy in objectGroup.piggy_banks %}
                <tr class="piggy-sortable" data-id="{{ piggy.id }}" data-name="{{ piggy.name }}" data-order="{{ piggy.order }}" data-position="{{ loop.index0 }}">
                    <td class="visible-xs visible-sm hidden-md hidden-lg">
                        &nbsp;
                    </td>
                    <td class="visible-xs visible-sm hidden-md hidden-lg">
                        <div class="btn-group btn-group-xs">
                            <a href="{{ route('piggy-banks.remove-money-mobile', piggy.id) }}" class="btn btn-default btn-xs"><i class="fa fa-minus"></i></a>
                            <a href="{{ route('piggy-banks.add-money-mobile', piggy.id) }}" class="btn btn-default btn-xs"><i class="fa fa-plus"></i></a>
                        </div>
                    </td>
                    <td style="width:60px;" class="hidden-sm hidden-xs">
                        <i class="fa fa-fw fa-bars piggy-handle"></i>
                        <i class="loadSpin"></i>
                    </td>
                    <td style="width:100px;" class="hidden-sm hidden-xs">
                        <div class="btn-group btn-group-xs">
                            <a href="{{ route('piggy-banks.edit', piggy.id) }}" class="btn btn-default btn-xs"><i class="fa fa-pencil fa-fw"></i></a>
                            <a href="{{ route('piggy-banks.delete', piggy.id) }}" class="btn btn-danger btn-xs"><i class="fa fa-trash fa-fw"></i></a>
                        </div>
                    </td>
                    <td>
                        <a href="{{ route('piggy-banks.show', piggy.id) }}" title="{{ piggy.account_name }}">{{ piggy.name }}</a>
                        {% if piggy.attachments.count() > 0 %}
                            <i class="fa fa-fw fa-paperclip"></i>
                        {% endif %}
                    </td>
                    <td style="text-align: right;" class="piggySaved">
                    <span title="Saved so far"
                          style="text-align:right;">{{ formatAmountBySymbol(piggy.current_amount,piggy.currency_symbol,piggy.currency_decimal_places) }}</span>
                    </td>
                    <td class="hidden-sm hidden-xs" style="text-align:right;width:40px;">
                        {% if piggy.current_amount > 0 %}
                            <a href="{{ route('piggy-banks.remove-money', piggy.id) }}" class="btn btn-default btn-xs removeMoney" data-id="{{ piggy.id }}">
                                <i data-id="{{ piggy.id }}" class="fa fa-minus"></i></a>
                        {% endif %}
                    </td>

                    <td class="hidden-sm hidden-xs piggyBar">
                        <div class="progress progress" style="margin-bottom:0;">
                            <div
                                    {% if piggy.percentage == 100 %}
                                        class="progress-bar progress-bar-success"
                                    {% elseif piggy.percentage == 0 %}
                                        class="progress-bar progress-bar-warning"
                                    {% else %}
                                        class="progress-bar progress-bar-info"
                                    {% endif %}
                                    role="progressbar" aria-valuenow="{{ piggy.percentage }}" aria-valuemin="0" aria-valuemax="100"
                                    style="min-width: 30px;width: {{ piggy.percentage }}%;">
                                {{ piggy.percentage }}%
                            </div>
                        </div>
                    </td>


                    <td class="hidden-sm hidden-xs" style="width:40px;">
                        {% if piggy.left_to_save > 0 %}
                            <a href="{{ route('piggy-banks.add-money', piggy.id) }}" class="btn btn-default btn-xs addMoney" data-id="{{ piggy.id }}">
                                <i data-id="{{ piggy.id }}" class="fa fa-plus"></i></a>
                        {% endif %}
                    </td>
                    <td class="hidden-sm hidden-xs" style="text-align:right;">
                        <span title="{{ 'target_amount'|_ }}">{{ formatAmountBySymbol(piggy.target_amount,piggy.currency_symbol,piggy.currency_decimal_places) }}</span>
                    </td>
                    <td class="hidden-sm hidden-xs" style="text-align:right;">
                        {% if piggy.left_to_save > 0 %}
                            <span title="{{ 'left_to_save'|_ }}">{{ formatAmountBySymbol(piggy.left_to_save,piggy.currency_symbol,piggy.currency_decimal_places) }}</span>
                        {% endif %}
                    </td>
                    <td class="hidden-sm hidden-xs" style="text-align:right;">
                        {% if piggy.target_date %}
                            {{ formatAmountBySymbol(piggy.save_per_month, piggy.currency_symbol, piggy.currency_decimal_places) }}
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            <tr>
                <td class="visible-xs visible-sm hidden-md hidden-lg">&nbsp;</td>
                <td class="visible-xs visible-sm hidden-md hidden-lg">&nbsp;</td>
                <td class="hidden-sm hidden-xs">&nbsp;</td> {# handle #}
                <td class="hidden-sm hidden-xs">&nbsp;</td> {# buttons #}
                <td>&nbsp;</td>
                <td style="text-align: right;">
                    {% for sum in objectGroup.sums %}
                        {{ formatAmountBySymbol(sum.saved, sum.currency_symbol, sum.currency_decimal_places) }}<br />
                    {% endfor %}
                    </td>
                <td class="hidden-sm hidden-xs">&nbsp;</td> {# remove money #}
                <td class="hidden-sm hidden-xs">&nbsp;</td> {# progress#}
                <td class="hidden-sm hidden-xs">&nbsp;</td> {# add money #}
                <td class="hidden-sm hidden-xs" style="text-align: right;">
                    {% for sum in objectGroup.sums %}
                        {{ formatAmountBySymbol(sum.target, sum.currency_symbol, sum.currency_decimal_places) }}<br />
                    {% endfor %}
                </td>
                <td class="hidden-sm hidden-xs" style="text-align: right;">
                    {% for sum in objectGroup.sums %}
                        {{ formatAmountBySymbol(sum.left_to_save, sum.currency_symbol, sum.currency_decimal_places) }}<br />
                    {% endfor %}
                </td>
                <td class="hidden-sm hidden-xs" style="text-align: right;">
                    {% for sum in objectGroup.sums %}
                        {{ formatAmountBySymbol(sum.save_per_month, sum.currency_symbol, sum.currency_decimal_places) }}<br />
                    {% endfor %}
                </td>
            </tr>
            </tbody>
        {% endif %}
    {% endfor %}
</table>