{% extends "web/layout.html.twig" %}
{% block meta %}
    <title>{{ title }}</title>
    <meta name="description" content="{{ description }}" />
    <!-- Schema.org markup -->
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebSite",
            "url": "{{ url(app.request.attributes.get('_route')) }}"
        }
    </script>
    <link rel="alternate" hreflang="ca" href="{{ url(app.request.attributes.get('_route') , {_locale: 'ca'}) }}" />
    <link rel="alternate" hreflang="en" href="{{ url(app.request.attributes.get('_route') , {_locale: 'en'}) }}" />
    <link rel="alternate" hreflang="es" href="{{ url(app.request.attributes.get('_route') , {_locale: 'es'}) }}" />
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{ title }}">
    <meta name="twitter:description" content="{{ description }}">
    <meta name="twitter:image" content="{{ absolute_url(asset('/build/images/web/logo-header-mobile.png') ) }}">
    <!-- Open Graph data -->
    <meta property="og:title" content="{{ title }}" />
    <meta property="og:url" content="{{ url(app.request.attributes.get('_route') ) }}">
    <meta name="og:image" content="{{ absolute_url(asset('/build/images/web/logo-header-mobile.png') ) }}">
    <meta property="og:description" content="{{ description }}" />
    <meta property="og:site_name" content="Justicialistas" />
{% endblock %}
{% block content %}
    <section class="store-container">
        <div class="row">
            <section class="breadcrumb-container">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-12 title-container">
                            <h6>
                                <a href="{{ path("web_home") }}">{{ 'faqs.inicio'|trans({}, 'faqs') }}</a> >
                                {{ 'faqs.faqs'|trans({}, 'faqs') }}
                            </h6>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section-4 reveal">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-lg-7">
                            <h1>{{ 'faqs.faqs'|trans({}, 'faqs') }}</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section-4 reveal seccion-accordion">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-10 col-12">
                            <div class="accordion accordion-flush" id="accordionQuestions">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingOne">
                                        <button class="accordion-button collapsed"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#flush-collapseOne"
                                                aria-expanded="false"
                                                aria-controls="flush-collapseOne">
                                            {{ 'faqs.titulo1'|trans({}, 'faqs') }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapseOne"
                                         class="accordion-collapse collapse"
                                         aria-labelledby="flush-headingOne"
                                         data-bs-parent="#accordionQuestions">
                                        <div class="accordion-body">
                                            <p>{{ 'faqs.texto1'|trans({}, 'faqs') }} :</p>
                                            <p>{{ 'faqs.texto2'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto3'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto4'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto5'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto6'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto7'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto8'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto9'|trans({}, 'faqs') }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingTwo">
                                        <button class="accordion-button collapsed"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#flush-collapseTwo"
                                                aria-expanded="false"
                                                aria-controls="flush-collapseTwo">
                                            {{ 'faqs.titulo2'|trans({}, 'faqs') }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapseTwo"
                                         class="accordion-collapse collapse"
                                         aria-labelledby="flush-headingTwo"
                                         data-bs-parent="#accordionQuestions">
                                        <div class="accordion-body">
                                            <p>{{ 'faqs.texto10'|trans({}, 'faqs') }}:</p>
                                            <p>{{ 'faqs.texto46'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto11'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto12'|trans({}, 'faqs') }} :</p>
                                            <p>{{ 'faqs.texto47'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto13'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto14'|trans({}, 'faqs') }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingThree">
                                        <button class="accordion-button collapsed"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#flush-collapseThree"
                                                aria-expanded="false"
                                                aria-controls="flush-collapseThree">
                                            {{ 'faqs.titulo3'|trans({}, 'faqs') }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapseThree"
                                         class="accordion-collapse collapse"
                                         aria-labelledby="flush-headingThree"
                                         data-bs-parent="#accordionQuestions">
                                        <div class="accordion-body">
                                            <p>{{ 'faqs.texto15'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto16'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto17'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto18'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto19'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto21'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto22'|trans({}, 'faqs') }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingFour">
                                        <button class="accordion-button collapsed"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#flush-collapseFour"
                                                aria-expanded="false"
                                                aria-controls="flush-collapseFour">
                                            {{ 'faqs.titulo4'|trans({}, 'faqs') }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapseFour"
                                         class="accordion-collapse collapse"
                                         aria-labelledby="flush-headingFour"
                                         data-bs-parent="#accordionQuestions">
                                        <div class="accordion-body">
                                            <p>{{ 'faqs.texto23'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto24'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto25'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto26'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto27'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto28'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto29'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto30'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto31'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto32'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto33'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto34'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto35'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto36'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto37'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto38'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto39'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto40'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto41'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto42'|trans({}, 'faqs') }}</p>
                                            <p>{{ 'faqs.texto43'|trans({}, 'faqs') }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingFive">
                                        <button class="accordion-button collapsed"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#flush-collapseFive"
                                                aria-expanded="false"
                                                aria-controls="flush-collapseFive">
                                            {{ 'faqs.titulo5'|trans({}, 'faqs') }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapseFive"
                                         class="accordion-collapse collapse"
                                         aria-labelledby="flush-headingFive"
                                         data-bs-parent="#accordionQuestions">
                                        <div class="accordion-body">
                                            <p>{{ 'faqs.texto44'|trans({}, 'faqs') }}</p>
                                            <div class="spacer"></div>
                                            <strong>
                                                <a href="{{ asset("images/Talles-Justicialistas-1-2048x2048-1-1536x1536.jpg") }}" class="just-button" target="_blank">
                                                    {{ 'faqs.texto45'|trans({}, 'faqs') }}
                                                </a>
                                            </strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </section>
{% endblock %}