{% 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.overview.infoBlock.text.mainDescription',
                    header_translation_string : 'contact.overview.infoBlock.header'
                } %}

                <div class="row">
                    <div class="col-md-12">
                        <div class="bdrs-3 p-20 mB-20 d-flex flex-wrap justify-content-around">
                            {% if isDemo() %}
                                {% include('modules/my-contacts/components/my-contact-card.html.twig') %}
                            {% endif %}
                            {% for contact in contacts %}
                                <div class="contact-card-wrapper">
                                    <div class="">
                                        <div class="layers">
                                            {% include('modules/my-contacts/components/contact-card.html.twig') %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}

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

            <div class="widgets-wrapper">
                {% include 'page-elements/components/widgets/plus-icon.twig' with {
                    'widgetName': "add-contact-card-widget",
                    'id'        : "add-contact-card-widget"
                } %}
            </div>

        </div>
    </main>

{% endblock body %}