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

{% block title %}Devenir Membre | {{ parent() }}{% endblock %}

{% block body %}
	<div id="banner" class="container-fluid" style="background: url({{ vich_uploader_asset(article_request_hadesion, 'imageFile') }})no-repeat center center; background-size:cover; "></div>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1 class="banner__title">Adhésion</h1>
				<div class="d-flex flex-column flex-lg-row justify-content-start align-items-center"></div>
			</div>
		</div>
	</div>
	<div class="container adhesion" id="xhr-adhesion">
		<section>
			<div class="row">
				<div class="col-12 col-md-6">
					{{ article_request_hadesion ? article_request_hadesion.content|raw }}
				</div>
				<div class="col-12 col-md-6">
					<div class="wrapper-filtre">
						<h6 class="filtre__title text-secondary">Cotisations 2024<sup>*</sup></h6>
						<table class="table text-left">
							<tbody>
								{% for asso_product in asso_products %}
									<tr>
										<td><b>{{ asso_product.name }}</b> : {{ asso_product.description|raw }}</td>
										<td width="125px">{{ asso_product.price|number_format(0, ',', ' ') }} XF<td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="row" id="infos_perso">
				<div class="col-12">
					<h4 class="my-5">Demande d'adhésion à {{ app_name }}</h4>
				</div>
				<div class="col-12">
					{% for label, messages in app.flashes %}
						{% for message in messages %}
							<div id="alerte" class="alert-{{ label }} p-4">
								{{ message }}
							</div>
						{% endfor %}  
					{% endfor %}  
					{{ form_start(form, {'attr': {'id': 'form-info-perso-1', 'class': 'form-adhesion1 mt-4'}}) }}
						<div class="form-row">
							<div id="info_formulaire" class="form-row">
								<div class="form-group col-12">
									<label for="asso_request_hadesion_gender">Civilité *</label>
									{{ form_widget(form.gender, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.gender) }}
								</div>
								<div class="form-group col-12">
									<label for="asso_request_hadesion_last_name">Nom *</label>
									{{ form_widget(form.last_name, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.last_name) }}
								</div>
								<div class="form-group col-12">
									<label for="asso_request_hadesion_first_name">Prénoms *</label>
									{{ form_widget(form.first_name, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.first_name) }}
								</div>
								<div class="form-group col-12">
									<label for="asso_request_hadesion_phone">N° Tél *</label>
									{{ form_widget(form.phone, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.phone) }}
								</div>
								<div class="form-group col-12">
									<label for="asso_request_hadesion_mobile">N° Mobile *</label>
									{{ form_widget(form.mobile, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.mobile) }}
								</div>
								<div class="form-group col-12">
									<label for="asso_request_hadesion_email">Email *</label>
									{{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.email) }}
								</div>
								<div class="form-group col-12">
									<label for="asso_request_hadesion_address">Adresse *</label>
									{{ form_widget(form.address, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.address) }}
								</div>
								<div class="form-group col-12">
									<label for="asso_request_hadesion_type_of_property">Type de Bien *</label>
									{{ form_widget(form.type_of_property, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.type_of_property) }}
								</div>
								<div class="form-group col-12">
									<label for="asso_request_hadesion_observation">Observation *</label>
									{{ form_widget(form.observation, {'attr': {'class': 'form-control', 'placeholder': ''}}) }}
            						{{ form_errors(form.observation) }}
								</div>
								<br />
								<div class="col-12 mt-3">
									<div class="custom-control custom-checkbox">
										<input class="custom-control-input" type="checkbox" name="Check_conditions" id="Check_conditions" value="Check_conditions" required>
										<label class="custom-control-label" for="Check_conditions">
											J’ai lu et j’accepte <a href="#" target="_blank">les conditions générales</a>, 
											<a href="#" target="_blank">le règlement d’ordre intérieur de {{ app_name }}</a>
											 ainsi que <ahref="#" target="_blank">les conditions liées à la vie privée</a>. * 
										</label>
									</div>
									<div class="custom-control custom-checkbox">
										<input class="custom-control-input" type="checkbox" name="Check_verifier_ipi" id="Check_verifier_ipi" value="Check_verifier_ipi" required>
										<label class="custom-control-label" for="Check_verifier_ipi">
											Je certifie que je serai la seule personne à bénéficier des avantages et
											services de {{ app_name }} sur base de la présente inscription. *
										</label>
									</div>

								</div>
								<div class="col-12 d-flex justify-content-end">
									<button class="btn btn-primary">Envoyer</button>
								</div>
							</div>
						</div>
					{{ form_end(form) }}
				</div>
			</div>
		</section>
	</div>
{% endblock %}