{% block sw_cms_el_config_bc_discount_banner_config %}
<sw-container class="sw-cms-el-config-bc-hover-text-image">
	<sw-card :hero="false" :isloading="false" :large="false">
		<sw-media-field 
			:value="element.config.media.value" 
            @update:value="(v) => element.config.media.value = v"
			:label="$tc('sw-cms.config.bc-discount-banner.mediaLabel')"
            required
		/>
        <sw-text-field 
			v-model:value="element.config.discountText.value" 
			:label="$tc('sw-cms.config.bc-discount-banner.discountTextLabel')"
			:placeholder="$tc('sw-cms.config.bc-discount-banner.discountTextPlaceholder')"
		/>
		<sw-text-field 
			v-model:value="element.config.title.value" 
			:label="$tc('sw-cms.config.bc-discount-banner.titleLabel')"
			:placeholder="$tc('sw-cms.config.bc-discount-banner.titlePlaceholder')"
            required
		/>
		<sw-text-field 
			v-model:value="element.config.buttonText.value" 
			:label="$tc('sw-cms.config.bc-discount-banner.buttonLabel')"
			:placeholder="$tc('sw-cms.config.bc-discount-banner.buttonPlaceholder')"
            required
		/>
        <sw-url-field 
            v-model:value="element.config.link.value"
            :label="$tc('sw-cms.config.bc-discount-banner.linkLabel')"
            :placeholder="$tc('sw-cms.config.bc-discount-banner.UrlPlaceholder')"
            :error="null" 
            :omitUrlHash="false" 
            :omitUrlSearch="false"
            required>
        </sw-url-field>
	</sw-card>

	<sw-card :hero="false" :isloading="false" :large="false">
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-discount-banner.titleColor')"
            v-model:value="element.config.titleColor.value"
            value="#000"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-discount-banner.topTextColor')"
            v-model:value="element.config.topTextColor.value"
            value="#000"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-discount-banner.btnTxtColor')"
            v-model:value="element.config.btnTxtColor.value"
            value="#fff"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-discount-banner.btnBgColor')"
            v-model:value="element.config.btnBgColor.value"
            value="#000"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
	</sw-card>
</sw-container>
{% endblock %}
