{% set summary_payment = 0 %}
{% set colors = ['deep-purple-text', 'pink-text', 'deep-orange-text','text-info','green-text','indigo-text'] %}
{% set color_num = 0 %}

{# Accordin inner div #}
<div>

    <table id="MyPaymentsMonthly" class="table table-hover" cellspacing="0" width="100%" data-table="true">
        <thead>
        <tr>
            <td class="d-none">Id</td>
            <td>{{ 'payments.monthlyPayments.table.date'        | trans }}</td>
            <td>{{ 'payments.monthlyPayments.table.money'       | trans }}</td>
            <td>{{ 'payments.monthlyPayments.table.description' | trans }}</td>
            <td>{{ 'payments.monthlyPayments.table.type'        | trans }}</td>
            <td>{{ 'datatables.table.actions'                   | trans }}</td>
        </tr>
        </thead>
        <tbody>
        {% for payment in all_payments %}
            {% if date_group.date|date("Y-m") in payment.date|date("Y-m-d") %}
                <tr class="trash-parent monthly-single-data editable-parent save-parent" data-type="MyPaymentsMonthly">
                    {% set timestamp = date( payment.date | date('m/d/yyyy') ).timestamp %}
                    <td class="id d-none"> {{ payment.id }} </td>
                    <td class="date" data-order="{{ timestamp }}">
                        <span class="date">
                            {% include 'page-elements/components/forms/input-datepicker.twig' with {
                                "value"     : payment.date | date('Y-m-d'),
                                "disabled"  : true
                            } %}
                        </span>
                    </td>
                    <td class="money text-success" >                      {{ payment.money }}        </td>
                    <td class="description" data-order="{{ timestamp }}"> {{ payment.description }}  </td>

                    <td class="parent-td">
                        <select class="form-control disabled type option-picker">
                            <option value=""></option>
                            {% for payment_type in payments_types  %}
                                <option value="{{ payment_type.id }}"
                                        {% if payment_type.id  == payment.type.id %}selected{% endif %}>
                                    {{ payment_type.value | capitalize }}
                                </option>
                            {% endfor %}
                        </select>
                    </td>

                    {% include 'modules/common/components/table-cells/actions.html.twig' with {
                        "trash": true,
                        "edit": true,
                        "save": true
                    } %}

                </tr>
                {% set summary_payment=summary_payment+attribute(payment,'money') %}
            {% endif %}
        {% endfor %}

        </tbody>
    </table>
    <section class="monthly-summary d-flex align-content-end justify-content-around">
        <div>
            <ul class="d-flex flex-column list-n list-style-type-none">

                {% for payment_by_type_and_date in payments_by_type_and_date %}

                    {% if date_group.date|date("Y-m") in payment_by_type_and_date.date %}
                        <li class="align-self-end">
                            <b>{{ payment_by_type_and_date.type | capitalize }}</b>:
                            <span class="{{ colors[color_num] }}">{{ payment_by_type_and_date.money }}</span>
                        </li>

                        {% if color_num == (colors | length -1) %}
                            {% set color_num = 0 %}
                         {% else %}
                             {% set color_num = color_num + 1 %}
                        {% endif %}
                    {% endif %}

                {% endfor %}
            </ul>
            <hr/>
            <b>
                <span>{{ 'payments.monthlyPayments.summary' | trans }}</span>
            </b>
            <span class="text-primary amount">{{ summary_payment }}</span>
        </div>
    </section>

</div>