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

    {% extends template %}

{% block body %}
    <!-- ### $App Screen Content ### -->
    <main class='main-content bgc-grey-100' id="MyPaymentsOwedModuleBody">
        <div id='mainContent'>
            <div class="container-fluid">

                {% include "modules/common/components/info-block.twig" with {
                    text_translation_string   : 'payments.moneyOwed.infoBlock.text.mainDescription',
                    header_translation_string : 'payments.moneyOwed.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.moneyOwed.tab.owedByOthers.label' | trans }}
                            </a></li>
                            <li><a class="nav-link" href="#tab-2" id="tab-nav-2">
                                    {{ 'payments.moneyOwed.tab.owedByMe.label' | trans }}
                            </a></li>
                        </ul>

                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane" role="tabpanel">
                                {# Owed by others #}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="bgc-white bdrs-3 p-20 mB-20">
                                            {% include 'modules/my-payments/components/owed.table.html.twig' with {
                                                'records'   : owed_by_others,
                                                'summarries': summary_owed_by_others
                                            } %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane" role="tabpanel">
                                {# Owed by me #}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="bgc-white bdrs-3 p-20 mB-20">
                                            {% include 'modules/my-payments/components/owed.table.html.twig' with {
                                                'records'   : owed_by_me,
                                                'summarries': summary_owed_by_me
                                            } %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {# Totall summary#}
                <div class="row">
                    <div class="col-md-12">
                        <div class="bgc-white bd bdrs-3 p-20 mB-20">
                            <h4 class="c-grey-900 mB-20 text-center">{{ 'other.overallSummary' | trans }}</h4>

                            <h5 class="text-center"><u>{{ 'payments.moneyOwed.headers.owedByMe' | trans }}</u></h5>
                            {% include 'modules/my-payments/components/owed-overal-summary.html.twig' with {"summarries": summary_overall_owed_by_me} %}

                            <h5 class="text-center"><u>{{ 'payments.moneyOwed.headers.owedByOthers' | trans }}</u></h5>
                            {% include 'modules/my-payments/components/owed-overal-summary.html.twig' with {"summarries": summary_overall_owed_by_others} %}
                        </div>
                    </div>
                </div>
                {# Form #}
                <div class="row">
                    <div class="col-md-12">
                        <div class="bgc-white bd bdrs-3 p-20 mB-20 d-flex flex-column">
                            <h4 class="c-grey-900 mB-20 align-self-center">{{ 'payments.moneyOwed.headers.addRecord' | trans }}</h4>
                            <div class="col-md-6 align-self-center add-record-form">
                                {{ form_start(form,{'attr':{' data-entity':"MyPaymentsOwed"}}) }}
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

{% endblock body %}