{% extends 'site/site.html.twig' %}

{% block headtitle %}
{{ parent() }}
- événement
{% endblock %}

{% block stylesheets %}
<style>
	.gallery {
		display: flex;
		padding: 2px;
		transition: .3s;
	}

	.gallery:hover .gallery__image {
		filter: grayscale(1);
	}

	.gallery__column {
		display: flex;
		flex-direction: column;
		width: 25%;
	}

	.gallery__link {
		margin: 2px;
		overflow: hidden;
	}

	.gallery__link:hover .gallery__image {
		filter: grayscale(0);
	}

	.gallery__link:hover .gallery__caption {
		opacity: 1;
	}

	.gallery__thumb {
		position: relative;
	}

	.gallery__image {
		display: block;
		width: 100%;
		transition: .3s;
	}

	.gallery__image:hover {
		transform: scale(1.1);
	}

	.gallery__caption {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 25px 15px 15px;
		width: 100%;
		font-family: 'Raleway', sans-serif;
		font-size: 16px;
		color: white;
		opacity: 0;
		background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255, 255, 0) 100%);
		transition: .3s;
	}


	figcaption.gallery__caption {
		display: none;
	}

	video {
		width: 100%;
	}

	.section-video {
		margin-top: 100px;
		margin-bottom: 100px;
	}
</style>
{% endblock %}

{% block page %}

	
	<div class="container-fluid">
		<div class="row mb-5">
			<div class="col-12 pr-0 pl-0 text-center">
				<div class="nom-page">
					Accueil > <span>Nos événements</span>
				</div>
			</div>
		</div>
	</div>
<div class="formation">
	
	<div class="container">
		<div class="presentation">
			<div class="block-formation-titre titre1 text-center mb-5 uppercase">
				 {{evenement.wording}}
			</div>
			<div class="row">
				<div class="col-12 col-md-6 text-center">
					<img src="{{ asset('uploads/event/' ~ evenement.image ~ '')}}" width="100%">
					
				</div>
				<div class="col-6">
					<div class="block-description-2">
					<div class="block-details-formation-texte pt-4">
						{# <div class="block-description-titre pb-4">
							TITRE ARTICLE
						</div>
						<div class="block-details-formation-texte pt-4">
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iure vero, incidunt
							quibusdam,
							eum
							recusandae corrupti molestias nesciunt iste error, facilis iusto nemo repellat quaerat!
							Corrupti
							officiis voluptates et voluptatum.
						</div>
						<div class="block-details-formation-texte pt-4">
							
							<img src="{{ asset('assets/site/images/icon-solution.png') }}" width="25px" class="mr-3">
							
							<p>Connaître chaque diagnostic immobilier avec sa spécificité technique, règlementaire
								et
								législative.</p>
						</div>
						<div class="block-details-formation-texte pt-4">
							<img src="{{ asset('assets/site/images/icon-solution.png') }}" width="25px" class="mr-3">
							<p>Maîtriser la méthodologie de chaque diagnostic immobilier Face au client, avoir
								l’argumentaire et les explications néces</p>
						</div>
						<div class="block-details-formation-texte pt-4">
							<img src="{{ asset('assets/site/images/icon-solution.png') }}" width="25px" class="mr-3">
							<p>saires pour chaque diagnostic.</p>
						</div> #}
						{{evenement.description}}
					</div>
					</div>
				</div>


			</div>
		</div>
	</div>
	{% if evenement.video is not null %}
	<div class="container">

		<div class="section-video">

			<div class="block-formation-titre text-center mb-5">
				<span>Vidéo</span> de l'évènement
			</div>
			<video poster="{{ asset('assets/site/images/thumbnail.jpg') }}" width="100%" controls>
				<source src="movie.mp4" type="video/mp4">
			</video>
		</div>
	</div>
	{% endif %}
	<div class="container mt-5">
		<div class="block-formation-titre text-center mb-5">
			<span>Galerie</span> de photos
		</div>
		<div class="gallery">

			<div class="gallery__column">
				<a href="https://unsplash.com/@jeka_fe" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/_cvwXhGqG-o/300x300" alt="Portrait by Jessica Felicio"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Jessica Felicio</figcaption>
					</figure>
				</a>

				<a href="https://unsplash.com/@oladimeg" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/AHBvAIVqk64/300x500" alt="Portrait by Oladimeji Odunsi"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Oladimeji Odunsi</figcaption>
					</figure>
				</a>

				<a href="https://unsplash.com/@a2eorigins" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/VLPLo-GtrIE/300x300" alt="Portrait by Alex Perez"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Alex Perez</figcaption>
					</figure>
				</a>
			</div>

			<div class="gallery__column">
				<a href="https://unsplash.com/@hikiapp" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/A9rQeI2AdR4/300x300" alt="Portrait by Hikiapp"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Hikiapp</figcaption>
					</figure>
				</a>

				<a href="https://unsplash.com/@von_co" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/dnL6ZIpht2s/300x300" alt="Portrait by Ivana Cajina"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Ivana Cajina</figcaption>
					</figure>
				</a>

				<a href="https://unsplash.com/@j_erhunse" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/vp9mRauo68c/300x500" alt="Portrait by Jeffery Erhunse"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Jeffery Erhunse</figcaption>
					</figure>
				</a>
			</div>

			<div class="gallery__column">
				<a href="https://unsplash.com/@marilezhava" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/Xm9-vA_bhm0/300x500" alt="Portrait by Mari Lezhava"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Mari Lezhava</figcaption>
					</figure>
				</a>

				<a href="https://unsplash.com/@ethanhaddox" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/NTjSR3zYpsY/300x300" alt="Portrait by Ethan Haddox"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Ethan Haddox</figcaption>
					</figure>
				</a>

				<a href="https://unsplash.com/@mr_geshani" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/2JH8d3ChNec/300x300" alt="Portrait by Amir Geshani"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Amir Geshani</figcaption>
					</figure>
				</a>
			</div>

			<div class="gallery__column">
				<a href="https://unsplash.com/@nixcreative" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/sh3LSNbyj7k/300x300" alt="Portrait by Tyler Nix" class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Tyler Nix</figcaption>
					</figure>
				</a>

				<a href="https://unsplash.com/@majestical_jasmin" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/OQd9zONSx7s/300x300" alt="Portrait by Jasmin Chew" class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Jasmin Chew</figcaption>
					</figure>
				</a>

				<a href="https://unsplash.com/@dimadallacqua" target="_blank" class="gallery__link">
					<figure class="gallery__thumb">
						<img src="https://source.unsplash.com/XZkEhowjx8k/300x500" alt="Portrait by Dima DallAcqua"
							class="gallery__image">
						<figcaption class="gallery__caption">Portrait by Dima DallAcqua</figcaption>
					</figure>
				</a>
			</div>
		</div>
	</div>
</div>

</body>

{% endblock %}