<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_custom_field_set_renderer %}
<div class="sw-custom-field-set-renderer">
    <template v-if="visibleCustomFieldSets.length > 0">
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_set_renderer_card %}
        <sw-tabs
            v-if="variant === 'tabs'"
            ref="tabComponent"
            class="sw-custom-field-set-renderer__card-tabs"
            variant="minimal"
            :default-item="visibleCustomFieldSets[0].id"
            :position-identifier="'sw-custom-field-set-renderer'"
            @new-item-active="(tab) => loadCustomFieldSet(tab.name)"
        >
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_custom_field_set_renderer_card_tabs %}
            <template #default="{ active }">
                <template
                    v-for="set in visibleCustomFieldSets"
                    :key="`sw-tab--${set.id}`"
                >
                    <sw-tabs-item
                        variant="minimal"
                        :name="set.id"
                        :class="'sw-tab--name-' + set.name"
                        :active-tab="active"
                    >
                        {{ getTabLabel(set) }}
                    </sw-tabs-item>
                </template>
            </template>
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_custom_field_set_renderer_card_tabs_content %}
            <template
                #content="{ active }"
            >
                <template
                    v-for="set in visibleCustomFieldSets"
                    :key="set.id"
                >
                    <div
                        v-show="active === set.id"
                        :class="'sw-custom-field-set-renderer-tab-content__' + set.name"
                    >
                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_custom_field_set_renderer_card_form_renderer %}
                        <sw-skeleton
                            v-if="!set.customFields"
                            style="width:100%"
                        />
                        <template v-else>
                            <template
                                v-for="customField in set.customFields"
                                :key="customField.name"
                            >
                                <sw-inherit-wrapper
                                    v-if="entity && customField.config"
                                    v-model:value="customFields[customField.name]"
                                    v-bind="getInheritWrapperBind(customField)"
                                    :class="'sw-form-field-renderer-field__' + customField.name"
                                    :has-parent="hasParent"
                                    :required="customField.config.validation === 'required'"
                                    :inherited-value="getInheritedCustomField(customField.name)"
                                >
                                    <template #content="props">
                                        <sw-form-field-renderer
                                            v-bind="getBind(customField, props)"
                                            :key="props.isInherited"
                                            :class="'sw-form-field-renderer-input-field__' + customField.name"
                                            :disabled="disabled || props.isInherited"
                                            :value="props.currentValue"
                                            @update:value="props.updateCurrentValue"
                                        />
                                    </template>
                                </sw-inherit-wrapper>
                            </template>
                        </template>
                        {% endblock %}
                    </div>
                </template>
            </template>
            {% endblock %}
        </sw-tabs>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_set_renderer_media %}
        <template v-else-if="variant === 'media-collapse'">
            <template
                v-for="set in visibleCustomFieldSets"
                :key="`sw-media-collapse--${set.id}`"
            >
                <!-- eslint-disable vue/no-use-v-if-with-v-for -->
                <sw-media-collapse
                    v-if="set.customFields && set.customFields.length > 0"
                    :expand-on-loading="false"
                    :title="getInlineSnippet(set.config.label) || set.name"
                >
                    <template #content>
                        <template
                            v-for="customField in set.customFields"
                            :key="customField.name"
                        >
                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_custom_field_set_renderer_media_form_renderer %}
                            <sw-form-field-renderer
                                v-bind="customField"
                                v-model:value="customFields[customField.name]"
                                :disabled="disabled"
                                :required="customField.config.validation === 'required'"
                            />
                        {% endblock %}
                        </template>
                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_custom_field_set_renderer_media_button_save %}
                        <sw-button-process
                            :is-loading="isLoading"
                            :process-success="isSaveSuccessful"
                            :disabled="isLoading || disabled"
                            variant="primary"
                            size="small"
                            @update:process-success="$emit('process-finish')"
                            @click="$emit('save')"
                        >
                            {{ $tc('global.default.save') }}
                        </sw-button-process>
                    {% endblock %}
                    </template>
                </sw-media-collapse>
            </template>
        </template>
        {% endblock %}
    </template>
</div>
{% endblock %}
