<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_snippet_field_edit_modal %}
<sw-modal
    class="sw-snippet-field-edit-modal"
    :title="modalTitle"
    :is-loading="isLoading"
    @modal-close="closeModal"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_snippet_field_edit_modal_body %}
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_snippet_field_edit_modal_name_field %}
    <sw-text-field
        :value="translationKey"
        disabled
        :label="$tc('global.sw-snippet-field-edit-modal.labelName')"
    />
    {% endblock %}
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_snippet_field_edit_modal_snippet_fields %}
    <template v-if="textField">
        <sw-text-field
            v-for="(snippet, index) in editableSnippets"
            :key="snippet.setId"
            v-model:value="snippet.value"
            v-tooltip.bottom="getNoPermissionsTooltip('snippet.editor')"
            class="sw-snippet-field-edit-modal__translation-field"
            :class="`sw-snippet-field-edit-modal__translation-field--${index}`"
            :disabled="!acl.can('snippet.editor')"
            :label="$tc('sw-settings-snippet.detail.labelContent', 0, { name: snippetSets.get(snippet.setId).name })"
            :placeholder="snippet.origin || $tc('sw-settings-snippet.general.placeholderValue')"
        />
    </template>

    <template v-else-if="textArea">
        <sw-textarea-field
            v-for="(snippet, index) in editableSnippets"
            :key="snippet.setId"
            v-model:value="snippet.value"
            v-tooltip.bottom="getNoPermissionsTooltip('snippet.editor')"
            class="sw-snippet-field-edit-modal__translation-field"
            :class="`sw-snippet-field-edit-modal__translation-field--${index}`"
            :disabled="!acl.can('snippet.editor')"
            :label="$tc('sw-settings-snippet.detail.labelContent', 0, { name: snippetSets.get(snippet.setId).name })"
            :placeholder="snippet.origin || $tc('sw-settings-snippet.general.placeholderValue')"
        />
    </template>
    {% endblock %}
    {% endblock %}

    <template #modal-footer>
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_snippet_field_edit_modal_footer %}
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_snippet_field_edit_modal_close_button %}
        <sw-button
            size="small"
            @click="closeModal"
        >
            {{ $tc('global.sw-modal.labelClose') }}
        </sw-button>
        {% endblock %}
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_snippet_field_edit_modal_footer_button %}
        <sw-button
            v-tooltip="getNoPermissionsTooltip('snippet.editor')"
            class="sw-snippet-field-edit-modal__save-action"
            size="small"
            variant="primary"
            :disabled="!acl.can('snippet.editor')"
            @click="onSave"
        >
            {{ $tc('global.default.save') }}
        </sw-button>
        {% endblock %}
        {% endblock %}
    </template>
</sw-modal>
{% endblock %}
