{% block element_bc_contact_us %}
	
	{% set config = element.config %}
	{% set email = config.email.value %}
	{% set media = config.media.value %}
	{% set bannerBgColor = config.bannerBgColor.value %}
	{% set bgImage = null %}

	{% if media %}
		{% set mediaCollection = searchMedia([media],context.context) %}
		{% set bgImage = mediaCollection.get(media) %}
	{% endif %}

	{% set phone = config.phone.value %}
	{% set message = config.message.value %}
	{% set fullName = config.fullName.value %}
	{% set title = config.title.value %}
	{% set formTitle = config.formTitle.value %}
	{% set btnBgColor = config.btnBgColor.value %}
	{% set titleColor = config.titleColor.value %}
	{% set labelColors = config.labelColors.value %}
	{% set btnTextColor = config.btnTextColor.value %}
	{% set formTitleColor = config.formTitleColor.value %}
	{% set formPlacement = element.config.formPlacement.value %}
	{% set formBackgroundColor = config.formBackgroundColor.value %}

	{% set formStyle = "width:100%; padding:0;" %}
	{% if bgImage %}
		{% set formStyle = formStyle ~ " background-image: url('" ~ bgImage.url ~ "'); background-repeat: no-repeat; background-size: cover;" %}
	{% elseif bannerBgColor %}
		{% set formStyle = formStyle ~ " background-color: " ~ bannerBgColor ~ ";" %}
	{% endif %}

	<div class="cms-element-{{ element.type }}" data-element-id="{{ element.id }}" data-bc-contact-us="true">
		<div class="contact-form-background" style="{{ formStyle }}">
			<div class="contact--form-bg">
				<div class="container">
					<div class="contact-form">
						<div class="row">
							{% if formPlacement == 'right' %}
								{% if title %}
								<div class="col-xl-7 col-lg-6 col-md-5 bc-contact-us-text-{{ formPlacement }}">
									<div class="heading--wrapper">
										<h2 style="color:{{titleColor}} ;">{{title}}</h2>
									</div>							
								</div>
								{% endif %}
							{% endif %}
							<div class="col-xl-5 col-lg-6 col-md-7">
								<div class="contact--card" style="opacity: 0.77; background-Color:{{formBackgroundColor}};">
									{% if formTitle %}
										<h3 style="color: {{formTitleColor}};"> {{formTitle}}</h3>
									{% endif %}
									<form class="wrap--contact bc-contact-us-form">
										<input type="hidden" value='{{ path('frontend.action.bc_contact_us') }}' class="url"/>
										<div class="form-row">
											{% if fullName %}
												<div class="form-group col-md-12">
													<input type="text" name="fullname" class="form-control fullname"  style="color: {{labelColors}};" placeholder="{{ "BrandCrockAquaTheme.contactform.widgets.fullname"|trans|sw_sanitize }}" required>
												</div>
											{% endif %}

											<div class="form-group col-md-12">
												<input type="email" name="email" class="form-control email"  style="color: {{labelColors}};" placeholder="{{ "BrandCrockAquaTheme.contactform.widgets.email"|trans|sw_sanitize }}*" required>
											</div>

											{% if phone %}
												<div class="form-group col-md-12">
													<input type="tel" name="contact" class="form-control contact"  style="color: {{labelColors}};" placeholder="{{ "BrandCrockAquaTheme.contactform.widgets.phone"|trans|sw_sanitize }}" required>
												</div>
											{% endif %}

											<div class="form-group col-md-12">
												<textarea placeholder="{{ "BrandCrockAquaTheme.contactform.widgets.message"|trans|sw_sanitize }}*" name="message" class="form-control message" style="color: {{labelColors}};" type="message" required></textarea>
											</div>
										</div>

										<input type="text" name="company" class="d-none bc-honeypot" autocomplete="off" />
										<a href="javascript:void(0)" class="btn btn-primary sendEmail" style="background:{{btnBgColor}}; color: {{btnTextColor}};">
											{{ "BrandCrockAquaTheme.contactform.widgets.btnlable"|trans|sw_sanitize }}
										</a>
										<p class="alert p-2 text-light response" style="display:none; color: #f1f1f1; font-size:14px;"></p>
									</form>
								</div>
							</div>
							{% if formPlacement == 'left' %}
								{% if title %}
								<div class="col-xl-7 col-lg-6 col-md-5 bc-contact-us-text-right">
									<div class="heading--wrapper">
										<h2 style="color: {{titleColor}};">{{title}}</h2>
									</div>							
								</div>
								{% endif %}
							{% endif %}
						</div>    
					</div>
				</div>
			</div>
		</div>
		<script>
			window.bcAquaContactSnippets = {
				requiredFields: "{{ 'BrandCrockAquaTheme.contactform.error.requiredFields'|trans|e('js') }}",
				missingUrl: "{{ 'BrandCrockAquaTheme.contactform.error.missingUrl'|trans|e('js') }}",
				success: "{{ 'BrandCrockAquaTheme.contactform.success'|trans|e('js') }}",
				networkError: "{{ 'BrandCrockAquaTheme.contactform.error.network'|trans|e('js') }}"
			};
		</script>
	</div>

{% endblock %}
