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

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

{% block body %}
	<div class="breadcrumb-area">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="row breadcrumb_box  align-items-center">
						<div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
							<h2 class="breadcrumb-title">FAQ</h2>
						</div>
						<div class="col-lg-6  col-md-6 col-sm-12">
							<!-- breadcrumb-list start -->
							<ul class="breadcrumb-list text-center text-md-right">
								<li class="breadcrumb-item"><a href="{{ path('default') }}">Home</a></li>
								<li class="breadcrumb-item active">FAQ</li>
							</ul>
							<!-- breadcrumb-list end -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="login-register-area pb-100px pt-100px faq-area">
        <div class="container">
            <div class="row">
                <div class="ml-auto mr-auto col-lg-9">
                    <div class="checkout-wrapper">
                        <div class="inner-descripe" data-aos="fade-up" data-aos-delay="200">
                            <h4 class="title">
                                {{ section_faq ? section_faq.name : "Vous trouverez ci-dessous les questions fréquemment posées, vous trouverez peut-être la réponse par vous-même" }}
                            </h4>
                            <p>{{ section_faq ? section_faq.description : "Vestibulum imperdiet suscipit ligula vestibulum aliquet. Aenean sed odio non sapien euismod blandit. Cras elementum bibendum nisi, et aliquet diam pharetra id. Suspendisse ut tortor vel lacus dapibus finibus. Mauris laoreet eros risus, sed blandit tellus sodales vel. Nullam euismod, arcu ac ornare gravida, elit arcu interdum augue, ac congue mauris elit hendrerit quam. Ut nec dui quis tellus ultrices maximus." }}</p>
                        </div>
                        <div id="faq" class="panel-group">
                            {% if section_faq %}
                                {% for page in section_faq.cmsPages %}
                                    <div class="panel panel-default single-my-account" data-aos="fade-up" data-aos-delay="200">
                                        <div class="panel-heading my-account-title">
                                            <h3 class="panel-title"><span>{{ loop.index }} .</span> 
                                                <a data-bs-toggle="collapse" href="#my-account-1" class="collapsed" aria-expanded="true">
                                                    {{ page.name }}
                                                </a>
                                            </h3>
                                        </div>
                                        <div id="my-account-1" class="panel-collapse collapse show" data-bs-parent="#faq">
                                            <div class="panel-body">
                                                {{ page.content|raw }}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}