<div class="{{ ('multi-column-editor ' ~ cssClass)| trim }}" data-env="{{ isBackend ? 'backend' : 'frontend' }}" data-field="{{ fieldName }}" data-table="{{ table }}" data-min-row-count="{{ minRowCount }}" data-max-row-count="{{ maxRowCount }}">
    {% if mceErrors|default and mceErrors is not empty %}
        <div class="form-feedback invalid-feedback" style="display: block;">
            {% for errorMsg in mceErrors %}
                <div class="feedback-message">{{ errorMsg }}</div>
            {% endfor %}
            <br>
        </div>
    {% endif %}

    {% if(rows|length < 1) %}
        {% if isBackend %}
            <input type="hidden" name="{{ fieldName }}" value="">
        {% endif %}
        {% if disableAdd|default(false) %}
            <button class="add first{% if isBackend %} tl_submit{% endif %}" disabled><span>{{ 'huh.multicolumneditor.add.default'|trans }}</span></button>
        {% else %}
            <a href="{{ ajaxAddUrl }}" class="add first{% if isBackend %} tl_submit{% endif %}" title="{{ 'huh.multicolumneditor.add.default'|trans }}">
                <span>{{ 'huh.multicolumneditor.add.default'|trans }}</span>
            </a>
        {% endif%}
    {% else %}
        <div class="rows{{ legend|default() ? ' grouped'}}{{ sortable|default() ? ' sortable' }}">
            {% for iterator, row in groupRows %}
                {% block row %}
                    <div class="{{ 'mce-row row_' ~ iterator | trim }}" data-index="{{ iterator }}">
                        {% block row_inner %}
                            {% for group in row %}
                                {% block row_group %}
                                    {% if legend and group.legend is defined %}
                                        <fieldset id="pal_{{ group.legend.id }}" class="{{ group.class|default('tl_tbox') }}{{ class|default ? ' ' ~ class }}">
                                            <legend onclick="AjaxRequest.toggleFieldset(this, '{{ group.legend.id }}', '{{ table }}')">{{ group.legend.lang }}</legend>
                                    {% endif %}

                                    {% block row_group_fields %}
                                        <div class="fields long">
                                            {% for field, widget in group.fields %}
                                                {% block row_group_field %}
                                                    {% if widget.type == "hidden" %}
                                                        {{ widget.parse()|raw }}
                                                    {% else %}
                                                        {% if widget.datepicker|default or widget.dcaPicker|default %}
                                                            {% set wizard = ' wizard' %}
                                                        {% endif %}
                                                        {% block row_group_field_default %}
                                                            <div class="{{ ('form-group ' ~ field  ~ wizard|default ~ (isBackend ? ' col' : '')) | trim }}" data-name="{{ widget.noIndex }}"{% if widget.groupStyle|default() %} style="{{ widget.groupStyle }}"{% endif %}>
                                                                {{ widget.parse()|raw }}
                                                            </div>
                                                        {% endblock %}
                                                    {% endif %}
                                                {% endblock %}
                                            {% endfor %}
                                        </div>
                                    {% endblock %}
                                    {% if legend and  group.legend is defined %}
                                        </fieldset>
                                    {% endif %}
                                {% endblock %}
                            {% endfor %}
                        {% endblock %}
                        <div class="actions">
                            {% if not disableAdd|default %}
                                <a href="{{ ajaxAddUrl }}" class="add" title="{{ 'huh.multicolumneditor.add.default'|trans }}">
                                    {% if isBackend %}
                                        <img src="system/themes/flexible/icons/copy.svg" width="16" height="16">
                                    {% else %}
                                        <span>{{ 'huh.multicolumneditor.add.default'|trans }}</span>
                                    {% endif %}
                                </a>
                            {% endif %}
                            {% if not disableRemove|default %}
                                <a href="{{ ajaxDeleteUrl }}" class="delete" title="{{ 'huh.multicolumneditor.delete.default'|trans }}">
                                    {% if isBackend %}
                                        <img src="system/themes/flexible/icons/delete.svg" width="16" height="16">
                                    {% else %}
                                        <span>{{ 'huh.multicolumneditor.delete.default'|trans }}</span>
                                    {% endif %}
                                </a>
                            {% endif %}

                            {% if sortable|default() %}
                                <a class="drag-handle" href="{{ ajaxSortUrl }}" title="{{ 'huh.multicolumneditor.sort.default'|trans }}">
                                    {% if isBackend %}
                                        <img src="system/themes/flexible/icons/drag.svg" width="16" height="16" alt="">
                                    {% else %}
                                        <span>{{ 'huh.multicolumneditor.sort.default'|trans }}</span>
                                    {% endif %}
                                </a>
                            {% endif %}
                        </div>
                    </div>
                {% endblock %}
            {% endfor %}
        </div>
    {% endif %}
</div>
