{% extends '@SyliusShop/layout.html.twig' %}

{% form_theme form '@SyliusShop/Form/theme.html.twig' %}

{% block title %}
	{{ 'sylius.ui.contact_us'|trans }}
	|
	{{ parent() }}
{% endblock %}

{% block content %}
	<div class="ui hidden divider"></div>
	<div class="row contact-request justify-content-between align-items-center align-content-center">

		<h1 class="col-12">
			<i class="circular mail icon"></i>
			<div class="display-4 my-2">

				{{ 'sylius.ui.contact_us'|trans }}
				<div class="sub header">{{ 'sylius.ui.use_the_contact_form_below_to_send_us_a_message'|trans }}</div>

				{{ sylius_template_event('sylius.shop.contact.request.after_content_header') }}
			</div>
		</h1>
		<div class="col-md-8 col-12">

			{{ form_start(form, {'action': path('sylius_shop_contact_request'), 'attr': {'class': 'ui large loadable form', 'novalidate': 'novalidate'}}) }}

			{{ form_row(form.email, sylius_test_form_attribute('contact-email')|sylius_merge_recursive({'attr': {'class': 'form-control mb-3'}}
			)) }}

			{{ form_row(form.message, sylius_test_form_attribute('contact-message')|sylius_merge_recursive({'attr': {'class': 'form-control mb-3','rows': '12', 'style':'resize: none;'}}

			)) }}


			{{ sylius_template_event('sylius.shop.contact.request.form', {'form': form}) }}

			{{ form_row(form._token) }}
			<button type="submit" class="btn btn-primary w-100 mb-5" {{ sylius_test_html_attribute('send-button') }}>{{ 'sylius.ui.send'|trans }}</button>
			{{ form_end(form, {'render_rest': false}) }}
		</div>
		{% include "@SyliusShop/Layout/Footer/Grid/_contact_us.html.twig" %}


	</div>
{% endblock %}