<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_media_add_thumbnail_form %}
<div class="sw-media-add-thumbnail-form">

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_media_add_thumbnail_form_form_container %}
    <div class="sw-media-add-thumbnail-form__form-container">
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_media_add_thumbnail_form_width %}
        <sw-number-field
            v-model:value="width"
            class="sw-media-add-thumbnail-form__input-width"
            :label="$tc('global.sw-media-add-thumbnail-form.labelMaximumSize')"
            :min="1"
            :step="1"
            :validation="width > 0"
            @input-change="widthInputChanged"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_media_add_thumbnail_form_lock_button %}
        <button
            class="sw-media-add-thumbnail-form__lock"
            :class="lockedButtonClass"
            @click="onLockSwitch"
        >
            <sw-icon
                :name="isLocked ? 'regular-lock' : 'regular-lock-open'"
                size="16px"
            />
        </button>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_media_add_thumbnail_form_height %}
        <sw-number-field
            v-model:value="height"
            class="sw-media-add-thumbnail-form__input-height"
            :min="1"
            :validation="height > 0"
            :step="1"
            :disabled="isLocked"
            @input-change="heightInputChanged"
        />
        {% endblock %}
    </div>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_media_add_thumbnail_add_button %}
    <sw-button
        class="sw-media-folder-settings__add-thumbnail-size-action"
        variant="ghost"
        :disabled="disabled || width === null || height === null || width === 0 || height === 0"
        @click="onAdd"
    >
        {{ $tc('global.default.add') }}
    </sw-button>
    {% endblock %}
</div>
{% endblock %}
