{% trans_default_domain 'admin' %}

{% if layout %}

    {% include 'admin/include/stripe-preloader.html.twig' with {'preloaderId': 'layout-preloader'} only %}

    <ul id="zones-sortable" class="reset">
        {% for zone in layout.zones %}
            <li class="zone{% if zone.hide %} hide-zone{% endif %}" id="zone-{{ zone.id }}" data-id="{{ zone.id }}" data-position="{{ zone.position }}">
                <div class="zone-sidebar">

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

                    {% if zone.hide %}
                        <span class="item btn waves-effect waves-dark text-danger"
                          data-toggle="tooltip"
                          data-placement="right" title="{{ "Zone désactivée"|trans }}">
                            <i class="fas fa-ban"></i>
                        </span>
                    {% endif %}

                    {% if 'edit'|moduleActive(allModules) and interface.resize is defined and interface.resize %}
                        {% set sizeAction = zone.fullSize ? "Rétrécir"|trans : "Étendre"|trans %}
                        {% set size = zone.fullSize ? 'true' : 'false' %}
                        <span data-toggle="tooltip" title="{{ sizeAction }}" data-placement="right" class="item">
                            <a class="btn waves-effect waves-dark zone-resize cursor"
                               data-zone="{{ zone.id }}"
                               data-size="{{ size }}"
                               data-compress="{{ "Étendre"|trans }}"
                               data-expand="{{ "Rétrécir"|trans }}">
                                <i class="far {% if not zone.fullSize %}fa-expand-arrows-alt{% else %}fa-compress-arrows-alt{% endif %}"></i>
                            </a>
                        </span>
                    {% endif %}

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

                    {% if 'edit'|moduleActive(allModules) %}
                        <span class="item background-item">
                            {% set color = 'background'|color(website, zone.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_zone_background', {'website': websiteId(), 'zone': zone.id}) }}"
                               data-toggle="tooltip"
                               data-placement="right"
                               title="{{ "Couleur de fond"|trans }}">
                                <i class="far fa-palette"></i>
                            </span>
                        </span>
                    {% endif %}

                    {% if 'edit'|moduleActive(allModules) %}
                        <span class="item">
                            <span class="btn waves-effect duplicate-btn waves-dark cursor"
                                  data-path="{{ path('admin_zone_duplicate', {'website': websiteId(), 'zone': zone.id, 'refresh': true, 'template': 'layout'}) }}"
                                  data-preloader="#layout-preloader"
                                  data-toggle="tooltip"
                                  data-placement="right"
                                  title="{{ "Dupliquer"|trans }}">
                                <i class="far fa-copy"></i>
                            </span>
                        </span>
                    {% endif %}

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

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

                </div>

                {% include 'admin/core/layout/cols.html.twig' %}

            </li>
        {% endfor %}
    </ul>

    {% if 'edit'|moduleActive(allModules) %}

        <button id="add-zone-btn"
                class="btn edit-layout-element-btn w-100"
                data-path="{{ path('admin_zone_new', {'website': websiteId(), 'layout': layout.id}) }}">
            <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 ligne'|trans }}
        </button>

    {% endif %}

{% endif %}