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

    {% extends template %}

{% block body %}

    <main class='main-content bgc-grey-100'>
        <div id='mainContent'>
            <div class="container-fluid">

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

                <div class="row">
                    <div class="col-md-12">

                        <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">
                                            {{ 'contact.settings.tab.changeAddContactType.label' | trans }}
                                    </a></li>
                                    <li><a class="nav-link" href="#tab-2" id="tab-nav-2">
                                            {{ 'contact.settings.tab.changeAddContactGroup.label' | trans }}
                                    </a></li>
                                </ul>

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

                                        {# Types #}
                                        <div class="row">
                                            <div class="bgc-white bdrs-3 p-20 mB-20 d-flex flex-column w-100">

                                                <div>
                                                    {{ contact_types_table | raw }}
                                                </div>

                                                <section class="row d-flex justify-content-center">
                                                    <div class="col-md-6 align-self-center add-record-form">
                                                        {{ form_start(type_form, {'attr':{'data-entity':"MyContactType"}}) }}
                                                        {{ form_end(type_form) }}
                                                    </div>
                                                </section>

                                            </div>
                                        </div>

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

                                        {# Groups #}
                                        <div class="row">
                                            <div class="bgc-white bdrs-3 p-20 mB-20 d-flex flex-column w-100">

                                                <div>
                                                    {{ contact_groups_table | raw }}
                                                </div>

                                                <section class="row d-flex justify-content-center">
                                                    <div class="col-md-6 align-self-center add-record-form">
                                                        {{ form_start(group_form, {'attr':{'data-entity':"MyContactGroup"}}) }}
                                                        {{ form_end(group_form) }}
                                                    </div>
                                                </section>

                                            </div>
                                        </div>

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

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

{% endblock body %}