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

{% block body %}
    <div class="container-faq">
        <h1 class="title-faq">Foires aux questions - Quali-Distrib</h1>
        <div class="">
            <p>Nous sommes là pour répondre à vos nombreuses questions</p>
        </div>
                <div class="faq">
                    <div class="row row-cols-3">
                        <div class="col">
                            <section class="answer border-bottom">
                                <img src="{{ asset('build/images/startup.jpg')}}" alt="Village" class="section-faq-img">
                                    <div class="section-faq-body">
                                        <h4 class="section-faq-title ">Questions Générales</h4>

                                        <button type="button" class="btn btn-faq" data-toggle="modal" data-target="#faqG">
                                        Nous avons les réponses !
                                        </button>
                                    </div>
                            </section>
                        </div>
                        <div class="col">
                            <section class="answer border-bottom">
                                <img src="{{ asset('build/images/office.jpg')}}" alt="Village" class="section-faq-img">
                                    <div class="section-faq-body">
                                        <h4 class="section-faq-title ">Infos pratiques</h4>

                                        <button type="button" class="btn btn-faq" data-toggle="modal" data-target="#infosP">
                                        Jetez un coup d'oeil !
                                        </button>
                                    </div>
                            </section>
                        </div>
                        <div class="col">
                            <section class="answer border-bottom">
                                <img src="{{ asset('build/images/people.jpg')}}" alt="Village" class="section-faq-img">
                                    <div class="section-faq-body">
                                        <h4 class="section-faq-title ">Consommateurs</h4>

                                        <button type="button" class="btn btn-faq" data-toggle="modal" data-target="#faqConso">
                                        Comment pouvons-nous vous aider ?
                                        </button>
                                    </div>
                            </section>
                        </div>
                        <div class="col">
                        
                            <section class="answer border-bottom">
                                <img src="{{ asset('build/images/mairie.jpg')}}" alt="Village" class="section-faq-img">
                                    <div class="section-faq-body">
                                        <h4 class="section-faq-title ">Municipalité</h4>

                                        <button type="button" class="btn btn-faq" data-toggle="modal" data-target="#faqM">
                                        Nous allons vous aiguillier !
                                        </button>
                                    </div>
                            </section>
                        </div>
                        <div class="col">
                            <section class="answer border-bottom">
                                <img src="{{ asset('build/images/boulangerie.jpg')}}" alt="Village" class="section-faq-img">
                                    <div class="section-faq-body">
                                        <h4 class="section-faq-title ">Artisan</h4>

                                        <button type="button" class="btn btn-faq" data-toggle="modal" data-target="#faqA">
                                        Collaborons ensemble !
                                        </button>
                                    </div>
                            </section>
                        </div>
                    </div>

                </div>
            

        </div>


<!-- Modal -->
<div class="modal fade" id="faqG" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="staticBackdropLabel">FAQ - Questions Générales</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="infosP" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="staticBackdropLabel">FAQ - Infos Pratiques</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="faqConso" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="staticBackdropLabel">FAQ - Consommateurs</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="faqM" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="staticBackdropLabel">FAQ - Municipalité</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="faqA" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="staticBackdropLabel">FAQ - Artisan</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script type="text/javascript">
        $('#faqG').on('shown.bs.modal', function () {
        $('#faqG').trigger('focus')
})
        </script
{% endblock body%}