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

{% block body %}
    {% if slides|length > 0 %}
        <div class="slider-container rev_slider_wrapper slider-container-full-height">
            <div id="revolutionSlider" class="slider rev_slider" data-version="5.4.7" data-plugin-revolution-slider
                 data-plugin-options="{'delay': 9000, 'sliderLayout': 'fullscreen', 'gridwidth': [1140,960,720,540], 'gridheight': [900,900,900,900], 'disableProgressBar': 'on', 'responsiveLevels': [4096,1200,992,576], 'navigation' : {'arrows': { 'enable': true, 'hide_under': 767, 'style': 'slider-arrows-style-2' }, 'bullets': {'enable': true, 'style': 'bullets-style-1', 'h_align': 'center', 'v_align': 'bottom', 'space': 7, 'v_offset': 35, 'h_offset': 0}}}">
                <ul>
                    {% for slide in slides %}
                        {% if slide.spectacle is defined %}
                            <li class="slide-overlay slide-overlay-level-4" data-transition="fade">
                                <img src="http://admin.lesptitsjoueurs.com/uploads/spectacles/images/{{ slide.spectacle.image }}"
                                     alt=""
                                     data-bgposition="center center"
                                     data-bgfit="cover"
                                     data-bgrepeat="no-repeat"
                                     class="rev-slidebg">
                                <div class="tp-caption text-color-light font-weight-bold title"
                                     data-x="center"
                                     data-y="center" data-voffset="['-75','-75','-65','-55']"
                                     data-start="1300"
                                     data-fontsize="['67','67','50','35']"
                                     data-lineheight="['75','75','65','45']"
                                     data-transform_in="y:[100%];s:500;"
                                     data-transform_out="y:[100%];s:500;"
                                     data-mask_in="x:0px;y:0px;"><span>

                                    {% if slide.spectacle.type == 'CABARET' %}
                                        {{ slide.spectacle.name }}
                                    {% endif %}
                                        {% if slide.spectacle.type == 'LONG_FORM' %}
                                            {{ slide.spectacle.name }}
                                        {% endif %}
                                </span>
                                </div>
                                <div class="tp-caption text-color-light font-weight-bold date"
                                     data-x="center"
                                     data-y="center" data-voffset="['5','5','5','5']"
                                     data-start="1900"
                                     data-fontsize="['40','67','50','35']"
                                     data-lineheight="['75','75','45','45']"
                                     data-transform_in="y:[100%];s:500;"
                                     data-transform_out="y:[100%];s:500;"
                                     data-mask_in="x:0px;y:0px;"><span>
                                     le {{ slide.date|date('d/m/Y') }} à {{ slide.heure|date('H:i') }}
                                </span>
                                </div>
                                <div class="tp-caption text-color-light font-weight-bold date"
                                     data-x="center"
                                     data-y="center" data-voffset="['50','50','50','50']"
                                     data-start="2000"
                                     data-fontsize="['40','67','50','35']"
                                     data-lineheight="['75','75','65','45']"
                                     data-transform_in="y:[100%];s:500;"
                                     data-transform_out="y:[100%];s:500;"
                                     data-mask_in="x:0px;y:0px;"><span>
                                     {{ slide.salle.name }}
                                </span>
                                </div>
                                <div class="tp-caption text-color-light font-weight-light style-lesptitsjoueurs"
                                     data-x="center"
                                     data-y="center" data-voffset="['160','160','160','160']"
                                     data-start="2200"
                                     data-fontsize="['45','45','45','45']"
                                     data-transform_in="y:[100%];opacity:0;s:500;">On vous attend nombreux
                                </div>
                                {% if slide.reservationButton %}
                                    <a class="tp-caption btn btn-rounded btn-dark font-weight-semibold"
                                       href="#representations"
                                       data-hash
                                       data-hash-offset="90"
                                       data-x="center"
                                       data-y="center" data-voffset="['215','215','180','165']"
                                       data-start="2200"
                                       data-whitespace="nowrap"
                                       data-fontsize="['13','13','13','13']"
                                       data-paddingtop="['13','13','13','13']"
                                       data-paddingbottom="['13','13','13','13']"
                                       data-paddingleft="['65','65','65','45']"
                                       data-paddingright="['65','65','65','45']"
                                       data-transform_in="y:[100%];s:500;"
                                       data-transform_out="opacity:0;s:500;"
                                       data-mask_in="x:0px;y:0px;">C'est par ici</a>
                                {% endif %}
                            </li>
                        {% else %}
                            <li class="slide-overlay slide-overlay-level-4" data-transition="fade">
                                <img src="http://admin.lesptitsjoueurs.com/uploads/news/{{ slide.background }}"
                                     alt=""
                                     data-bgposition="center center"
                                     data-bgfit="cover"
                                     data-bgrepeat="no-repeat"
                                     class="rev-slidebg">
                                <div class="tp-caption text-color-light font-weight-bold title"
                                     data-x="center"
                                     data-y="center" data-voffset="['-75','-75','-65','-55']"
                                     data-start="1300"
                                     data-fontsize="['67','67','50','35']"
                                     data-lineheight="['75','75','65','45']"
                                     data-transform_in="y:[100%];s:500;"
                                     data-transform_out="y:[100%];s:500;"
                                     data-mask_in="x:0px;y:0px;">
                                        <span>
                                            {{ slide.title }}
                                        </span>
                                </div>
                                <div class="tp-caption text-color-light font-weight-bold date"
                                     data-x="center"
                                     data-y="center" data-voffset="['5','5','5','5']"
                                     data-start="1900"
                                     data-fontsize="['40','67','50','35']"
                                     data-lineheight="['75','75','45','45']"
                                     data-transform_in="y:[100%];s:500;"
                                     data-transform_out="y:[100%];s:500;"
                                     data-mask_in="x:0px;y:0px;"><span>
                                     {{ slide.subTitle }}
                                </span>
                                </div>
                                <div class="tp-caption text-color-light font-weight-bold date"
                                     data-x="center"
                                     data-y="center" data-voffset="['50','50','50','50']"
                                     data-start="2000"
                                     data-fontsize="['40','67','50','35']"
                                     data-lineheight="['75','75','65','45']"
                                     data-transform_in="y:[100%];s:500;"
                                     data-transform_out="y:[100%];s:500;"
                                     data-mask_in="x:0px;y:0px;"><span>
                                </span>
                                </div>
                                {% if slide.link %}
                                    <div class="tp-caption text-color-light font-weight-light"
                                         data-x="center"
                                         data-y="center" data-voffset="['100','100','100','100']"
                                         data-start="2200"
                                         data-fontsize="['35','35','35','35']"
                                         data-transform_in="y:[100%];opacity:0;s:500;">{{ slide.description }}
                                    </div>
                                    <div class="tp-caption text-color-light font-weight-light"
                                         data-x="center"
                                         data-y="center" data-voffset="['170','170','170','170']"
                                         data-start="2200"
                                         data-fontsize="['35','35','35','35']"
                                         data-transform_in="y:[100%];opacity:0;s:500;">
                                        <a href="{{ slide.link }}" type="button" class="btn btn-info" target="_blank">
                                            <i class="fa-solid fa-arrow-right-to-bracket"></i>&nbsp;
                                            Venez voir !!
                                        </a>
                                    </div>
                                {% else %}
                                    <div class="tp-caption text-color-light font-weight-light"
                                         data-x="center"
                                         data-y="center" data-voffset="['160','160','160','160']"
                                         data-start="2200"
                                         data-fontsize="['35','35','35','35']"
                                         data-transform_in="y:[100%];opacity:0;s:500;">{{ slide.description }}
                                    </div>
                                {% endif %}
                                {% if slide.socials %}
                                    {% set nbLinks = slide.socials.array | length %}
                                    {% if nbLinks == 3 %}
                                        {% for key, link in slide.socials.array %}
                                            <div class="tp-caption text-color-light font-weight-light style-lesptitsjoueurs stroke-to-fill"
                                                 data-x="center"
                                                 data-y="bottom" data-voffset="['80','80','80','80']"
                                                 data-hoffset="{{ key == 0 ? -80 : (key == 1 ? 0 : 80) }}"
                                                 data-start="2200"
                                                 data-fontsize="['45','45','45','45']"
                                                 data-transform_in="y:[100%];opacity:0;s:500;">
                                                <a href="{{ link.url }}"
                                                   class="social-icon si-large si-dark si-colored si-{{ link.type }}"
                                                   title="{{ link.type }}" target="_blank">
                                                    <i class="fa-brands {{ link.icon }}"></i>
                                                </a>
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                    {% if nbLinks == 2 %}
                                        {% for key, link in slide.socials.array %}
                                            <div class="tp-caption text-color-light font-weight-light style-lesptitsjoueurs stroke-to-fill"
                                                 data-x="center"
                                                 data-y="bottom" data-voffset="['80','80','80','80']"
                                                 data-hoffset="{{ key == 0 ? -40 : 40 }}"
                                                 data-start="2200"
                                                 data-fontsize="['45','45','45','45']"
                                                 data-transform_in="y:[100%];opacity:0;s:500;">
                                                <a href="{{ link.url }}"
                                                   class="social-icon si-large si-dark si-colored si-{{ link.type }}"
                                                   title="{{ link.type }}" target="_blank">
                                                    <i class="fa-brands {{ link.icon }}"></i>
                                                </a>
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                    {% if nbLinks == 1 %}
                                        {% for key, link in slide.socials.array %}
                                            <div class="tp-caption text-color-light font-weight-light style-lesptitsjoueurs stroke-to-fill"
                                                 data-x="center"
                                                 data-y="bottom" data-voffset="['80','80','80','80']"
                                                 data-start="2200"
                                                 data-fontsize="['45','45','45','45']"
                                                 data-transform_in="y:[100%];opacity:0;s:500;">
                                                <a href="{{ link.url }}"
                                                   class="social-icon si-large si-dark si-colored si-{{ link.type }}"
                                                   title="{{ link.type }}" target="_blank">
                                                    <i class="fa-brands {{ link.icon }}"></i>
                                                </a>
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                {% endif %}
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>
    {% endif %}
    <div class="v-page-wrap no-bottom-spacing no-top-spacing">
        {% if members|length > 0 %}
            <div class="v-parallax v-bg-stylish" id="intro">
                <div class="container">
                    <div class="row center">
                        <div class="col-sm-12">
                            <p class="v-smash-text-large">
                                <span>Nous sommes les p'tits joueurs</span>
                            </p>
                            <div class="horizontal-break"></div>

                            <p class="mb-4 v-lead">
                                Les P'tits Joueurs est une troupe d'improvisation théâtrale de Bordeaux proposant des
                                cabarets, des spectacles longs formats (longform) à la recherche d'un moment unique avec
                                le public, entre folie et paresse, entre amour et drame.
                                <br/>
                                Notre but: faire avec peu quelque chose de grand. Pour vous, pour nous !
                            </p>
                            <p class="mb-8 v-lead style-lesptitsjoueurs text-center text-7">
                                Le jeu est notre passion, l'impro est notre art.
                            </p>
                        </div>
                    </div>

                    <div class="row">
                        {% for member in members %}
                            <div class="col-sm-2">
                                <div class="team-member img-circle style-1">
                                    <div class="member-photo">
                                        {% if member.photoPublique %}
                                            <img class="img-responsive" src="{{ (photo_url ~ member.photoPublique) }}">
                                        {% else %}
                                            <img class="img-responsive" src="{{ asset('img/avatar.png') }}">
                                        {% endif %}
                                    </div>
                                    <div class="member-info">
                                        <div class="member-name">
                                            <h3 class="name">{{ member.firstname }}</h3>
                                        </div>
                                        <div class="member-position">
                                            {% if member.description is defined %}
                                                <span>{{ member.description }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    {% if spectacles > 0 %}
        <div class="v-page-wrap clearfix no-bottom-spacing">
            <div class="v-parallax  v-bg-stylish v-bg-stylish-v4" id="intro">
                <div class="container">
                    <div class="row center">
                        <div class="col-sm-12">
                            <p class="v-smash-text-large">
                                <span>Spectacle</span>
                            </p>
                            <div class="horizontal-break"></div>
                        </div>
                    </div>
                    {% for spectacle in spectacles %}
                        <article class="portfolio-article">
                            <div class="v-portfolio-item-content">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <figure class="media-wrap no-margin-bottom text-center">
                                            <img class="v-animation spectacle-affiche"
                                                 src="{{ affiche_url ~ spectacle.image }}"
                                                 data-animation="fade-from-bottom" data-delay="200">

                                            <div class="v-spacer col-sm-12 v-height-standard"></div>
                                        </figure>
                                    </div>

                                    <div class="col-sm-6">
                                        <section class="article-body-wrap">

                                            <section class="portfolio-detail-description">
                                                <div class="body-text clearfix">
                                                    <div class="v-heading-v3">
                                                        <h2 class="v-smash-text-large">{{ spectacle.name }}</h2>
                                                        <div class="horizontal-break"></div>
                                                    </div>
                                                    <p>
                                                        {{ spectacle.description }}
                                                    </p>
                                                </div>
                                            </section>

                                            <ul class="list-unstyled mb-0" id="representations">
                                                <li class="media mb-1">
                                                    <div class="d-flex w-40 w-sm-30">
                                                        <h4 class="mt-0 mb-1">Prochaines dates</h4>
                                                    </div>
                                                    <div class="media-body">
                                                        <p class="text-muted mb-1">
                                                            <!-- 03 novembre 2023 à 20h30 (Jabot's) -->
                                                            {% for representation in spectacle.representations %}
                                                                {{ representation.date|date('d') ~ ' ' ~ representation.date|date('F')|trans  ~ ' ' ~ representation.date|date('Y') }} à
                                                                {{ representation.heure|date('H:i') }}
                                                                &nbsp;({{ representation.salle.name }})<br/>
                                                                {% if representation.reservationButton %}
                                                                    &nbsp;{{ representation.reservationButton | raw }}
                                                                    <br/>
                                                                {% endif %}
                                                            {% endfor %}
                                                        </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

    {% if medias.total > 0 %}
        <div class="v-page-wrap no-bottom-spacing no-top-spacing v-bg-stylish">
            <div class="row center">
                <div class="col-sm-12">
                    <p class="v-smash-text-large">
                        <span>Portfolio</span>
                    </p>
                    <div class="horizontal-break"></div>

                    <p class="mb-4 v-lead">
                        Quelques photos et vidéos, pour revivre nos meilleurs moments
                    </p>
                </div>
            </div>
            <div class="container">
                <div class="row">

                    <div class="col-sm-12">

                        <div class="v-portfolio-wrap">
                            <!--                       <div class="v-portfolio-filter-wrap row clearfix">
                                                       <ul class="v-portfolio-filter-nav bar-styling filtering col-sm-12 clearfix">
                                                           <li class="all selected"><a data-filter="*" href="#"><span class="item-name">All</span><span class="item-count">0</span></a></li>
                                                           <li><a href="#" class="beautiful" data-filter=".beautiful"><span class="item-name">Beautiful</span><span class="item-count">0</span></a></li>
                                                           <li><a href="#" class="creation" data-filter=".creation"><span class="item-name">Creation</span><span class="item-count">0</span></a></li>
                                                           <li><a href="#" class="business" data-filter=".business"><span class="item-name">Business</span><span class="item-count">0</span></a></li>
                                                           <li><a href="#" class="nature" data-filter=".nature"><span class="item-name">Nature</span><span class="item-count">0</span></a></li>
                                                           <li><a href="#" class="lifestyle" data-filter=".lifestyle"><span class="item-name">Lifestyle</span><span class="item-count">0</span></a></li>
                                                       </ul>
                                                   </div>
                           -->
                            <ul class="v-portfolio-items masonry-items masonry-fw filterable-items column-3 row clearfix">
                                {% for media in medias.items %}
                                    <li class="clearfix v-portfolio-item col-sm-4 masonry-item masonry-gallery-item business">
                                        {% if media.photo %}
                                            <figure class="animated-overlay" data-toggle="lightbox"
                                                    href="{{ media.photolink | kiwi_image }}"
                                                    data-type="image"
                                                    data-footer="{{ media|lightbox_footer }}"
                                                    data-gallery="gallery">
                                                <img src="{{ media.photolink | kiwi_image }}"
                                                     class="img-fluid"/>
                                                {% if media.link is defined %}
                                                    <!--<a href="{{ media.link }}" class="link-to-post" target="_blank"></a>-->
                                                {% endif %}
                                                <figcaption>
                                                    <div class="thumb-info thumb-info-extended">
                                                        {% if media.titre is defined %}
                                                            <h4>{{ media.titre }}</h4>
                                                        {% endif %}
                                                        {% if media.description is defined %}
                                                            <h5>{{ media.description }}</h5>
                                                        {% endif %}
                                                        <i class="fa fa-angle-right"></i>
                                                    </div>
                                                </figcaption>
                                            </figure>
                                        {% else %}
                                            <figure class="animated-overlay" data-toggle="lightbox"
                                                    href="https://www.youtube.com/watch?v={{ media.codevideo }}"
                                                    data-gallery="gallery">
                                                <img src="https://img.youtube.com/vi/{{ media.codevideo }}/0.jpg"
                                                     class="img-fluid"/>
                                                {% if media.link is defined %}
                                                    <!--<a href="{{ media.link }}" class="link-to-post" target="_blank"></a>-->
                                                {% endif %}
                                                <figcaption>
                                                    <div class="thumb-info thumb-info-extended">
                                                        {% if media.titre is defined %}
                                                            <h4>{{ media.titre }}</h4>
                                                        {% endif %}
                                                        {% if media.description is defined %}
                                                            <h5>{{ media.description }}</h5>
                                                        {% endif %}
                                                        <i class="fa fa-play"></i>
                                                    </div>
                                                </figcaption>
                                            </figure>
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}