firefly-iii/resources/views/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 class="text-right">{{ 'saved_so_far'|_ }}</th>
        <th colspan="3" class="hidden-sm hidden-xs">&nbsp;</th>
        <th class="text-right hidden-sm hidden-xs">{{ 'target_amount'|_ }}</th>
        <th class="text-right hidden-sm hidden-xs">{{ 'left_to_save'|_ }}</th>
        <th class="text-right 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 }}">
                    <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"><span class="fa fa-minus"></span></a>
                            <a href="{{ route('piggy-banks.add-money-mobile', piggy.id) }}" class="btn btn-default btn-xs"><span class="fa fa-plus"></span></a>
                        </div>
                    </td>
                    <td  class="hidden-sm hidden-xs sixty-px">
                        <span class="fa fa-fw fa-bars piggy-handle"></span>
                        <span class="loadSpin"></span>
                    </td>
                    <td class="hidden-sm hidden-xs hundred-px">
                        <div class="btn-group btn-group-xs">
                            <a href="{{ route('piggy-banks.edit', piggy.id) }}" class="btn btn-default btn-xs"><span class="fa fa-pencil fa-fw"></span></a>
                            <a href="{{ route('piggy-banks.delete', piggy.id) }}" class="btn btn-danger btn-xs"><span class="fa fa-trash fa-fw"></span></a>
                        </div>
                    </td>
                    <td>
                        <a href="{{ route('piggy-banks.show', piggy.id) }}" title="{{ piggy.account_name }}">{{ piggy.name }}</a>
                        {% if piggy.attachments.count() > 0 %}
                            <span class="fa fa-fw fa-paperclip"></span>
                        {% endif %}
                    </td>
                    <td class="text-right piggySaved">
                    <span title="Saved so far" class="text-right">
                        {{ formatAmountBySymbol(piggy.current_amount,piggy.currency_symbol,piggy.currency_decimal_places) }}
                        {% if convertToPrimary and piggy.currency_id != primaryCurrency.id and null != piggy.pc_current_amount %}
                            ({{ formatAmountBySymbol(piggy.pc_current_amount,primaryCurrency.symbol,primaryCurrency.decimal_places) }})
                        {% endif %}
                    </span>
                    </td>
                    <td class="hidden-sm hidden-xs text-right forty-px">
                        {% 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 }}">
                                <span data-id="{{ piggy.id }}" class="fa fa-minus"></span></a>
                        {% endif %}
                    </td>

                    <td class="hidden-sm hidden-xs piggyBar">
                        {% if null != piggy.percentage %}
                        <div class="progress progress mb-0">
                            <div
                                    {% if piggy.percentage == 100 %}
                                        class="progress-bar progress-bar-success width-{{ max(30, piggy.percentage)|round }}"
                                    {% elseif piggy.percentage == 0 %}
                                        class="progress-bar progress-bar-warning width-{{ max(30, piggy.percentage)|round }}"
                                    {% else %}
                                        class="progress-bar progress-bar-info width-{{ max(30, piggy.percentage)|round }}"
                                    {% endif %}
                                    role="progressbar" aria-valuenow="{{ piggy.percentage }}" aria-valuemin="0" aria-valuemax="100">
                                {{ piggy.percentage }}%
                            </div>
                        </div>
                        {% endif %}
                    </td>


                    <td class="hidden-sm hidden-xs forty-px">

                        {% if piggy.left_to_save > 0 or null == piggy.left_to_save %}
                            <a href="{{ route('piggy-banks.add-money', piggy.id) }}" class="btn btn-default btn-xs addMoney" data-id="{{ piggy.id }}">
                                <span data-id="{{ piggy.id }}" class="fa fa-plus"></span></a>
                        {% endif %}
                    </td>
                    <td class="hidden-sm hidden-xs text-right">
                        {% if null != piggy.target_amount and 0 != piggy.target_amount %}
                            <span title="{{ 'target_amount'|_ }}">{{ formatAmountBySymbol(piggy.target_amount,piggy.currency_symbol,piggy.currency_decimal_places) }}</span>
                            {% if convertToPrimary and piggy.currency_id != primaryCurrency.id and null != piggy.pc_target_amount %}
                                (<span title="{{ 'target_amount'|_ }}">{{ formatAmountBySymbol(piggy.pc_target_amount,primaryCurrency.symbol, primaryCurrency.decimal_places) }}</span>)
                            {% endif %}
                        {% endif %}
                    </td>
                    <td class="hidden-sm hidden-xs text-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>
                            {% if convertToPrimary and piggy.currency_id != primaryCurrency.id and null != piggy.pc_left_to_save %}
                                (<span title="{{ 'left_to_save'|_ }}">{{ formatAmountBySymbol(piggy.pc_left_to_save, primaryCurrency.symbol,primaryCurrency.decimal_places) }}</span>)
                            {% endif %}
                        {% endif %}
                    </td>
                    <td class="hidden-sm hidden-xs text-right">
                        {% if piggy.target_date and piggy.save_per_month %}
                            {{ formatAmountBySymbol(piggy.save_per_month, piggy.currency_symbol, piggy.currency_decimal_places) }}
                            {% if convertToPrimary and piggy.currency_id != primaryCurrency.id and null != piggy.pc_save_per_month %}
                                ({{ formatAmountBySymbol(piggy.pc_save_per_month, primaryCurrency.symbol, primaryCurrency.decimal_places) }})
                            {% endif %}
                        {% 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 class="text-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="text-right hidden-sm hidden-xs">
                    {% for sum in objectGroup.sums %}
                        {{ formatAmountBySymbol(sum.target, sum.currency_symbol, sum.currency_decimal_places) }}<br />
                    {% endfor %}
                </td>
                <td class="text-right hidden-sm hidden-xs">
                    {% for sum in objectGroup.sums %}
                        {{ formatAmountBySymbol(sum.left_to_save, sum.currency_symbol, sum.currency_decimal_places) }}<br />
                    {% endfor %}
                </td>
                <td class="text-right hidden-sm hidden-xs">
                    {% 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>