<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_cms_element_image_config %}
<div class="sw-cms-el-config-image">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_cms_element_image_config_media_upload %}
    <sw-cms-mapping-field
        v-model:config="element.config.media"
        :label="$tc('sw-cms.elements.image.label')"
        value-types="entity"
        entity="media"
    >
        <sw-media-upload-v2
            variant="regular"
            :upload-tag="uploadTag"
            :source="previewSource"
            :allow-multi-select="false"
            :default-folder="cmsPageState.pageEntityName"
            :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
            @media-upload-sidebar-open="onOpenMediaModal"
            @media-upload-remove-image="onImageRemove"
        />

        <template #preview="{ demoValue }">
            <div class="sw-cms-el-config-image__mapping-preview">
                <img
                    v-if="demoValue.url"
                    :src="demoValue.url"
                    alt=""
                >
                <sw-alert
                    v-else
                    class="sw-cms-el-config-image__preview-info"
                    variant="info"
                >
                    {{ $tc('sw-cms.detail.label.mappingEmptyPreview') }}
                </sw-alert>
            </div>
        </template>
    </sw-cms-mapping-field>

    <sw-upload-listener
        :upload-tag="uploadTag"
        auto-upload
        @media-upload-finish="onImageUpload"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_cms_element_image_config_display_mode %}
    <sw-select-field
        v-model:value="element.config.displayMode.value"
        class="sw-cms-el-config-image__display-mode"
        :label="$tc('sw-cms.elements.general.config.label.displayMode')"
        :help-text="$tc('sw-cms.elements.general.config.helpText.displayMode')"
        @update:value="onChangeDisplayMode"
    >
        <option value="standard">
            {{ $tc('sw-cms.elements.general.config.label.displayModeStandard') }}
        </option>
        <option value="stretch">
            {{ $tc('sw-cms.elements.general.config.label.displayModeStretch') }}
        </option>
        <option value="cover">
            {{ $tc('sw-cms.elements.general.config.label.displayModeCover') }}
        </option>
    </sw-select-field>
    {% endblock %}

    <template v-if="element.config.displayMode.value === 'cover'">
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_cms_element_image_config_min_height %}
        <sw-text-field
            v-model:value="element.config.minHeight.value"
            :label="$tc('sw-cms.elements.image.config.label.minHeight')"
            :placeholder="$tc('sw-cms.elements.image.config.placeholder.enterMinHeight')"
            @update:value="onChangeMinHeight"
        />
        {% endblock %}
    </template>

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_cms_element_image_config_vertical_align %}
    <sw-select-field
        v-model:value="element.config.verticalAlign.value"
        :label="$tc('sw-cms.elements.general.config.label.verticalAlign')"
        :placeholder="$tc('sw-cms.elements.general.config.label.verticalAlign')"
        :disabled="['cover'].includes(element.config.displayMode.value)"
    >
        <option value="flex-start">
            {{ $tc('sw-cms.elements.general.config.label.verticalAlignTop') }}
        </option>
        <option value="center">
            {{ $tc('sw-cms.elements.general.config.label.verticalAlignCenter') }}
        </option>
        <option value="flex-end">
            {{ $tc('sw-cms.elements.general.config.label.verticalAlignBottom') }}
        </option>
    </sw-select-field>
    {% endblock %}

    {% block sw_cms_element_image_config_horizontal_align %}
    <sw-select-field
        v-model:value="element.config.horizontalAlign.value"
        :label="$tc('sw-cms.elements.general.config.label.horizontalAlign')"
        :placeholder="$tc('sw-cms.elements.general.config.label.horizontalAlign')"
        :disabled="element.config.displayMode.value === 'cover'"
    >
        <option value="flex-start">
            {{ $tc('sw-cms.elements.general.config.label.horizontalAlignLeft') }}
        </option>
        <option value="center">
            {{ $tc('sw-cms.elements.general.config.label.horizontalAlignCenter') }}
        </option>
        <option value="flex-end">
            {{ $tc('sw-cms.elements.general.config.label.horizontalAlignRight') }}
        </option>
    </sw-select-field>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_cms_element_image_config_link %}
    <div class="sw-cms-el-config-image__link">
        <sw-dynamic-url-field
            v-model:value="element.config.url.value"
        />
        <sw-switch-field
            v-model:value="element.config.newTab.value"
            class="sw-cms-el-config-image__link-tab"
            :label="$tc('sw-cms.elements.image.config.label.linkNewTab')"
        />
    </div>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_cms_element_image_config_media_modal %}
    <sw-media-modal-v2
        v-if="mediaModalIsOpen"
        variant="full"
        :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
        :entity-context="cmsPageState.entityName"
        :allow-multi-select="false"
        :initial-folder-id="cmsPageState.defaultMediaFolderId"
        @media-upload-remove-image="onImageRemove"
        @media-modal-selection-change="onSelectionChanges"
        @modal-close="onCloseModal"
    />
    {% endblock %}
</div>
{% endblock %}
