{% block sw_cms_el_config_bc_showcase_banner %}
<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.backgroundMedia.value" 
			@update:value="(v) => element.config.backgroundMedia.value = v"
			:label="$tc('sw-cms.config.bc-showcase-banner.backgroundMediaLabel')"
		/>
		<sw-colorpicker
			:label="$tc('sw-cms.config.bc-showcase-banner.backgroundColorLabel')"
			v-model:value="element.config.backgroundColor.value"
			value="#c7c7c7c7"
			colorOutput="auto"
			:alpha="true"
			:disabled="false"
			:colorLabels="true"
			zIndex="1001"
		>
		</sw-colorpicker>
		<br>
		<sw-media-field 
			:value="element.config.media.value"
			@update:value="(v) => element.config.media.value = v"                     
			:label="$tc('sw-cms.config.bc-showcase-banner.mediaLabel')"
		/>
		<sw-text-field 
			v-model:value="element.config.title.value" 
			:label="$tc('sw-cms.config.bc-showcase-banner.titleLabel')"
			:placeholder="$tc('sw-cms.config.bc-showcase-banner.titlePlaceholder')"
            required
		/>
		<sw-textarea-field 
			v-model="element.config.description.value" 
			type="textarea" 
			:label="$tc('sw-cms.config.bc-showcase-banner.descriptionLabel')"
			:placeholder="$tc('sw-cms.config.bc-showcase-banner.descriptionPlaceholder')">
		</sw-textarea-field>
		<sw-text-field 
			v-model:value="element.config.buttonText.value" 
			:label="$tc('sw-cms.config.bc-showcase-banner.buttonTextLabel')"
			:placeholder="$tc('sw-cms.config.bc-showcase-banner.buttonTextPlaceholder')"
            required
		/>
		<sw-url-field 
			v-model:value="element.config.buttonLink.value" 
			:label="$tc('sw-cms.config.bc-showcase-banner.buttonLinkLabel')"
			:placeholder="$tc('sw-cms.config.bc-showcase-banner.buttonLinkPlaceholder')"
			:error="null" 
			:omiturlhash="false" 
			:omiturlsearch="false"
            required
		/>
	</sw-card>
	<sw-card :hero="false" :isloading="false" :large="false">
		<sw-colorpicker
			:label="$tc('sw-cms.config.bc-showcase-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-showcase-banner.descriptionColor')"
			v-model:value="element.config.descriptionColor.value"
			value="#000"
			colorOutput="auto"
			:alpha="true"
			:disabled="false"
			:colorLabels="true"
			zIndex="1001"
            required>
		</sw-colorpicker>
		<sw-colorpicker
			:label="$tc('sw-cms.config.bc-showcase-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-showcase-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 %}
