{% extends "base.twig" %}
  {% block content %}

    {#  HEADER  #}
    <div class="home-header">
        <div class="home-header__image"><img src="{{head_image.url}}" alt="{{head_image.alt}}"/></div>
        <div class="home-header__wrapper">
            <div class="home-header__content">
                <h1 class="home-header__title big-title__littler full-white">{{head_title}}</h1>
                <div class="home-header__subtitle title-lev2 orange">{{head_subtitle}}</div>
                <div class="home-header__text">{{head_content}}</div>
            </div>
            <div class="home-header__links">
                <a href="https://commande-en-ligne.laddition.com/commande-en-ligne/brasseriepark" target="_blank" rel="noopener" class="cta">Reservation</a>
                <a href="tel:0478893203" class="cta cta-phone">04 78 89 32 03</a>
            </div>
            {% if istoday %}
                <div class="home-header__menu">
                    <div class="home-header__menu-title">Plat du jour :</div>
                    <div class="home-header__menu-item">{{day_menu}}</div>
                </div>
            {% endif %}
        </div>
    </div>
    {# <div class="home-header d-flex align-items-center" style="background-image: url('{{head_img}}');">
        {% if head_vid %}
            <video autoplay loop muted src="{{head_vid}}"></video>
        {% endif %}
        <div class="wrapper">
            <div class="row justify-content-center justify-content-lg-start">
                <div class="col-xl-5 col-lg-6 col-md-8">
                    <div class="home-header__content">
                        <span class="big-title white">Sobeer</span>
                        <h1 class="cursive-title white">{{head_title}}</h1>
                        <h2 class="title-lev2 white">{{head_subtitle}}</h2>
                        <div class="editor-text">{{head_txt}}</div>
                        <a href="{{head_cta.url}}" class="btn-lev1 green" {{head_cta.target != '' ? "target=" ~ head_cta.target : ''}}>
                            <span class="btn_label">{{head_cta.title}}</span>
                            <span class="btn_label-hover">{{head_cta.title}}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <a href="#leConcept" class="scrolldown" id="scrollDown"><span>Découvrez le concept So Beer</span></a>
    </div> #}

    {#  LE CONCEPT  #}
    <div class="wrapper" id="leConcept">
        {# <div class="home-concept">
            <span class="big-title concept-title-1 black parallax" data-start="-50px" data-end="10px">{{concept_big_1}}</span>
            <span class="big-title concept-title-2 black d-none d-md-block parallax" data-start="100px" data-end="-50px">{{concept_big_2}}</span>
            <div class="row no-gutters my-5">
                <div class="col-xl-4 col-lg-6">
                    <h2 class="title-lev1">{{concept_title}}</h2>
                    <span class="title-lev2 green">{{concept_subtitle}}</span>
                    <div class="editor-text">
                        {{concept_txt}}
                    </div>
                    <a href="{{head_cta.link}}" class="btn-lev1 green">
                        <span class="btn_label">{{head_cta.label}}</span>
                        <span class="btn_label-hover">{{head_cta.label}}</span>
                    </a>
                </div>
                <div class="col-xl-7 col-lg-6">
                    <div class="img__container">
                        <img src="{{concept_img}}" class="img img_1 parallax" data-start="-10%" data-end="5%" alt="">
                        <img src="{{concept_img_2}}" class="img img_2 parallax" data-start="15%" data-end="-10%" alt="">
                        <div class="texture" style="background-image: url('{{concept_texture}}');"></div>
                    </div>
                </div>
            </div>
        </div> #}

        {#  SLIDER CONCEPT  #}
        {#  Deux sliders : un pour l'image et un pour le texte #}
        <div class="home-slider">
            <div class="texture parallax" data-start="-100px" data-end="50px" id="textSliderConcept" style="background-image: url('{{concept_slider_texture}}');"></div>
            <div class="slider slider-img">
                {% for item in concept_slider %}
                    <div class="slide" style="background-image: url('{{item.img}}');"></div>
                {% endfor %}
            </div>
            <div class="slider slider-content">
                {% for item in concept_slider %}
                    <div class="slide">
                        <span class="title-lev1 white">{{item.title}}</span>
                        <span class="title-lev2 orange">{{item.subtitle}}</span>
                        <p style="color: #fff;">{{item.txt}}</p>
                    </div>
                {% endfor %}
            </div>

            {#  Nav pour les deux sliders  #}
            <div class="slick-nav parallax" data-start="10px" data-end="-100px" data-duration="0.1" style="z-index: 10;">
                <a href="#" class="slick-arrow concept-prev">
                    <svg width="23" height="11" viewBox="0 0 23 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21.7692 4.45544L17.4778 0.164091L16.6195 1.02236L20.3032 4.70605L0.607667 4.70605L0.607667 5.92136L20.3032 5.92136L16.6195 9.60506L17.4778 10.4633L21.7692 6.17198L22.6274 5.31371L21.7692 4.45544Z" fill="#C3AA55"/>
                    </svg>
                </a>
                <a href="#" class="slick-arrow concept-next">
                    <svg width="23" height="11" viewBox="0 0 23 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21.7692 4.45544L17.4778 0.164091L16.6195 1.02236L20.3032 4.70605L0.607667 4.70605L0.607667 5.92136L20.3032 5.92136L16.6195 9.60506L17.4778 10.4633L21.7692 6.17198L22.6274 5.31371L21.7692 4.45544Z" fill="#C3AA55"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>


    {#  SUGGESTIONS  #}
    {#  Affichage de 3 suggestions si elles ont le "display home"
        coché en BO #}
    {% if suggestions %}
    <div class="home-suggest">
        <div class="wrapper">
            <h2 class="big-title__littler orange parallax" id="suggestTitle" data-start="20px" data-end="-50px">{{suggest_title}}</h2>
            <div class="row justify-content-center py-md-5">
            {% for item in suggestions %}
                <div class="col-lg-4 col-md-6">
                    <div class="single-suggest">
                        <div class="img__container">
                            <div class="img" style="background-image: url('{{item.thumbnail.src}}');" alt="{{item.title}}"></div>
                        </div>
                        <span class="title-lev2 black">{{item.title}}</span>
                        {{item.content}}
                        {% if item.meta('suggest_button').url %}
                        <a href="{{item.meta('suggest_button').url}}" class="cta-primary small" {% if item.meta('suggest_button').target %}target="_blank" rel="noopener"{% endif %}>
                            <span>{{item.meta('suggest_button').title}}</span>
                            <div>
                                <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M22.4554 10.4554L18.1641 6.16409L17.3058 7.02236L20.9895 10.7061L1.29395 10.7061L1.29395 11.9214L20.9895 11.9214L17.3058 15.6051L18.1641 16.4633L22.4554 12.172L23.3137 11.3137L22.4554 10.4554Z" fill="#E3DFD8"/>
                                </svg>
                        	</div>
                        </a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}


    {#  EVENEMENTS  #}
    {#  Affichage des 5 dernirs évènements  #}
    <div class="home-events">
        <div class="wrapper">
            <div class="row">
                <div class="col-lg-6">
                    <h2 class="big-title__littler orange">{{event_title}}</h2>
                </div>
                <div class="col-lg-4 home-events__content">
                    <div class="editor-text">
                        {{event_txt}}
                    </div>
                    <a href="{{event_cta.link}}" class="btn-lev2"><span>{{event_cta.label}}</span></a>
                </div>
            </div>
        </div>
        <div class="events__listing">
            {% for item in evenements %}
            <div class="single" data-link="{{item.link}}">
                <div class="wrapper">
                    <span class="subtitle orange">{{item.category}}</span>
                    <a href="{{item.link}}" class="title-lev1 black">{{item.title}}</a><span class="date">{{ function('get_field', 'event_date', item.ID)}}</span>
                    <span class="arrow">
                        <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.388106 16.748C0.146046 16.9876 0.146046 17.3761 0.388106 17.6158C0.630167 17.8554 1.02262 17.8554 1.26469 17.6158L9.52915 9.43395C9.77121 9.19431 9.77121 8.80578 9.52915 8.56614L1.26469 0.38432C1.02262 0.14468 0.630167 0.14468 0.388106 0.38432C0.146046 0.62396 0.146046 1.01249 0.388106 1.25213L8.21907 9.00478L0.388106 16.748Z" fill="#2D3D39"/>
                        </svg>
                    </span>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>


    {#  BOTTOM : Privatisation  #}
    {% if bottom_cover_img or bottom_title or bottom_subtitle or bottom_txt %}
    <div class="home-bottom-block">
        <div class="img-cover" style="background-image: url('{{bottom_cover_img}}');"></div>
        <div class="wrapper">
            <div class="row no-gutters py-3">
                <div class="col-xl-5 col-lg-6 col-md-10 offset-lg-1">
                    <div class="content">
                        <h2 class="title-lev1 black">{{bottom_title}}</h2>
                        <span class="title-lev2 orange">{{bottom_subtitle}}</span>
                        <div class="editor-text">
                            {{bottom_txt}}
                        </div>
                        <a href="{{bottom_link['url']}}" class="cta-primary no-ajax" {% if bottom_link['target'] %}target="_blank" rel="noopener"{% endif %}>
                        <span>{{bottom_link['title']}}</span>
                        <div>
                            <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.4554 10.4554L18.1641 6.16409L17.3058 7.02236L20.9895 10.7061L1.29395 10.7061L1.29395 11.9214L20.9895 11.9214L17.3058 15.6051L18.1641 16.4633L22.4554 12.172L23.3137 11.3137L22.4554 10.4554Z" fill="#E3DFD8"/>
                            </svg>
                        </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="img parallax" data-start="-80px" data-end="10px" data-duration="0.7" style="background-image: url('{{bottom_img}}');"></div>
            <div class="texture parallax" data-start="-150px" data-end="50px" style="background-image: url('{{bottom_texture}}');"></div>
        </div>
    </div>
    {% endif %}
{% endblock %}