<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_custom_field_detail %}
<sw-modal
    class="sw-custom-field-detail"
    :title="modalTitle"
    @modal-close="onCancel"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_custom_field_detail_modal %}
    <sw-container
        columns="1fr 1fr"
        gap="20px"
    >
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_detail_modal_type %}
        <sw-select-field
            v-model:value="currentCustomField.config.customFieldType"
            :label="$tc('sw-settings-custom-field.customField.detail.labelCustomFieldType')"
            :placeholder="$tc('sw-settings-custom-field.customField.detail.placeholderCustomFieldType')"
            class="sw-custom-field-detail__modal-type"
            type="select"
            :help-text="$tc('sw-settings-custom-field.general.tooltipType')"
            :disabled="!currentCustomField._isNew || !acl.can('custom_field.editor') || undefined"
        >
            <option
                v-for="(option, key) in fieldTypes"
                :key="key"
                :value="key"
            >
                {{ $tc(`sw-settings-custom-field.types.${key}`) }}
            </option>
        </sw-select-field>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_detail_modal_technical_name %}
        <sw-text-field
            v-model:value="currentCustomField.name"
            class="sw-custom-field-detail__technical-name"
            :label="$tc('sw-settings-custom-field.customField.detail.labelTechnicalName')"
            :help-text="$tc('sw-settings-custom-field.general.tooltipTechnicalName')"
            :disabled="!currentCustomField._isNew || !acl.can('custom_field.editor') || undefined"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_detail_modal_position %}
        <sw-number-field
            v-model:value="currentCustomField.config.customFieldPosition"
            class="sw-custom-field-detail__modal-position"
            :help-text="$tc('sw-settings-custom-field.customField.detail.tooltipCustomFieldPosition')"
            number-type="int"
            :label="$tc('sw-settings-custom-field.customField.detail.labelCustomFieldPosition')"
            :disabled="!acl.can('custom_field.editor') || undefined"
        />
        {% endblock %}

        {# @deprecated tag:v6.7.0 - Block will be removed without replacement #}
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_detail_modal_required %}{% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_detail_modal_allow_customer_write %}
        <sw-switch-field
            v-model:value="currentCustomField.allowCustomerWrite"
            bordered
            :help-text="$tc('sw-settings-custom-field.customField.detail.tooltipAllowCustomerWrite')"
            class="sw-custom-field-detail__allow-customer-write"
            :label="$tc('sw-settings-custom-field.customField.detail.labelAllowCustomerWrite')"
            :disabled="!acl.can('custom_field.editor') || undefined"
        />
        {% endblock %}

        <sw-switch-field
            v-if="isProductCustomField"
            v-model:value="currentCustomField.allowCartExpose"
            v-tooltip="getCartExposeTooltipConfig()"
            bordered
            :help-text="$tc('sw-settings-custom-field.customField.detail.tooltipAllowCartExpose')"
            class="sw-custom-field-detail__allow-cart-expose"
            :label="$tc('sw-settings-custom-field.customField.detail.labelAllowCartExpose')"
            :disabled="!acl.can('custom_field.editor') || disableCartExpose || undefined"
        />

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_detail_modal_snippet_info  %}
        <sw-alert class="sw-custom-field-detail__info">
            {{ $tc('sw-settings-custom-field.customField.detail.infoText', 0, { name: currentCustomField.name }) }}
        </sw-alert>
        {% endblock %}
    </sw-container>

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_custom_field_detail_modal_render_component %}
    <div v-if="currentCustomField.config.customFieldType?.length > 0">
        <component
            :is="renderComponentName"
            :current-custom-field="currentCustomField"
            :set="set"
        />
    </div>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_custom_field_detail_modal_footer %}
    <template #modal-footer>
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_detail_modal_footer_cancel %}
        <sw-button
            size="small"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </sw-button>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_custom_field_detail_modal_footer_save %}
        <sw-button
            class="sw-custom-field-detail__footer-save"
            variant="primary"
            size="small"
            :disabled="!canSave || !acl.can('custom_field.editor') || undefined"
            @click="onSave"
        >
            {{ labelSaveButton }}
        </sw-button>
        {% endblock %}
    </template>
    {% endblock %}
    {% endblock %}
</sw-modal>
{% endblock %}
