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

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

{% block body %}
	<div class="main_img align-center">
		<div class="align-center">
			<h1>Luxury Services</h1>
			<p>
				Bringing job seekers and employers together for more than 40 years
			</p>
			<a href="{{ path('app_jobs') }}" class="cta_golden">view jobs</a>
		</div>
	</div>
	<main>
		<section id="aboutUs">
			<div class="flex-space_around">
				<div>
					<span>Whether you're an employer or a candidate looking for jobs</span>
					<h2>WE HAVE THE SOLUTION FOR YOU</h2>
				</div>
				<div class="promo-btn">
					<a href="{{ path('app_contact') }}">Contact Us</a>
				</div>
			</div>
			<hr/>

			<div class="align-center">
				<h2>Who We are</h2>
				<p class="section-sub white-text">
					Luxury Services is a leading professional recruitment consultancy
					specialising in the recruitment of permanent, contract and temporary
					positions on behalf of the world’s top employers.
				</p>
			</div>

			<div id="carousel_container">
				<div class="carousel">
					<img class="img-responsive" src="img/luxury_services_slide1.jpg" alt="" width="100%"/>
				</div>
				<div id="text_about">
					<h4>Our philosophy</h4>
					<p class="white-text">
						Our role is to work with employers and job seekers to facilitate
						a successful match. This can range from advising a global
						company on a candidate sourcing strategy to helping a job seeker
						find their dream job.
					</p>
					<div class="align-center">
						<a href="{{ path('app_company') }}" class="cta_golden" id="cta_about">More about us</a>
					</div>
				</div>
			</div>
		</section>

		<section id="joinUs" class="align-center">
			<h2 class="tt-headline clip is-full-width no-margin">
				<span>You are
				</span>
				<span class="tt-words-wrapper">
					<b class="is-visible">Commercial</b>
					<!-- <b>Creative</b>
					<b>Marketing & PR</b>
					<b>Technology</b>
					<b>Fashion & luxury</b>
					<b>Retail sales</b> -->
				</span>
			</h2>
			<h3 class="c-secondary mb-30 no-margin">
				Sign-up and apply for jobs now
			</h3>
			<p class="white-text section-sub">
				Each one of your skills is seen as precious resource to us, each one
				of your personality traits are considered as an added on value.
				Joining us is allowing our recruitment expertise and personal guidance
				to bring the best out in you by choosing the most suited position.
			</p>

			<a href="{{ path('app_register') }}" class="btn border secondary waves-effect waves-light mt-40">Join us</a>
		</section>

		<section id="job_offers" class="align-center">
			<div class="job_offer_header align-center">
				<h2 class="section-title">Job offers</h2>
				<p class="section-sub">
					Just like our candidates, we offer quality, serious & reliable
					positions. Come discover them and we will put you in contact with
					the perfect team for you to form the perfect crew.
				</p>

				<div id="category_list">
					<ul class="align-center">
						<li class="active category_filter filterJobs" data-group="all">All</li>
						{% for category in categories %}
							<li class="category_filter filterJobs" data-group="{{category.slug}}">
								{{category.label}}
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>

			<div class="offers_container align-center">
				{% for job in jobsList %}
					<article class="jobOffer {% for category in job.category %}{{ category.slug }} {% endfor %}">
						<div class="card-content">
							<span class="title">
								<span class="card-title">{{job.jobTitle}}</span>
								<span class="reference">Ref.
									{{job.reference}}</span>
							</span>
							<div class="meta align-center">
								{% if job.salary %}
									<span class="align-center">
										<i class="material-icons">&#xE53E;</i>
										{{job.salary}}&euro;
									</span>
								{% endif %}


								{% if job.startingAt %}
									<span class="align-center">
										<i class="material-icons">&#xE916;</i>
										{{job.startingAt | date('Y-m-d')}}
									</span>
								{% endif %}


								{% if job.location %}
									<span class="align-center">
										<i class="material-icons">&#xE55F;</i>
										{{job.location}}
									</span>
								{% endif %}

							</div>
							<p class="truncate-text">
								{{job.description}}
							</p>
						</div>
						<div class="card-action align-center">
							<a class="" href="{{ path('app_job_detail', {id: job.id}) }}">Details</a>
							<a class="" href="{{ path('app_application', {id: job.id}) }}">Apply</a>
						</div>
					</article>
				{% endfor %}
				<div class="no-item align-center">
					<h4>Oops! There's no job</h4>
					<p>Please choose another job category</p>
				</div>
			</div>
			<a href="{{ path('app_jobs') }}" class="cta_golden btn">View all job offers</a>
		</section>
	</main>
{% endblock %}