{% import '_includes/forms' as forms %}

{% set pretendTabName = pretendTabName ?? 'Content'|t('app') %}
{% set fieldLayout = fieldLayout ?? create('craft\\models\\FieldLayout') %}

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

{% do view.registerTranslations('app', [
    'Apply',
    'Delete',
    'Give your tab a name.',
    'Move to the left',
    'Move to the right',
    'Remove',
    'Rename',
    'Required',
    '{pct} width',
]) %}

{% macro tab(tabName, selectedBlockTypes) %}
    <div class="fld-tab">
        <div class="tabs">
            <div class="tab sel draggable">
                <span>{{ tabName }}</span>
                <a class="settings icon" title="{{ 'Edit'|t('app') }}"></a>
            </div>
        </div>
        <div class="fld-tabcontent">
            {% for blockType in selectedBlockTypes %}
                <div class="fld-field fld-element" data-attribute="{{ blockType.getBlockType().handle }}" data-id="{{ blockType.matrixBlockTypeId }}" data-type="{{ className(blockType.getBlockType()) }}" data-config='{ "blockTypeId":{{ blockType.matrixBlockTypeId}} }' data-keywords="{{ blockType.getBlockType().name }} {{ blockType.getBlockType().handle }}">
                    <div class="field-name">
                        <h4 class="fld-element-label" title="{{ blockType.getBlockType().name|t('site') }}">{{ blockType.getBlockType().name|t('site') }}</h4>
                        <div class="smalltext light code" title="{{ blockType.getBlockType().handle }}">{{ blockType.getBlockType().handle }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endmacro %}

{% macro elementSelector(element, forLibrary, attr) %}
    {% if element is instance of('craft\\fieldlayoutelements\\BaseField') %}
        {% set attr = {
            class: [
                not forLibrary and element.required ? 'fld-required',
            ]|filter,
            data: {
                keywords: forLibrary ? element.keywords()|join(' ')|lower : false,
            },
        }|merge(attr ?? {}, recursive=true) %}
    {% endif %}
    {% set settingsHtml = element.settingsHtml() %}
    {{ element.selectorHtml()|attr({
        class: [
            'fld-element',
            forLibrary ? 'unused',
        ]|filter,
        data: {
            type: className(element),
            config: element.toArray(),
            'has-custom-width': element.hasCustomWidth(),
            'settings-html': settingsHtml ? settingsHtml|namespaceAttributes("element-#{random()}") ?: false,
        },
    }|merge(attr ?? {}, recursive=true)) }}
{% endmacro %}


<h2 class="first">{{ "Group your block types"|t('spoon') }}</h2>

<div id="spoon-configurator" class="layoutdesigner">
    <input type="hidden" name="fieldId" value="{{ matrixField.id }}">

    <div class="fld-workspace">
        <div class="fld-tabs">
            {% if spoonedBlockTypes and spoonedBlockTypes|length %}
                {% for groupName, selectedBlockTypes in spoonedBlockTypes %}
                    {{ _self.tab(groupName, selectedBlockTypes) }}
                {% endfor %}
            {% endif %}
        </div>

        <div class="fld-new-tab-btn btn add icon">{{ "New Tab"|t('app') }}</div>
    </div>

    <div class="fld-sidebar">
        <div class="fld-field-library">
            <div class="texticon search icon clearable">
                {{ forms.text({
                    class: 'fullwidth',
                    inputmode: 'search',
                    placeholder: "Search"|t('app')
                }) }}
                <div class="clear hidden" title="{{ 'Clear'|t('app') }}"></div>
            </div>

            {% set unGroupedSelectedBlockTypeIds = [] %}

            {% if spoonedBlockTypes and spoonedBlockTypes|length %}
                {% for groupName,selectedBlockTypes in spoonedBlockTypes %}
                    {% for selectedBlockType in selectedBlockTypes %}
                        {% set unGroupedSelectedBlockTypeIds = unGroupedSelectedBlockTypeIds|merge([selectedBlockType.matrixBlockTypeId]) %}
                    {% endfor %}
                {% endfor %}
            {% endif %}

            <div class="fld-field-group{#% if not showGroup %} hidden{% endif %#}" data-name="blocks">
                <h6>{{ "Blocks"|t('app') }}</h6>
                {% for blockType in blockTypes %}
                    {% set selected = blockType.id in unGroupedSelectedBlockTypeIds %}

                    <div class="fld-field fld-element unused{% if selected %} hidden{% endif %}" data-attribute="{{ blockType.handle }}" data-id="{{ blockType.id }}" data-type="{{ className(blockType) }}" data-config='{ "blockTypeId":{{ blockType.id }} }' data-keywords="{{ blockType.name }} {{ blockType.handle }}">
                        <div class="field-name">
                            <h4 class="fld-element-label" title="{{ blockType.name|t('site') }}">{{ blockType.name|t('site') }}</h4>
                            <div class="smalltext light code" title="{{ blockType.handle }}">{{ blockType.handle }}</div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>