{% if customizableTabs is not defined %}{% set customizableTabs = true %}{% endif %}
{% if not customizableTabs and pretendTabName is not defined %}
    {% set pretendTabName = "Content"|t('app') %}
{% endif %}

{% set groups = craft.app.fields.getAllGroups() %}

{% do view.registerTranslations('app', [
    "Rename",
    "Delete",
    "Make required",
    "Make not required",
    "Remove",
    "Give your tab a name.",
]) %}

{% macro tab(customizableTabs, tabName, tabFields) %}
    <div class="fld-tab">
        <div class="tabs">
            <div class="tab sel{% if customizableTabs %} draggable{% endif %}">
                <span>{{ tabName }}</span>
                {% if customizableTabs %}
                    <a class="settings icon" title="{{ 'Edit'|t('app') }}"></a>
                {% endif %}
            </div>
        </div>
        <div class="fld-tabcontent">
            {% for field in tabFields %}
                <div class="fld-field{% if field.required %} fld-required{% endif %}" data-id="{{ field.id }}">
                    <a class="settings icon" title="{{ 'Edit'|t('app') }}"></a>
                    <span title="{{ field.handle }}">{{ field.name|t('site') }}</span>
                    <input class="id-input" type="hidden" name="fieldLayout[{{ tabName|e('url') }}][]" value="{{ field.id }}">
                    {% if field.required %}<input class="required-input" type="hidden" name="requiredFields[]" value="{{ field.id }}">{% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
{% endmacro %}



<div id="fieldlayoutform" class="fieldlayoutform">
    {% if fieldLayout and fieldLayout.id %}
        <input type="hidden" name="fieldLayoutId" value="{{ fieldLayout.id }}">
    {% endif %}

    <h2 class="first">{{ "Design your field layout"|t('app') }}</h2>

    {% if instructions is defined %}
        <div class="instructions">{{ instructions|md }}</div>
    {% endif %}

    <div class="fld-tabs">
        {% if fieldLayout %}
            {% import _self as macros %}

            {% if customizableTabs %}
                {% for tab in fieldLayout.getTabs() %}
                    {{ macros.tab(customizableTabs, tab.name, tab.getFields()) }}
                {% endfor %}
            {% else %}
                {{ macros.tab(customizableTabs, pretendTabName, fieldLayout.getFields()) }}
            {% endif %}
        {% endif %}
    </div>

    {% if customizableTabs %}
        <div class="newtabbtn-container">
            <div class="btn add icon">{{ "New Tab"|t('app') }}</div>
            <h3>{{ "…Or use one of your field groups as a starting point:"|t('app') }}</h3>
        </div>
    {% endif %}

    <div class="unusedfields">
        {% for group in groups %}
            {% set totalUnselected = 0 %}
            {% for field in group.fields %}
                {% if not fieldLayout or field.id not in fieldLayout.getFieldIds() %}
                    {% set totalUnselected = totalUnselected + 1 %}
                {% endif %}
            {% endfor %}

            <div class="fld-tab unused{% if totalUnselected == 0 %} hidden{% endif %}">
                <div class="tabs">
                    <div class="tab sel{% if customizableTabs %} draggable{% endif %}"><span>{{ group.name }}</span></div>
                </div>
                <div class="fld-tabcontent">
                    {% for field in group.fields %}
                        {% set selected = fieldLayout and field.id in fieldLayout.getFieldIds() %}
                        <div class="fld-field unused{% if selected %} hidden{% endif %}" data-id="{{ field.id }}">
                            <span title="{{ field.handle }}">{{ field.name|t('site') }}</span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>

</div>

{% js %}
    var initFLD = function() {
        new Craft.FieldLayoutDesigner('#{{ "fieldlayoutform"|namespaceInputId }}', {
            customizableTabs: {{ customizableTabs ? 'true' : 'false' }},
            fieldInputName: '{{ "fieldLayout[__TAB_NAME__][]"|namespaceInputName|e("js") }}',
            requiredFieldInputName: '{{ "requiredFields[]"|namespaceInputName|e("js") }}'
        });
    };

    {% if tab is defined %}

        var $fldTab = $('#{{ ("tab-"~tab)|namespaceInputId }}');

        if ($fldTab.hasClass('sel'))
        {
            initFLD();
        }
        else
        {
            $fldTab.on('activate.fld', function() {
                initFLD();
                $fldTab.off('activate.fld');
            });
        }

    {% else %}

        initFLD();

    {% endif %}
{% endjs %}