{% extends 'front/base.html.twig' %}
{% block title %}
	{{ home_contents.home_page_title.value|striptags }}
{% endblock %}

{% block body %}
	{% include "front/_nav.html.twig" with { 'navbarClass' : 'navbar-dark' } %}
	<!-- Carousel -->
	<section class="section section-top section-full">
		<div id="carouselIndicators" class="carousel slide" data-bs-ride="carousel">
			<ol class="carousel-indicators">
                {% for i in 1..carousels|length%}
                <li data-bs-target="#carouselIndicators" data-bs-slide-to="{{ i - 1}}" class="{{ loop.first ? 'active' : '' }}" ></li>
                {% endfor %}
            </ol>
            <div class="carousel-inner">
                {% for carousel in carousels %}
                    <div class="carousel-item {{ loop.first ? 'active' : '' }} align-items-center justify-content-center" style="background-image: url('{{ asset(carousel.image) }}');">
                        <div class="overlay"></div>
                        <div class="carousel-caption text-center">
                            <h2>{{ carousel.title }}</h2>
                            <p class="lead">{{ carousel.description }}</p>
                            <a href="{{ path('app_contact') }}" class="btn btn-outline-primary text-white">CONTACT RAPIDE</a>
                        </div>
                    </div>
                {% endfor %}
            </div>
			<!-- Controls -->
			<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselIndicators" role="button" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Next</span>
			</a> 
		</div>
	</section>

	<section>
		<div class="album py-5 bg-body-tertiary">
			<div class="container">
				<h2 class="text-center mb-4">
					{{ home_contents.home_card_title.value|striptags }}
				</h2>
				<p class="text-muted text-center mb-5">
					{{ home_contents.home_card_text.value|raw }}
				</p>
				<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
					{% for card in home_cards %}
						<div class="col">
							<div class="card shadow-sm">
								<div class="card-img-top">
									<img src="{{ asset(card.image) }}" alt="App landing" class="img-fluid">
								</div>
								<div class="card-body">
									<h4 class="card-title">
										{{ card.title }}
									</h4>
									<p class="card-text text-muted">{{ card.description }}</p>
									<a href="{{ path('app_contact') }}" class="btn btn-outline-primary">CONTACT RAPIDE</a>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</section>

{% endblock %}