{% set listeFaqs= app_get_faq_footer('faq', sylius.localeCode, sylius.channel.code ) %}
<section class="bloc-faq-index pb-4 pb-md-5 px-3">
<div class="max-container-2 px-0">
<div class="row no-gutters">
<div class="col-lg col-md-8 col-12 pr-lg-3">
<div class="pr-lg-5 pr-md-4">
<h2 class="title-medium color-blue-s text-left">{{'app.common.frequently_questions'|trans}}</h2>
<div class="faq-accordion pt-md-3">
{% set faq_nbr = 0 %}
{% for item in listeFaqs %}
{% set faq_nbr = faq_nbr + 1 %}
{% if faq_nbr < 5 %}
<div class="accordion-bit mx-md-0 mx-n3 mb-md-3 mb-0" id="faq-{{ item.id }}">
<h3 class=" card-header color-blue-s font-seize font-pro-bold px-0 has-border-bottom py-md-2 py-3 bg-transparent px-md-0 px-3 d-flex justify-content-between align-items-center"><span>{{ item.question }} </span><span class="d-block d-md-none pl-2"><i class="icon-down-open-big color-orange"></i></span></h3>
<div class="faq-answer collapse pt-3 pt-md-2 px-3 px-md-0 text-grey fontsize-normal ">
<p>{{ item.answer|raw }}</p>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="pt-2">
<a href="{{ path('bitbag_sylius_cms_plugin_shop_frequently_asked_question_index') }}" class="fontsize-normal color-blue-s font-pro-bold" title="{{'app.common.see_all_faq'|trans}}"> > <span class="text-underline"> {{'app.common.see_all_faq'|trans}}</span></a>
</div>
</div>
</div>
{% set media_faq = app_get_media_image_by_code('media_faq', sylius.localeCode, sylius.channel.code) %}
{% if media_faq is not null %}
<div class="col-lg-auto col-4 d-none d-md-block">
<div class="object-fit-img minw-img h-100 wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.2s">
{% if media_faq.path is not null %}
<img src=" {{ media_faq.path }}" alt="{{ media_faq.name }}"/>
{% else %}
<img src="{{asset('images/img_faq.jpg')}}" alt="{{ media_faq.name }}"/>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</section>