{% if ajax_render == false %}
    {% set template= "base.html.twig" %}
{% else %}
    {% set template= "blank.html.twig" %}
{% endif %}

    {% extends template %}

{% block body %}

    {% set percentage_medium = 1.15 %}
    {% set percentage_high   = 1.30 %}
    <!-- ### $App Screen Content ### -->
    <main class='main-content bgc-grey-100' id="MyPaymentsBillsModuleBody">
        <div id='mainContent'>
            <div class="container-fluid">

                {% include "modules/common/components/info-block.twig" with {
                    text_translation_string   : 'payments.bills.infoBlock.text.mainDescription',
                    header_translation_string : 'payments.bills.infoBlock.header'
                } %}

                <div class="bgc-white bd bdrs-3 p-10 mB-20">

                     <div data-smart-tab="true">
                        <ul class="nav">
                           <li><a class="nav-link" href="#tab-1" id="tab-nav-1">
                               {{ 'payments.bills.tabs.billsManagement.label' | trans }}
                           </a></li>
                           <li><a class="nav-link" href="#tab-2" id="tab-nav-2">
                               {{ 'payments.bills.tabs.billsItemsManagement.label' | trans }}
                           </a></li>
                        </ul>

                        <div class="tab-content">
                           <div id="tab-1" class="tab-pane" role="tabpanel">

                               {# Bills items #}
                               <div class="row">
                                   <div class="col-md-12">
                                       <div class="bgc-white bdrs-3 p-20 mB-20">

                                           <div id="accordion">
                                               {% for bill in bills %}
                                                   <div class="accordin-section">
                                                       <h3 class="bill-accordion-header
                                                           {% if bills_amounts_summaries[bill.id] is defined  %}
                                                                {% if bills_amounts_summaries[bill.id] <= bill.plannedAmount %}
                                                                    bg-success
                                                                {% elseif bills_amounts_summaries[bill.id] <= ( bill.plannedAmount * percentage_medium ) %}
                                                                    bg-warning
                                                                {% else %}
                                                                    bg-danger
                                                                 {% endif %}
                                                            {% endif %}
                                                        ">
                                                            {{ bill.name }} -
                                                            <span class="bill-summary">
                                                                {% if bills_amounts_summaries[bill.id] is defined  %}
                                                                    {{ bills_amounts_summaries[bill.id] }}
                                                                {% else %}
                                                                    0
                                                                {% endif %}
                                                                /
                                                                {{ bill.plannedAmount }}
                                                            </span>
                                                           ({{ bill.startDate|date("Y-m-d") }} - {{ bill.endDate|date("Y-m-d") }})

                                                           {# Actions #}
                                                           <span class="action pointer float-right bill-edit"
                                                                 data-is-accordion-action
                                                                 data-entity-id="{{ bill.id }}"
                                                                 data-entity-detials-action="true"
                                                                 data-dialog-call-request-url="{{ path('dialog_body_update_bill') }}"
                                                                 data-dialog-call-request-method="POST"
                                                                 data-dialog-call-request-post-parameters='{
                                                                    "entityId": "{{ bill.id }}"
                                                                }'
                                                                data-call-dialog-on-click="true"
                                                                data-dialog-name="updateBill"
                                                                data-toggle-popover="true"                          {# popover attr #}
                                                                data-content="{{ 'actions.popover.edit' | trans }}" {# popover attr #}
                                                                data-placement="right"                              {# popover attr #}
                                                            >
                                                              <i class="far fa-edit"></i>
                                                            </span>

                                                       </h3>
                                                       <section>
                                                           {% include 'modules/my-payments/components/bills-items-table.html.twig' %}
                                                       </section>
                                                   </div>
                                               {% endfor %}
                                           </div>

                                       </div>
                                   </div>
                               </div>

                           </div>
                           <div id="tab-2" class="tab-pane" role="tabpanel">

                               {# Bills #}
                               <div class="row">
                                   <div class="col-md-12">
                                       <div class="bgc-white bdrs-3 p-20 mB-20">
                                           {% include 'modules/my-payments/components/bills-table.html.twig' %}
                                       </div>
                                   </div>
                               </div>

                           </div>
                        </div>
                     </div>

                </div>

                {# Forms #}
                 <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            {# bills form #}
                            {% include 'modules/my-payments/components/bills-form.html.twig' %}

                            {# bills items form #}
                            {% include 'modules/my-payments/components/bills-items-form.html.twig' %}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </main>

{% endblock body %}