{% block sw_cms_el_config_bc_service_element %}
<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-service-element.mediaLabel')"
            required
		/>
		<sw-text-field 
			v-model:value="element.config.title.value" 
			:label="$tc('sw-cms.config.bc-service-element.titleLabel')"
			:placeholder="$tc('sw-cms.config.bc-service-element.titlePlaceholder')"
            required
		/>
        <sw-text-field 
			v-model:value="element.config.subTitle.value" 
			:label="$tc('sw-cms.config.bc-service-element.subTitleLabel')"
			:placeholder="$tc('sw-cms.config.bc-service-element.subTitlePlaceholder')"
		/>
	</sw-card>
	<sw-card :hero="false" :isloading="false" :large="false">
		<sw-colorpicker
			:label="$tc('sw-cms.config.bc-service-element.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-service-element.subtitleColor')"
			v-model:value="element.config.subtitleColor.value"
			value="#000"
			colorOutput="auto"
			:alpha="true"
			:disabled="false"
			:colorLabels="true"
			zIndex="1001"
            required>
		</sw-colorpicker>
		<sw-colorpicker
			:label="$tc('sw-cms.config.bc-service-element.borderColor')"
			v-model:value="element.config.borderColor.value"
			value="#cead60"
			colorOutput="auto"
			:alpha="true"
			:disabled="false"
			:colorLabels="true"
			zIndex="1001"
            required>
		</sw-colorpicker>
	</sw-card>
</sw-container>
{% endblock %}
