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

{% block title %}Outils | {{ parent() }}{% endblock %}

{% block body %}
	{% if sectionOutils %}
		<div id="banner" class="container-fluid" style="background: url({{ vich_uploader_asset(sectionOutils, 'imageFile') }})no-repeat center center; background-size:cover; "></div>
		{% else %}
		<div id="banner" class="container-fluid"
			style="background: url({{ asset('frontend/dist/assets/img/banner.jpeg') }})no-repeat center center; background-size:cover; ">
		</div>
	{% endif %}
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1 class="banner__title">{{ sectionOutils ? sectionOutils.title : '' }}</h1>
				<div class="d-flex flex-column flex-lg-row justify-content-start align-items-center">
					<p>
						{{ sectionOutils ? sectionOutils.content|raw : '' }}
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid limit">
		<div class="container publications">
			<div class="alert text-center" style="display: none;"></div>
			<section>
				<div class="row">
					{% for outil in outils %}
						<div class="col-6 col-lg">
							<a href="#videos" class="card d-flex justify-content-center card-link align-center flex-column p-4 text-center">
								<img width="100%" class="mb-3" src="{{ vich_uploader_asset(outil, 'imageFile') }}" alt="{{ outil.title }}">
								<span>{{ outil.title }}</span>
							</a>
						</div>
					{% endfor %}
				</div>
			</section>
			<section class="outils__wrapper" id="videos">
				<div class="row">
					<div class="col-lg-6">
						<h3>Capsules vidéos</h3>
					</div>
					<div class="col-lg-6 d-flex justify-content-lg-end">
						<a href="#">Voir toutes les vidéos</a>
					</div>
					<div class="col-12">
						<p>Des capsules vidéos sur le fonctionnement de la copropriété, un outil unique pour informer vos copropriétaires !</p>
					</div>
					<div class="col-12">
						<div class="slider-video">
							<div class="col-12">
								<figure class="video" data-videoid="1">
									<div class="video_thumbnail">
										<img src="{{ asset('frontend/img.youtube.com/vi/9QB8TSGczlU/mqdefault.jpg') }}" alt="">
										<i class="fas fa-play-circle"></i>
									</div>
									<figcaption>
										<b>L'assemblée générale et le choix du président de séance</b>
									</figcaption>
								</figure>
							</div>
							<div class="col-12">
								<figure class="video" data-videoid="2">
									<div class="video_thumbnail">
										<img src="{{ asset('frontend/img.youtube.com/vi/9YSQAgHusp0/mqdefault.jpg') }}" alt="">
										<i class="fas fa-play-circle"></i>
									</div>
									<figcaption>
										<b>L'exécution des décisions de l'assemblée générale</b>
									</figcaption>
								</figure>
							</div>
							<div class="col-12">
								<figure class="video" data-videoid="3">
									<div class="video_thumbnail">
										<img src="{{ asset('frontend/img.youtube.com/vi/yCro7SQYOLo/mqdefault.jpg') }}" alt="">
										<i class="fas fa-play-circle"></i>
									</div>
									<figcaption>
										<b>L'approbation des comptes</b>
									</figcaption>
								</figure>
							</div>
							<div class="col-12">
								<figure class="video" data-videoid="4">
									<div class="video_thumbnail">
										<img src="{{ asset('frontend/img.youtube.com/vi/_ibaNW4qVJ0/mqdefault.jpg') }}" alt="">
										<i class="fas fa-play-circle"></i>
									</div>
									<figcaption>
										<b>La diffusion du procès verbal de l'assemblée générale</b>
									</figcaption>
								</figure>
							</div>
							<!-- END WHILE VIDEOS -->
						</div>
						<!-- Modal -->
						<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel"
							aria-hidden="true">
							<div class="modal-dialog modal-lg modal-dialog-centered">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="videoModalLabel"></h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			
			<section class="outils__wrapper" id="SyndicInfo">
				<div class="row">
					<div class="col-lg-6">
						<h3>Info</h3>
					</div>
					<div class="col-lg-6 d-flex justify-content-lg-end">
						<a href="#" target="_blank">Voir tous les Info</a>
					</div>
					<div class="col-12">
						<p>
							Le bulletin d'information dédié aux copropriétaires, une mine d'informations utiles
							(assemblées générales, législation, primes, travaux,...)
						</p>
					</div>
					<div class="col-12">
						<div class="slideSyndic">
							<div class="col-12">
								<a href="#" target="_blank">
									<figure class="video">
										<img class="img-fluid bs-4" src="{{ asset('frontend/images/pubs/syndicinfo-79_cover_imageorigi.png') }}" alt="N°79 - Mars 2024">
										<figcaption class="mt-2">N°79 - Mars 2024 </figcaption>
									</figure>
								</a>
							</div>
							<div class="col-12">
								<a href="#" target="_blank">
									<figure class="video">
										<img class="img-fluid bs-4" src="{{ asset('frontend/images/pubs/syndicinfo-78_cover_imageorigi.png') }}" alt="">
										<figcaption class="mt-2">N°78 - Décembre 2023 </figcaption>
									</figure>
								</a>
							</div>
							<div class="col-12">
								<a href="#" target="_blank">
									<figure class="video">
										<img class="img-fluid bs-4" src="{{ asset('frontend/images/pubs/syndicinfo-77_cover_imageorigi.png') }}" alt="">
										<figcaption class="mt-2">N°77 - Septembre 2023 </figcaption>
									</figure>
								</a>
							</div>
							<div class="col-12">
								<div class="cta-syndicinfo dots dots--be">
									<div class="line"></div>
									<div class="container">
										<div class="row">
											<div class="col-12 d-flex flex-column justify-content-center align-items-start">
												<h2><b>Info</b></h2>
												<p>
													Rendez-vous sur <a href="#"
														target="_blank">syndicinfo.immo</a> pour découvrir tous les
													précédents numéros et vous inscrire gratuitement à la version
													digitale !
												</p>
												<a href="#" class="btn btn-primary" target="_blank">syndicinfo.immo</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<section class="outils__wrapper" id="Day_to_day">
				<div class="row">
					<div class="col-lg-6">
						<h3>Le quotidien de l'agent immobilier</h3>
					</div>
					<div class="col-lg-6 d-flex justify-content-lg-end">
						<a href="#">Voir tous les Day-to-day</a>
					</div>
					<div class="col-12">
						<p>Le dossier indispensable pour gérer vos activités au quotidien !</p>
					</div>
					<div class="col-12">
						<div class="slider-file">
							<div class="col-12">
								<div class="card tool">
									<a href="#" target="_blank" class="tool__image">
										<img src="{{ asset('frontend/images/pubs/fmag36_mars24_d2d_cover_imageorigi.png') }}" alt=""> 
									</a>
									<div class="tool__text">
										<h4 class="card-title">
											<a href="#" target="_blank">N°15 - Mars 2024</a>
										</h4>
										<div class="card-text">
											<div class="row">
												<div class="col-12">
													<ul>
														<li>
															Que se passe-t-il si je ne fais pas ma
															d&eacute;claration &agrave; temps ou ne paie pas mes
															imp&ocirc;ts ?
														</li>
														<li>
															Glossaire du contrat d&rsquo;interm&eacute;diation
															immobili&egrave;re - N&deg;2
														</li>
														<li>
															Vente d&rsquo;une agence immobili&egrave;re :
															l&rsquo;impact sur les contrats en cours
														</li>
														<li>
															La faillite : &eacute;chec ou rebond ? La r&eacute;cente
															r&eacute;forme du droit de l&rsquo;insolvabilit&eacute;
														</li>
														<li>Comment pr&eacute;parer sa pension&nbsp;?</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div><!-- ./card -->
							</div>
							<div class="col-12">
								<div class="card tool">
									<a href="#" target="_blank" class="tool__image">
										<img src="{{ asset('frontend/images/pubs/fmag35_dec23_d2d_cover_imageorigi.png') }}" alt=""> 
									</a>
									<div class="tool__text">
										<h4 class="card-title">
											<a href="#" target="_blank">N°14 - Décembre 2023</a>
										</h4>
										<div class="card-text">
											<div class="row">
												<div class="col-12">
													<ul>
														<li>
															Que puis-je r&eacute;clamer comme
															p&eacute;nalit&eacute;s &agrave; un client qui ne paie
															pas ?
														</li>
														<li>
															Glossaire du contrat d&rsquo;interm&eacute;diation
															immobili&egrave;re (1) : les d&eacute;lais
														</li>
														<li>L&rsquo;agent immobilier face &agrave; la prescription</li>
														<li>
															Voiture hybride ou full &eacute;lectrique : que choisir
															?
														</li>
														<li>
															Tous les frais de repr&eacute;sentation et de cadeaux
															d&rsquo;affaires sont-ils d&eacute;ductibles ?
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div><!-- ./card -->
							</div>
							<div class="col-12">
								<div class="card tool">
									<a href="#" target="_blank" class="tool__image">
										<img src="{{ asset('frontend/images/pubs/d2d_13_cover_imageorigi.png') }}" alt=""> 
									</a>
									<div class="tool__text">
										<h4 class="card-title">
											<a href="#" target="_blank">N°13 - Septembre 2023</a>
										</h4>
										<div class="card-text">
											<div class="row">
												<div class="col-12">
													<ul>
														<li>
															Du neuf dans la formation en alternance en R&eacute;gion
															bruxelloise : le stage en entreprise devient obligatoire
															!
														</li>
														<li>
															Vente ou location : documents d&rsquo;identification et
															r&eacute;glementations applicables
														</li>
														<li>Avantages extral&eacute;gaux et mobilit&eacute;</li>
														<li>
															N&rsquo;oubliez pas d&rsquo;adapter les statuts de votre
															soci&eacute;t&eacute; avant le 1<sup>er</sup> janvier
															2024 !
														</li>
														<li>Le compte de tiers doit-il figurer dans le bilan ?</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div><!-- ./card -->
							</div>
							<div class="col-12">
								<div class="card tool">
									<a href="#" target="_blank" class="tool__image">
										<img src="../images/pubs/d2d_fmag33_cover_imageorigi.png" alt="N°12 - Juin 2023"> 
									</a>
									<div class="tool__text">
										<h4 class="card-title">
											<a href="#" target="_blank">N°12 - Juin 2023</a>
										</h4>
										<div class="card-text">
											<div class="row">
												<div class="col-12">
													<ul>
														<li>
															Quelle r&eacute;ponse p&eacute;nale face &agrave; un
															client harcelant au t&eacute;l&eacute;phone ou par
															e-mail ?
														</li>
														<li>
															Installation d&rsquo;une borne de recharge devant
															l&rsquo;agence immobili&egrave;re : avantages et
															d&eacute;ductibilit&eacute; fiscale
														</li>
														<li>Exercer son m&eacute;tier loin du stress</li>
														<li>La messagerie du travailleur : access&nbsp;denied ?</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div><!-- ./card -->
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
{% endblock %}