{% block sw_cms_el_config_bc_contact_us_config %}
<sw-container class="sw-cms-el-config-bc-hover-text-image">
	<sw-card :hero="false" :isloading="false" :large="false">
		<sw-text-field 
			v-model:value="element.config.title.value" 
			:label="$tc('sw-cms.config.bc-contact-us.titleLabel')"
			:placeholder="$tc('sw-cms.config.bc-contact-us.titlePlaceholder')"
            required
		/>
		<sw-text-field 
			v-model:value="element.config.formTitle.value" 
			:label="$tc('sw-cms.config.bc-contact-us.formTitleLabel')"
			:placeholder="$tc('sw-cms.config.bc-contact-us.titlePlaceholder')"
		/>
		<sw-media-field 
			:value="element.config.media.value" 
            @update:value="(v) => element.config.media.value = v"
			:label="$tc('sw-cms.config.bc-contact-us.mediaLabel')"
		/>

        <sw-colorpicker
            :label="$tc('sw-cms.config.bc-contact-us.bannerBgColor')"
            v-model:value="element.config.bannerBgColor.value"
            value="#c7c7c7c7"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>

		<sw-checkbox-field 
			v-model:value="element.config.fullName.value" 
			:label="$tc('sw-cms.config.bc-contact-us.fullNameLabel')"
		/>
		<sw-checkbox-field 
			v-model:value="element.config.phone.value" 
			:label="$tc('sw-cms.config.bc-contact-us.phoneLabel')"
		/>
		<sw-checkbox-field 
			v-model:value="element.config.email.value" 
			:label="$tc('sw-cms.config.bc-contact-us.emailLabel')"
			disabled
		/>
		<sw-checkbox-field 
			v-model:value="element.config.message.value" 
			:label="$tc('sw-cms.config.bc-contact-us.messageLabel')"
			disabled
		/>
	</sw-card>

	<sw-card :hero="false" :isloading="false" :large="false">
        <sw-single-select
            :label="$tc('sw-cms.config.bc-contact-us.formPlacement')"
            v-model:value="element.config.formPlacement.value"
            :options="[
                { value: 'right', label: $tc('sw-cms.config.bc-contact-us.formRight') },
                { value: 'left',  label: $tc('sw-cms.config.bc-contact-us.formLeft') }
            ]"
            required
        />
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-contact-us.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-contact-us.formBackgroundColor')"
            v-model:value="element.config.formBackgroundColor.value"
            value="#fff"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-contact-us.formTitleColor')"
            v-model:value="element.config.formTitleColor.value"
            value="#000"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-contact-us.labelColors')"
            v-model:value="element.config.labelColors.value"
            value="#000"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-contact-us.btnTextColor')"
            v-model:value="element.config.btnTextColor.value"
            value="#fff"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
		<sw-colorpicker
            :label="$tc('sw-cms.config.bc-contact-us.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 %}
