<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_order_saveable_field %}
<sw-container
    v-if="isEditing"
    columns="1fr 20px 25px"
    gap="0px 10px"
    class="sw-order-saveable-field"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_saveable_field_input %}
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block  sw_order_saveable_field_input_field%}
    <component
        :is="component"
        ref="edit-field"
        :value="value"
        :placeholder="placeholder"
        v-bind="$attrs"
        v-on="listeners"
    />
    {% endblock %}
    {% endblock %}
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_saveable_field_actions %}
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_saveable_field_cancel_button %}
    <sw-button
        size="x-small"
        square
        @click="onCancelButtonClicked"
    >
        <sw-icon
            name="regular-times-xs"
            small
        />
    </sw-button>
    {%  endblock %}
    {%  block sw_order_saveable_field_save_button %}
    <sw-button
        size="x-small"
        variant="primary"
        square
        @click="onSaveButtonClicked"
    >
        <sw-icon
            name="regular-checkmark-xxs"
            small
        />
    </sw-button>
    {%  endblock %}
    {% endblock %}
</sw-container>
<div
    v-else
    role="button"
    tabindex="0"
    @click="onClick"
    @keydown.enter="onClick"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_saveable_field_content %}
    <slot></slot>
    {% endblock %}
</div>
{% endblock %}
