{% extends 'base.html.twig' %}

{% block title %}Contactez-nous!
{% endblock %}

{% block body %}
	<div class="form-card-bg">
		<div class="container">
			<div class="form-card">
				<div class="base-content">
					<h1>Contactez-nous</h1>

					{% for error in form.vars.errors.form.getErrors(true) %}
						<div class="alert alert-error">
							{{ error.message }}
						</div>
					{% endfor %}
					{% for message in app.flashes('success') %}
						<div class="alert alert-success">
							{{ message }}
						</div>
					{% endfor %}
					{% for message in app.flashes('error') %}
						<div class="alert alert-error">
							{{ message }}
						</div>
					{% endfor %}
					<img src="{{ asset('uploads/config/bandeau_form_contact.png') }}" style="width:100%;height:auto" alt="Formulaire">
					{{ form_start(form, {'attr': {'class': 'form-apply'}}) }}
					<div class="flex">
						{{ form_row(form.prenom) }}
						{{ form_row(form.nom) }}
					</div>
					<div class="flex">
						{{ form_row(form.email) }}
						{{ form_row(form.phone) }}
					</div>
					{{ form_label(form.subject) }}
					{{ form_widget(form.subject) }}
					{{ form_row(form.message) }}
					{{ form_row(form.fichier) }}
					{{ form_widget(form.newsletter_optin) }}
					{{ form_label(form.newsletter_optin) }}
					<div id="newsletter_additional">
						<div>
							<div class="flex two_section">
								<div>
									<label for="newsletter_departement">Département de résidence</label>
									<select name="newsletter_departement" id="newsletter_departement">
										<option disabled selected value>Choisir...</option>
										{% for key, label in newsletterChoices().departement %}
											<option value="{{ key }}">{{ label }}</option>
										{% endfor %}
									</select>
								</div>
								<div>
									<label for="newsletter_age">Vous avez</label>
									<select name="newsletter_age" id="newsletter_age">
										<option disabled selected value>Choisir...</option>
										{% for key, label in newsletterChoices().age %}
											<option value="{{ key }}">{{ label }}</option>
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-input" style="margin: 9px 0;">
								<label for="newsletter_from">Comment nous avez-vous connu ?</label>
								<select name="newsletter_from" id="newsletter_from">
									<option disabled selected value>Choisir...</option>
									{% for key, label in newsletterChoices().from %}
										<option value="{{ label }}">{{ label }}</option>
									{% endfor %}
								</select>
								<input type="text" id="newsletter_from_text" name="newsletter_from_text" placeholder="Autre...">
							</div>
							<label for="brevo_id">Thématiques</label>
							<div class="lists">
								{% for key, label in newsletterChoices().interests %}
									<div class="form-control inline">
										<div class="form-checkbox">
											<input type="checkbox" id="{{ key }}" name="{{ key }}" value="{{ label }}">
											<label for="{{ key }}">{{ label }}</label>
										</div>
									</div>
								{% endfor %}
							</div>
						</div>
					</div>
					{{ form_row(form.captcha) }}
					<input type="submit" value="ENVOYER" class="btn is-primary">
					{{ form_end(form) }}

				</div>

			</div>
		</div>
	</div>
	<script>
	 document.addEventListener('DOMContentLoaded', () => {
		if(window.location.search.includes('sujet=candidatures')) {
			document.querySelector('#contact_subject').value = "9"
		}
	 })
	</script>
{% endblock %}