{% extends 'base.html.twig' %}
{% block body %}
	<script>
        async function search() {
        const redirectTo = '/recherche/' + document.querySelector('#search').value;
        window.location.href = redirectTo;
        }
	</script>
	<style>
		.form-control {
			background: rgba(0, 0, 0, 0);
			border: 1px solid #8596a3;
			color: #ffffff;
			font-size: 14px;
			font-weight: 400;
			margin-bottom: 22px;
			width: 100%;
			height: 40px;
			padding-left: 20px;
			text-transform: capitalize;
		}

		.button {
			background: #ffb606;
			border: none;
			color: #ffffff;
			font-size: 16px;
			font-weight: 700;
			line-height: 1;
			margin-top: 18px;
			padding: 12px 25px;
			position: relative;
			text-transform: capitalize;
			transform: perspective(1px) translateZ(0px);
			transition-property: color;
			vertical-align: middle;
			border-radius: 5px;
		}
		[type=button]:not(:disabled),
		[type=reset]:not(:disabled),
		[type=submit]:not(:disabled),
		button:not(:disabled) {
			cursor: pointer;
		}
		[type=button],
		[type=reset],
		[type=submit],
		button {
			-webkit-appearance: button;
		}
		button,
		input {
			outline: medium none;
			color: #686868;
		}
		button,
		select {
			text-transform: none;
		}
		button,
		input,
		optgroup,
		select,
		textarea {
			margin: 0;
			font-family: inherit;
			font-size: inherit;
			line-height: inherit;
		}
		button {
			border-radius: 0;
		}
		feuille de style user-agent button {
			appearance: auto;
			writing-mode: horizontal-tb !important;
			font-style: ;
			font-variant-ligatures: ;
			font-variant-caps: ;
			font-variant-numeric: ;
			font-variant-east-asian: ;
			font-weight: ;
			font-stretch: ;
			font-size: ;
			font-family: ;
			text-rendering: auto;
			color: buttontext;
			letter-spacing: normal;
			word-spacing: normal;
			line-height: normal;
			text-transform: none;
			text-indent: 0;
			text-shadow: none;
			display: inline-block;
			text-align: center;
			align-items: flex-start;
			cursor: default;
			box-sizing: border-box;
			background-color: buttonface;
			margin: 0;
			padding: 1px 6px;
			border-width: 2px;
			border-style: outset;
			border-color: buttonborder;
			border-image: initial;
		}
		.button > button::before {
			background: #000;
			bottom: 0;
			content: "";
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			transform: scaleY(0);
			transform-origin: 50% 0 0;
			transition-duration: 0.3s;
			transition-property: transform;
			transition-timing-function: ease-out;
			z-index: -1;
			border-radius: 5px;
		}
	</style>
	<!-- slider-area-start -->
	{# <div class="slider-area">
								<div class="slider-active owl-carousel">
									<div class="slider-wrapper ptb-220 bg-opacity-3" style="background-image:url("{{asset('assets/img/slider/1.jpg')}}")">
										<div class="container">
											<div class="slider-content slider-text-animation text-center">
												<h1>Welcome to Shiksha</h1>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  labore et dolore magna aliqua. </p>
												<a href="courses-grid.html">Start A Course</a>
											</div>					
										</div>
									</div>
									
									<div class="slider-wrapper ptb-220 bg-opacity-3" style="background-image:url(assets/img/slider/3.jpg)">
										<div class="container">
											<div class="slider-content slider-text-animation text-center">
												<h1>Welcome to Shiksha</h1>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  labore et dolore magna aliqua. </p>
												<a href="courses-grid.html">Start A Course</a>
											</div>					
										</div>
									</div>
								</div>
							</div> #}
	<!-- register-now-area-start -->
		<div class="register-now-area"> <div class="container-fluid">
			<div class="row">
				<div class="col-xxl-6 col-12 p-0 bg-opacity-4 register-img d-flex justify-content-center align-items-center" style="background-image:url({{asset('assets/img/bg/4.jpg')}})">
					<div>
						<div class="register-now-content">
							<h3>Pour faire partie de notre famille</h3>
							<h2>S'inscrire maintenant</h2>
						</div>
						<div class="upcoming-course" data-countdown="2024/08/01"></div>
					</div>
				</div>
				<div class="col-xxl-6 col-12 p-0 f-right">
					<div class="register-now-wrapper blue-bg">
						<div class="register-now-text">
							<h2>S'inscrire maintenant</h2>
							<p>En vous inscrivant, vous autorisez Elite à publier les informations vous concernant à travers cette plateforme.</p>
						</div>
						{# <form action="https://htmldemo.net/shiksha/shiksha/assets/register.php" id="register-now" method="POST" >
																																						<input name="name" placeholder="Nom" type="text">
																																						<input name="email" placeholder="E-mail" type="email">
																																						<input name="contact" placeholder="Numéro" type="text">
																																						<button type="submit">obtenez-le maintenant </button>
																																					</form> #}
						{{form_start(form)}}

						{{form_widget(form.nom,{'attr':{'class': 'form-control'}})}}

						{{form_widget(form.prenom,{'attr':{'class': 'form-control'}})}}


						{{form_widget(form.email,{'attr':{'class': 'form-control'}})}}


						{{form_widget(form.tel,{'attr':{'class': 'form-control'}})}}


						{{form_widget(form.adresse,{'attr':{'class': 'form-control'}})}}


						{{form_widget(form.parcours,{'attr':{'class': 'form-control'}})}}


						{{form_widget(form.photo,{'attr':{'class': 'form-control'}})}}
						<br>
						<br>
						<button type="submit" class="button">S'inscrire</button>
						{{form_rest(form)}}
						{{form_end(form)}}
						<p class="form-message"></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- register-now-area-end -->
	<!-- slider-area-end -->
	<!-- featured-area-start -->
		<div class="featured-area"> <div class="container-fluid">
			<div class="row">
				<div class="col-md-4 p-0">
					<div class="featured-wrapper bg-1">
						<div class="featured-content text-center">
							<div class="featured-icon">
								<i class="ti-crown"></i>
							</div>
							<h4>Cours gratuits en ligne</h4>
							<p>ce sera fait, ce sera suivi de l'adipiscing el do eiusimo qu'ils ont mis dans un si grand effort et une telle douleur.
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 p-0">
					<div class="featured-wrapper bg-2">
						<div class="featured-content text-center">
							<div class="featured-icon">
								<i class="ti-medall"></i>
							</div>
							<h4>Professeur Certifié</h4>
							<p>Principalement en assurant un service d'enseignement dans les établissements du second degré et dans les établissements de formation.
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 p-0">
					<div class="featured-wrapper bg-3">
						<div class="featured-content text-center">
							<div class="featured-icon">
								<i class="ti-book"></i>
							</div>
							<h4>Cours Premium</h4>
							<p>ce sera fait, ce sera suivi de l'adipiscing el do eiusimo qu'ils ont mis dans un si grand effort et une telle douleur.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- featured-area-end -->
	<!-- welcome-area-start -->
	<div class="welcome-area pt-170 pb-150" style="background-image:url(assets/img/about/3.png)">
		<div class="container">
			<div class="row">
				<div class="col-xl-6 col-lg-7">
					<div class="welcome-wrapper">
						<div class="welcome-content">
							<h4>Bienvenue dans notre école ;</h4>
							<p>Que la douleur elle-même soit très importante, et elle sera suivie d'un adipiscing, et ils le mettront de telle manière qu'avec beaucoup de travail et de douleur, une partie en sortira. De deux manières, la douleur dans le rendu dans le plaisir de l'évasion, personne n'est né.
							</p>
							<h5>Pourquoi vous choisissez notre établissement  ?</h5>
							<ul class="welcome-link">
								<li>
									<i class="fa fa-long-arrow-right"></i>Un plan de formation organisé autour des compétences.</li>
								<li>
									<i class="fa fa-long-arrow-right"></i>Une évaluation formative.</li>
								<li>
									<i class="fa fa-long-arrow-right"></i>Avec beaucoup de travail et de douleur.</li>
								<li>
									<i class="fa fa-long-arrow-right"></i>Ils aiment le site très dollar</li>
							</ul>
							<h2 class="video-title">Voir notre vidéo sur le campus</h2>
						</div>
						<div class="row">
							<div class="videos-area">
								<div class="col-12">
									<div class="videos-wrapper mb-20">
										<div class="videos-img">
											<img src="assets/img/about/3.jpg" alt=""/>
											<div class="videos-content">
												<h5>Vidéo-01</h5>
											</div>
											<div class="videos-1">
												<div class="videos-icon">
													<a class="video-popup" href="https://www.youtube.com/watch?v=5IfKTuUH0HU">
														<i class="fa fa-play"></i>
													</a>
													<h5>Vidéo-01</h5>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- welcome-area-end -->
	<!-- counter1-area-start -->
	<div class="counter1-area pt-130 pb-100" style="background-image:url(assets/img/bg/20.jpg)">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-6 col-12">
					<div class="counter1-wrapper mb-30 text-center">
						<div class="counter1-img">
							<img src="assets/img/counter/1.png" alt=""/>
						</div>
						<div class="counter1-content">
							<h1 class="counter">780</h1>
							<span>Notation</span>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 col-12">
					<div class="counter1-wrapper mb-30 text-center">
						<div class="counter1-img">
							<img src="assets/img/counter/2.png" alt=""/>
						</div>
						<div class="counter1-content">
							<h1 class="counter">987</h1>
							<span>Etudiants</span>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 col-12">
					<div class="counter1-wrapper mb-30 text-center">
						<div class="counter1-img">
							<img src="assets/img/counter/3.png" alt=""/>
						</div>
						<div class="counter1-content">
							<h1 class="counter">550</h1>
							<span>Prix</span>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 col-12">
					<div class="counter1-wrapper mb-30 text-center">
						<div class="counter1-img">
							<img src="assets/img/counter/4.png" alt=""/>
						</div>
						<div class="counter1-content">
							<h1 class="counter">990</h1>
							<span>Projet</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- counter1-area-end -->
	<!-- our-courses-area-start -->
	<div class="our-courses-area pt-130 pb-100">
		<div class="container">
			<div class="section-title mb-45">
				<h4>NOS FORMATIONS</h4>
				{# <p>Il est très important de prendre soin du patient, et il suivra la croissance du patient, mais je pourrai le faire en même temps. Au fil des ans, je viendrai.</p> #}
			</div>
			<div class="row">
				{% for formation in formations|slice(0, 3) %}
					<div class="col-lg-4 col-md-6">
						<div class="courses-wrapper mb-80">
							<div class="courses-img">
								<a href="#"><img src="{{asset('uploads/formation_images/'~ formation.photo)}}" alt=""/>
									<span>Durée :
										{{formation.duree}}
										ans</span>
								</a>
							</div>
							<div class="courses-content">
								<h4>
									<a href="#">{{formation.titre}}</a>
								</h4>
								<p>{{formation.description}}</p>
								{# <a href="courses-details.html">appliquer maintenant</a> #}
							</div>
						</div>
					</div>
				{% endfor %}


			</div>
		</div>
	</div>
	<!-- our-courses-area-end -->
	<!-- course-now-area-start -->
	<div class="course-now-area ">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="course-now-wrapper blue-bg ptb-70">
						<div class="course-title text-center">
							<h2>Recherchez votre cours maintenant</h2>
							<p>Il est important de prendre soin de la douleur elle-même, et elle sera suivie par la croissance du patient, mais en même temps, il arrivera qu'il y ait beaucoup de travail et de douleur.
							</p>
						</div>
						<div class="now-course text-center">
							<div>
								<input
								id="search" class="course-texts" placeholder="Search Your Course" type="text">
								{# <input class="keyword" placeholder="Keyword" type="text"> #}
								<button onclick="">Recherchez</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- course-now-area-end -->

	<!-- course-categories-area-start -->
	<div class="course-categories-area pt-290 pb-100" style="background-image:url(assets/img/bg/19.jpg)">
		<div class="container">
			<div class="section-title white-text mb-45">
				<h4>Catégories de cours</h4>
				{# <p>Il est important de prendre soin de la douleur elle-même, et elle sera suivie par la croissance du patient, mais en même temps, il arrivera qu'il y ait beaucoup de travail et de douleur.</p> #}
			</div>
			<div class="row">
				<div class="col-lg-3 col-md-6">
					<div class="course-catagories mb-30">
						<div class="course-categories-wrapper text-center">
							<div class="course-categories-img">
								<img src="assets/img/categories/1.png" alt=""/>
							</div>
							<div class="course-categories-content">
								<h5>Technologie</h5>
								<p>Il est important de prendre soin de la douleur elle-même, et elle sera suivie par la croissance du patient, mais en même temps</p>
							</div>
						</div>
						<div class="course1-categories-wrapper ptb-70 bg-opacity-9" style="background-image:url(assets/img/courses/001.jpg)">
							<div class="course1-categories-content">
								{# <h1>
																									<a href="courses-details.html">+</a>
																								</h1> #}
								{# <h3>Technologie</h3> #}
								<br>
								<br>
								<br>
								<br>
								<br>
							<br>
						</div>
					</div>
				</div>
				</div>
					<div class="col-lg-3 col-md-6"> <div class="course-catagories mb-30">
						<div class="course-categories-wrapper text-center">
							<div class="course-categories-img">
								<img src="assets/img/categories/2.png" alt=""/>
							</div>
							<div class="course-categories-content">
								<h5>Workshop</h5>
								<p>Il est important de prendre soin de la douleur elle-même, et elle sera suivie par la croissance du patient, mais en même temps</p>
							</div>
						</div>
						<div class="course1-categories-wrapper ptb-70 bg-opacity-9" style="background-image:url(assets/img/courses/001.jpg)">
							<div class="course1-categories-content">
								{# <h1>
																									<a href="courses-details.html">+</a>
																								</h1> #}
								{# <h3>Technologie</h3> #}
								<br>
								<br>
								<br>
								<br>
								<br>
							<br>
						</div>
					</div>
				</div>
				</div>
					<div class="col-lg-3 col-md-6"> <div class="course-catagories mb-30">
						<div class="course-categories-wrapper text-center">
							<div class="course-categories-img">
								<img src="assets/img/categories/3.png" alt=""/>
							</div>
							<div class="course-categories-content">
								<h5>Arts</h5>
								<p>Il est important de prendre soin de la douleur elle-même, et elle sera suivie par la croissance du patient, mais en même temps</p>
							</div>
						</div>
						<div class="course1-categories-wrapper ptb-70 bg-opacity-9" style="background-image:url(assets/img/courses/001.jpg)">
							<div class="course1-categories-content">
								{# <h1>
																									<a href="courses-details.html">+</a>
																								</h1> #}
								{# <h3>Technologie</h3> #}
								<br>
								<br>
								<br>
								<br>
								<br>
							<br>
						</div>
					</div>
				</div>
				</div>
					<div class="col-lg-3 col-md-6"> <div class="course-catagories mb-30">
						<div class="course-categories-wrapper text-center">
							<div class="course-categories-img">
								<img src="assets/img/categories/4.png" alt=""/>
							</div>
							<div class="course-categories-content">
								<h5>Musique</h5>
								<p>Il est important de prendre soin de la douleur elle-même, et elle sera suivie par la croissance du patient, mais en même temps</p>
							</div>
						</div>
						<div class="course1-categories-wrapper ptb-70 bg-opacity-9" style="background-image:url(assets/img/courses/001.jpg)">
							<div class="course1-categories-content">
								{# <h1>
																									<a href="courses-details.html">+</a>
																								</h1> #}
								{# <h3>Technologie</h3> #}
								<br>
								<br>
								<br>
								<br>
								<br>
							<br>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	</div>
	<!-- course-categories-area-end -->


	<!-- subscribe-area-start -->
		<div class="subscribe-area blue-bg pt-50 pb-20"> <div class="container">
			<div class="row">
				<div class="col-lg-6 mb-30">
					<div class="subscribe-lg-title">
						<h2>subscribe to our newsletter</h2>
					</div>
				</div>
				<div class="col-lg-6 mb-30">
					<div class="subscribe-lg-form d-flex align-items-stretch flex-column flex-sm-row">
						<input type="email" placeholder="Enter Your Email" required>
						<button class="subscribe-lg-btn">Subscribe</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- subscribe-area-end -->
	<!-- upcoming-event-area-start -->
	<div class="upcoming-event-area pt-130 pb-100">
		<div class="container">
			<div class="section-title mb-45">
				<h4>NOS ÉVÉNEMENT</h4>
				{# <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> #}
			</div>
			<div class="row">

				<div
					class="col-lg-12">
					{# <h4 class="top-event-title">Up coming event</h4> #}
					<div class="row">
						{% for event in events|slice(0, 3) %}
							<div class="col-lg-4 col-md-6">
								<div class="event-style-1-wrapper mb-30">
									<div class="eveny-style1-img">
										<a href="#"><img src="{{asset('uploads/events_image/'~ event.photo)}}" alt=""></a>
										<div class="event-style1-content">
											<div class="event-style1-text">
												<div
													class="event-style1-meta">
													{# <span class="event-style1-left"><i class="ti-location-pin"></i> {{event.titre}}</span> #}
													<span class="event-style1-left">
														<i class="ti-calendar"></i>
														{{event.dateEvent|date('d/m/Y')}}</span>
												</div>
												<h4>
													<a href="#">{{event.titre}}</a>
												</h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}


					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock %}