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

<div style="padding-left:8px;">
    {{ piggyBanks.render|raw }}
</div>
<table class="table table-hover table-condensed" id="sortable-piggy">
    <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>
    <tbody>
    {% for piggy in piggyBanks %}
        <tr 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 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>
            </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_dp) }}</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_dp) }}</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_dp) }}</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_dp) }}
                {% endif %}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<div style="padding-left:8px;">
    {{ piggyBanks.render|raw }}
</div>