{% extends "base.html.twig" %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/faq.css') }}"/>
{% endblock %}
{% 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>

        </div>
        <section class="secondrow">
            <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>
        </section>

    </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 %}