{% trans_default_domain 'admin' %}

<div class="cols-sortable row">

    {% if zone.cols|length > 0 %}
        {% for col in zone.cols %}
            <div id="col-{{ col.id }}" class="col-sortable col-md-{{ col.size }} mb-3"
                 data-size-class="col-md-{{ col.size }}"
                 data-position="{{ col.position }}"
                 data-id="{{ col.id }}">
                <div class="resizable ui-widget-content h-100">
                    <div class="column h-100 ui-state-default"
                         id="col_{{ col.id }}"
                         data-id="{{ col.id }}"
                         data-position="{{ col.position }}">
                        <div class="portlet h-100">
                            <div class="header w-100 text-right">
                                <div class="col-actions text-right">

                                    {% if 'edit'|moduleActive(allModules) %}
                                        <span data-toggle="tooltip"
                                              title="{{ "Configuration"|trans }}"
                                              data-path="{{ path('admin_col_configuration', {'website': websiteId(), 'col': col.id}) }}"
                                              class="item edit-layout-element-btn d-inline-block">
                                            <button class="btn waves-effect waves-dark"><i class="far fa-cog"></i></button>
                                        </span>
                                    {% endif %}

                                    {% if 'col-edit'|moduleActive(allModules) %}
                                        {% set mediaRelation = col.mediaRelations is defined ? col.mediaRelations|i18n(website().configuration.locale) : null %}
                                        <span data-toggle="preloader" class="position-relative col-img-bulle-wrap d-inline-block">
                                            {% if mediaRelation and mediaRelation.media and mediaRelation.media.filename %}
                                                <span style="background: url({{ mediaRelation|thumb(null, {"path": true}) }})" class="image-info-bulle"></span>
                                            {% endif %}
                                            <a href="{{ path('admin_col_edit', {'website': websiteId(), 'zone': zone.id, 'col': col.id, 'interfaceName': interface.name, 'interfaceEntity': entity.id}) }}" class="btn waves-effect waves-dark"
                                               data-toggle="tooltip" title="{{ "Image de fond"|trans }}">
                                                <i class="far fa-image float-left"></i>
                                            </a>
                                        </span>
                                    {% endif %}

                                    {% if 'edit'|moduleActive(allModules) %}
                                        <span class="item background-col-item background-item d-inline-block">
                                            {% set color = 'background'|color(website(), col.backgroundColor) %}
                                            {% set hexa = color ? color.color : null %}
                                            <span class="color-info-bulle"{% if hexa %} style="background-color: {{ hexa }}" {% endif %}></span>
                                            <span class="btn waves-effect edit-layout-element-btn waves-dark btn-palette cursor"
                                               data-path="{{ path('admin_col_background', {'website': websiteId(), 'col': col.id}) }}"
                                               data-toggle="tooltip"
                                               title="{{ "Couleur de fond"|trans }}">
                                                <i class="far fa-palette"></i>
                                            </span>
                                        </span>
                                    {% endif %}

                                    {% if 'delete'|moduleActive(allModules) %}
                                        <a href="{{ path('admin_col_delete', {'website': websiteId(), 'zone': zone.id, 'col': col.id}) }}"
                                           data-toggle="tooltip" title="{{ "Supprimer"|trans }}"
                                           data-target="#col-{{ col.id }}"
                                           class="btn waves-effect waves-dark swal-delete-link d-inline-block">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    {% endif %}

                                    {% if 'edit'|moduleActive(allModules) %}
                                        <span class="item handle-col grabbable btn waves-effect waves-dark d-inline-block"
                                              data-toggle="tooltip" title="{{ "Déplacer"|trans }}">
                                            <i class="far fa-arrows-alt"></i>
                                        </span>
                                    {% endif %}

                                </div>
                            </div>
                            <div class="portlet-content pr-3 pl-3 w-100">
                                {% include 'admin/core/layout/blocks.html.twig' %}
                            </div>
                            {% if 'edit'|moduleActive(allModules) and layoutConfiguration is defined and layoutConfiguration %}
                                <div class="add-block-wrap w-100 pr-3 pl-3 pt-2 text-center">
                                    <span class="edit-layout-element-btn"
                                          data-path="{{ path('admin_block_modal', {
                                              'website': websiteId(),
                                              'col': col.id,
                                              'configuration': layoutConfiguration.id,
                                              'entityId': entity.id,
                                          }) }}">
                                        <img data-src="{{ asset('build/admin/images/theme/btn-add-info-rounded.svg', 'admin') }}"
                                             src="{{ asset('build/vendor/images/lazy-point.svg', 'vendor') }}"
                                             class="img-fluid cursor add-block-img lazyload"
                                             data-toggle="tooltip"
                                             width="40" height="40"
                                             title="{{ "Ajouter un bloc"|trans }}" />
                                    </span>
                                    <span class="btn-resize btn-white btn-xs btn-circle"><i class="fad fa-arrow-from-right"></i></span>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% endif %}

    {% if 'edit'|moduleActive(allModules) %}
        <div class="col-12">
            <button data-path="{{ path('admin_col_new', {'website': websiteId(), 'zone': zone.id}) }}"
                    class="btn new-col-btn edit-layout-element-btn w-100 mb-3">
                <img data-src="{{ asset('build/admin/images/theme/plus-rounded.svg', 'admin') }}"
                     src="{{ asset('build/vendor/images/lazy-point.svg', 'vendor') }}"
                     class="img-fluid rounded-add-img lazyload"
                     width="20" height="20" alt="{{ 'Ajouter'|trans|striptags }}" /><br>
                {{ 'Ajouter une colonne'|trans }}
            </button>
        </div>
    {% endif %}

</div>