{% trans_default_domain 'admin' %}

<div class="modal-wrapper">
    <div id="block-modal-{{ col.id }}" class="modal fade add-block-modal edit-element-form layout-modal" tabindex="-1" role="dialog" aria-labelledby="block-modal-{{ col.id }}">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content border">
                <div class="modal-header">
                    <h5 class="modal-title text-center w-100"><i class="fal fa-th-large"></i></h5>
                    <button class="close" data-dismiss="modal" aria-label="{{ "Fermer"|trans }}">
                        <i class="fal fa-times" data-dismiss="modal"></i>
                    </button>
                </div>
                <div class="modal-body pr-5 pl-5">
                    <div class="mx-auto">

                        {% set displayNav = true %}
                        {% set groups = configuration|blockTypesActionsGroups %}

                        {% set modalTitle = 'Ajouter un bloc'|trans %}
                        {% if groups|length == 1 and groups['block'] is defined and groups['block']|length == 1 and groups['block']['form'] is defined %}
                            {% set displayNav = false %}
                            {% set modalTitle = 'Ajouter un champs'|trans %}
                        {% elseif groups|length == 1 and groups['block'] is defined and groups['block']|length == 1 and groups['block']['layout'] is defined %}
                            {% set displayNav = false %}
                        {% endif %}

                        <h2 class="main-title text-center font-weight-bold mb-5">{{ modalTitle }}</h2>

                        {% set titles = {
                            "block-layout":  "Blocs de mise en page"|trans,
                            "block-form":  "Champs de formulaire"|trans,
                            "block-main":  "Blocs les plus utilisés"|trans,
                            "block-secondary":  "Autres blocs"|trans,
                            "module-main":  "Modules les plus utilisés"|trans,
                            "module-secondary":  "Autres modules"|trans
                        } %}

                        {% if displayNav %}
                            <ul class="nav nav-tabs" id="block-types-actions-tab" role="tablist">
                                {% for type, group in groups %}
                                    {% set isActive = loop.first %}
                                    {% for category, blocksActions in group %}
                                        {% set isActive = isActive and loop.first %}
                                        <li class="nav-item col text-center">
                                            <a class="nav-link{% if isActive %} active{% endif %}"
                                               id="{{ type ~ '-' ~ category ~ '-' ~ col.id }}-tab"
                                               data-toggle="tab"
                                               href="#{{ type ~ '-' ~ category ~ '-' ~ col.id }}"
                                               role="tab" aria-controls="{{ type ~ '-' ~ category ~ '-' ~ col.id }}"
                                               aria-selected="{% if isActive %}true{% else %}false{% endif %}">
                                                {% if titles[type ~ '-' ~ category] is defined %}{{ titles[type ~ '-' ~ category] }}{% else %}<i class="fal fa-question"></i>{% endif %}
                                            </a>
                                        </li>
                                    {% endfor %}
                                {% endfor %}
                            </ul>
                        {% endif %}

                        <div class="tab-content text-white" id="block-types-actions-tab-content">
                            {% for type, group in groups %}
                                {% set isActive = loop.first %}
                                {% for category, blocksActions in group %}

                                    {% set smBlocks = blocksActions|length > 9 %}
                                    {% set xsBlocks = blocksActions|length > 12 %}
                                    {% set isActive = isActive and loop.first %}

                                    <div class="tab-pane fade{% if isActive %} show active{% endif %}" id="{{ type ~ '-' ~ category ~ '-' ~ col.id }}" role="tabpanel" aria-labelledby="{{ type ~ '-' ~ category ~ '-' ~ col.id }}-tab">
                                        <div class="row">
                                            {% for blockAction in blocksActions %}
                                                {% set path = "#" %}
                                                {% set title = "?" %}
                                                {% if type == 'block' %}
                                                    {% set title = blockAction.slug|trans([], 'entity_blocktype') %}
                                                    {% set title = title != blockAction.slug ? title : blockAction.adminName %}
                                                    {% set path = path('admin_block_add', {'website': websiteId(), 'interfaceName': interface.name, 'interfaceEntity': entity.id, 'col': col.id, 'blockType': blockAction.id}) %}
                                                {% elseif type == 'module' and blockTypeAction %}
                                                    {% set title = blockAction.slug|trans([], 'entity_action') %}
                                                    {% set title = title != blockAction.slug ? title : blockAction.adminName %}
                                                    {% set path = path('admin_block_add', {'website': websiteId(), 'interfaceName': interface.name, 'interfaceEntity': entity.id, 'col': col.id, 'blockType': blockTypeAction.id, 'action': blockAction.id}) %}
                                                {% endif %}
                                                <div class="col-md-{% if xsBlocks %}2{% elseif smBlocks %}3{% else %}3{% endif %} mb-3">
                                                    <a href="{{ path }}" data-toggle="preloader"
                                                       class="d-inline-block btn btn-info text-white text-center w-100 h-100 p-3 btn-add-block">
                                                        <span class="inner d-inline-block">
                                                            {% set icon = blockAction.iconClass ? blockAction.iconClass : "fal fa-question" %}
                                                            <i class="{{ icon }} w-100 d-inline-block mb-3"></i>
                                                            <span class="add-block-title d-inline-block">{{ title|replace({('(' ~ category ~ ')'): null}) }}</span>
                                                        </span>
                                                    </a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                {% endfor %}
                            {% endfor %}
                        </div>

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