{% extends 'Default/parameters.html.twig' %}

{% block html %}
{% apply spaceless %}

{% set list = [
    {title:"Cookies de fonctionnalité", id:"cookieFeatures", readOnly:true, description:"Ces cookies nous permettent d’archiver vos préférences de navigation sur notre site en conservant en mémoire les différents choix que vous avez effectués lors de votre dernière visite par exemple. Ils peuvent également vous permettre de bénéficier d’offres ou de conseils personnalisés."},
    {title:"Cookies analytiques", id:"cookieGA", description:"Ces cookies permettent de collecter des données statistiques sur l'utilisation du site Web et d'obtenir des informations sur la manière d'améliorer notre offre. Les informations transférées (par exemple l'adresse IP et le type de navigateur) sont enregistrées et traitées par Google Analytics, qui est un programme de surveillance du trafic du site Web."},
    {title:"Cookies de géolocalisation", id:"cookieGeo", description:"Votre adresse IP peut être utilisée pour établir votre position. Ces informations fournies par Google Analytics nous permettent d'en savoir plus sur vous et de personnaliser nos pages."},
] %}

<div id='cookiesBox' class='anim-display anim-show vfill fixed top left opened {{desktop("vt-80-in")}}{{mobile("vt-25-in")}}'>
    <i class="block bg-success transparent fill absolute top left"></i>
    <div class='fill flex row center middle'>
        <div id='cookiesContent' class='relative shadow bg-white {{desktop("half_80 vt-60-in hz-80-in")}} {{mobile("vt-20-in hz-20-in")}}' style="max-height: 100%; overflow: auto;">
            <div class='w100'>
                <div class='flex col'>
                    <h2 class='h5 success upper'>{{page.title}}</h2>
                    <div class='article p top-20 bottom-20'>
                        {{page.content|raw}}
                    </div>
                    <div class='flex row top-20 wrap'>
                        {% set class = "upper radius-5 medium hz-20-in vt-10-in right-20 "~desktop("")~mobile("") %}
                        <span id="cookiesAll" class='bg-success white pointer {{class}}'>Tout accepter</span>
                        {# <span class='os-click border border-2x border-success success {{class}}' data-target='#cookiesBox'>Continuer sans accepter</span> #}
                        <span class='os-click os-scroll bg-warning white {{class}}' data-target='#cookiesBox .parameters' data-scroller='#cookiesContent'>Personnaliser</span>
                    </div>
                    <div class="parameters">
                        {% for o in list %}
                        <div class="flex top-20 vt-25 shadow-alt {{desktop('row')}}{{mobile('col')}}">
                            <div class="hz-20-in vt-15-in">
                                <h3 class="h6 medium">{{o.title}}</h3>
                                <p class="p-alt">{{o.description|nl2br}}</p>
                            </div>
                            <div class="flex col middle hz-20-in vt-15-in border-left border-gray border-solid border-1x">
                                <div class="flex row relative">
                                    <input id="{{o.id}}" type="checkbox" class="cookie-checkbox os-checkbox-alt hide" {{o.readOnly is defined and o.readOnly ? 'checked disabled'}}>
                                    <label for="{{o.id}}" class="relative vt-10-in hz-30-in" readonly="readonly"></label>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        <div class="flex row center wrap">
                            <span class='os-check-all flex row relative bg-success white pointer {{class}}' data-target='.cookie-checkbox'>
                                <input type="checkbox" id="" class="os-checkbox hide cookie-checkbox">
                                <label class="filter-white"></label>
                                <span class="os-check-all left-50" data-target='.cookie-checkbox'>Tout cocher</span>
                            </span>
                            <span id="saveCookies" class='bg-warning white {{class}}'>Enregistrer et fermer</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // var gaProperty = '{{os_param("GA")}}';
    // var disableStr = 'ga-disable-' + gaProperty;
    // if (document.cookie.indexOf(disableStr + '=true') > -1) {
    //   window[disableStr] = true;
    // }
    // $("#cookieGA").change(function(){
    //     if($(this).value()){
    //         window[disableStr] = false;
    //     }
    //     else{
    //         document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
    //         window[disableStr] = true;
    //     }
    // });
</script>
{% endapply %}
{% endblock html %}