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

{% block metadesc %}
Bienvenue sur le site internet des Cinem'Aude. Vous trouverez ici toutes les salles de cinéma autour de chez vous ainsi que tous les films à l'affiche.
{% endblock %}

{% block title %}
Accueil
{% endblock %}

{% block body %}
    {#
    <h1>Bienvenue sur la page d'accueil</h1>
    <h2>Reste plus qu'à l'intégrer...</h2>
    <a href="{{ path('movie_theater') }}">Accéder à la liste des salles</a><br>
    <a href="{{ path('contact') }}">Accéder au formulaire de contact</a>
    #}

    <!-- DEBUT DU SLIDER -->

    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            {% for slide in get_slider("main").slides %}

                <div class="carousel-item {% if slide.ranking == 0 %} active{% endif %}"
                     style="background-image:url( {{ slide | slide_image }} )">
                    <div class="car-desc">
                        <h1>{{ slide.infos.title|upper }}</h1>
                        <p>{{ slide.infos.description|u.truncate(100, '...')|raw }}</p>
                        {% if slide.type != 'medium' %}
                        <a href="{{ path(slide.type, {slug: slide.infos.slug}) }}">
                            <div class="boutton">
                                <span class="material-icons">
                                    play_circle_outline
                                </span>
                                <span>
                                {% if slide.type == 'movie' %}
                                    regarder la bande annonce
                                {% elseif slide.type == 'article' %}
                                    lire la suite
                                {% endif %}
                                </span>
                            </div>
                        </a>
                        {% endif %}
                    </div>
                </div>

            {% endfor %}

        </div>
    </div>

    <!-- FIN DU SLIDER -->

    <!-- DEBUT DES FILMS À L'AFFICHE -->

    <section class="faa">

        <div class="parttitle">

            <div class="icobloc">
            <span class="material-icons">
                videocam
            </span>
            </div>

            <span class="pttitle">
            <h2>derniers films à l'affiche</h2>
        </span>

        </div>
{#
        <div class="partdesc">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure delectus sunt
            nostrum nemo impedit, odio accusantium molestiae laborum quasi. Eveniet porro
            sunt omnis aperiam repellendus quidem qui quo, praesentium dolor dolorem maxime
            dolorum ad hic possimus numquam tenetur fugit dolores consequuntur autem dicta
            voluptate itaque nostrum iste? Tempore minus assumenda cupiditate rem facere.
            Veniam laboriosam, repellat nam velit perferendis nemo odit quae, incidunt quos,
            quidem recusandae in praesentium! Doloribus eius quasi, accusamus ratione illo
            suscipit vel nihil eligendi impedit tempore saepe delectus pariatur facilis, sed
            perspiciatis. Laboriosam veritatis ullam et animi, facere eveniet esse saepe,
            molestiae laborum natus eaque adipisci.

        </div>
#}
        <div class="partaffiches">
            <div class="container-fluid">
                <div class="row justify-content-between">

                    {% for slide in get_slider("film").slides[0:5] %}

                        <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 p-0 d-flex justify-content-center">
                            <a href="{{ path('movie', {slug: slide.infos.slug}) }}">
                                <div class="bgba">
                                    <div
                                            class="blocaffiche"
                                            style="background-image:url({{ slide | slide_image }});">
                                        
                                    </div>
                                    <div class="filmtitle">{{ slide.infos.title|u.truncate(20, '...') }}</div>
                                </div>
                            </a>
                        </div>

                    {% endfor %}

                </div>
            </div>
            <div class="bouttonpart">
            <a href="{{ path('movies') }}" style:"height:20px !important;">
                <div class="boutton">
                    <span class="material-icons">
                        keyboard_arrow_right
                    </span>
                    <span>voir tous les films à l'affiche</span>
                </div>
            </a>
        </div>
        </div>
    </section>

    <!-- FIN DES FILMS À L'AFFICHE -->

    <!-- DEBUT DE LA NEWSLETTER -->

    <div class="newsletter"
         style="background-image:url({{ asset('images/cinemadehors.jpg')}})">

        <div class="container-fluid">

            <div class="row">

                <div class="col-12 col-sm-12 col-md-12 col-lg-7 col-xl-7 p-0">

                    <div class="parttitle">

                        <div class="icobloc" style="background-color:white;">
    <span class="material-icons" style="color:var(--first-color)">
    description
    </span>
                        </div>

                        <span class="pttitle">
    <h2 style="color:white !important">inscrivez-vous à notre newsletter</h2>
</span>

                    </div>

                </div>

                <div class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 p-0">

                    <div class="nlinput w-auto">

                        <div class="col-auto">

                            {{ form_start(form, {'action': path('newsletter')}) }}
                            <div class="input-group mb-2">
                                {{ form_row(form.email) }}
                                {{ form_row(form.submit) }}
                            </div>
                            {{ form_end(form) }}
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- FIN DE LA NEWSLETTER -->

    <!-- DEBUT DES ARTICLES -->

    <section class="faa">

        <div class="parttitle">

            <div class="icobloc">
            <span class="material-icons">
                tv
            </span>
            </div>

            <span class="pttitle">
            <h2>actualités ciné</h2>
        </span>

        </div>
{#
        <div class="partdesc">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure delectus sunt
            nostrum nemo impedit, odio accusantium molestiae laborum quasi. Eveniet porro
            sunt omnis aperiam repellendus quidem qui quo, praesentium dolor dolorem maxime
            dolorum ad hic possimus numquam tenetur fugit dolores consequuntur autem dicta
            voluptate itaque nostrum iste? Tempore minus assumenda cupiditate rem facere.
            Veniam laboriosam, repellat nam velit perferendis nemo odit quae, incidunt quos,
            quidem recusandae in praesentium! Doloribus eius quasi, accusamus ratione illo
            suscipit vel nihil eligendi impedit tempore saepe delectus pariatur facilis, sed
            perspiciatis. Laboriosam veritatis ullam et animi, facere eveniet esse saepe,
            molestiae laborum natus eaque adipisci.

        </div>
#}
        <div class="actuspart">

            {% for slide in get_slider("actu").slides[:1] %}

                <div class="bigactusbloc">

                    <div
                            class="miniature"
                            style="background-image:url({{ slide | slide_image }});">

                        <div class="actusdate">{{ slide.infos.createdAt|date("d/m") }}</div>

                    </div>

                    <div class="actusinfos">

                <span class="material-icons">
                    category
                </span>
                        {{ slide.infos.type|upper }}

                        <span class="material-icons">
                    person
                </span>
                        {{ slide.infos.author.fullName }}

                    </div>
                    <a href="{{ path('article', {slug: slide.infos.slug}) }}" class="spelink">
                    <div class="actustitle"> <h3> {{ slide.infos.title|u.truncate(20, '...') }}</h3></div></a>


                    <div class="actuscontent">{{ slide.infos.description|u.truncate(100, '...')|raw }}
                        <a href="{{ path('article', {slug: slide.infos.slug}) }}">Lire la suite</a>
                    </div>

                </div>

            {% endfor %}
            {% for slide in get_slider("actu").slides[1:2] %}

                <div class="smallactusbloc">

                    <div
                            class="miniature"
                            style="background-image:url({{ asset ( slide | slide_image ) }});">

                        <div class="actusdate">{{ slide.infos.createdAt|date("d/m") }}</div>

                    </div>

                    <div class="actusinfos">

                <span class="material-icons">
                    category
                </span>
                        {{ slide.infos.type|upper }}

                        <span class="material-icons">
                    person
                </span>
                        {{ slide.infos.author.fullName }}

                    </div>
<a href="{{ path('article', {slug: slide.infos.slug}) }}" class="spelink">
                    <div class="actustitle"><h3>{{ slide.infos.title|u.truncate(20, '...') }}</h3></div></a>

                    <div class="actuscontent">{{ slide.infos.description|u.truncate(100, '...')|raw }}
                        <a href="{{ path('article', {slug: slide.infos.slug}) }}">Lire la suite</a>
                    </div>

                </div>

            {% endfor %}

        </div>

        <div class="bouttonpart">
            <a href="{{ path('articles') }}" style:"height:20px !important;">
                <div class="boutton">
                    <span class="material-icons">
                        keyboard_arrow_right
                    </span>
                    <span>voir tous les articles</span>
                </div>
            </a>
        </div>

        </div>

    </section>

    <!-- FIN DES ARTICLES -->

    <!-- DEBUT DES PARTENAIRES -->

    <div class="partenairespart">

        <div class="container-fluid">

            <div class="row d-flex align-items-center">

                <div class="col-12 col-sm-12 col-md-4 d-flex justify-content-center partenairelogo p-5"><a href="https://www.aude.fr/"><img
                                src="https://upload.wikimedia.org/wikipedia/fr/thumb/a/af/Aude_%2811%29_logo.svg/998px-Aude_%2811%29_logo.svg.png"
                                style="height:100px" alt=""></a></div>

                <div class="col-12 col-sm-12 col-md-4 d-flex justify-content-center partenairelogo p-5"><a href="https://www.laregion.fr/"><img
                                src="https://upload.wikimedia.org/wikipedia/fr/thumb/8/89/Logo_Occitanie_2017.svg/1200px-Logo_Occitanie_2017.svg.png"
                                style="height:100px" alt=""></a></div>

                <div class="col-12 col-sm-12 col-md-4 d-flex justify-content-center partenairelogo p-5"><a href="https://accilr.net/"><img
                                src="https://accilr.net/images/logo_accilr.png" style="height:100px" alt=""></a></div>

            </div>

        </div>

    </div>

    <!-- FIN DES PARTENAIRES -->

    <!-- DEBUT DES RS -->

    <div
            class="socialpart d-lg-block d-none"
            style="background-image:url({{ asset('images/cinemavoiture.jpg')}});">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 d-flex justify-content-center align-items-center" style="height:100vh;">
                <!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/70a6e5c8e3e550b98ae0df16aee0a427.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:50%;border:0;overflow:hidden;background-color:white;"></iframe>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 d-flex justify-content-center align-items-center" style="height:100vh;">
                    <div class="fb-page w-50" data-href="https://www.facebook.com/cinemaude" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/cinemaude" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/cinemaude">Cinem&#039;Aude</a></blockquote></div>            
                </div>
            </div>
        </div>
</div>
    <!-- FIN DES RS -->
<div id="fb-root"></div>
{% endblock %}

{% block javascripts %}
    <script>
        $(function(){
            jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
        });
    </script>

    
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="tq1NwqvH"></script>
{% endblock %}