{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
{% extends '@SyliusShop/layout.html.twig' %}
{% block title %}{{ bitbag_cms_render_block('metatitle-homepage') }}{% endblock %}
{% block metatags %}
{{ parent() }}
<meta name="description" content="{{ bitbag_cms_render_block('metadesc-homepage')|striptags|raw|replace({"\n": "", "\r": "", "\t": ""}) }}">
{% endblock %}
{% block content %}
<div class="homepage">
{# Slides #}
<div class="slides">
<div class="slides-slider">
{% for slide in slides %}
{# <div style="background-image: url({{ slide.getImagesByType('image_background').first.path|imagine_filter('app_home_slide_image') }})"> #}
{% if is_mobile() and not is_device('iPad') and slide.getImagesByType('image_main_mobile').first is not empty %}
<div style="background-image: url(/media/image/{{ slide.getImagesByType('image_main_mobile').first.path }})">
{% elseif slide.getImagesByType('image_background').first is not empty %}
<div style="background-image: url(/media/image/{{ slide.getImagesByType('image_background').first.path }})">
{% else %}
<div>
{% endif %}
{% if slide.linkTitle is empty %}
<a href="{{ slide.link }}" class="slides-content">
{% else %}
<div class="slides-content">
{% endif %}
<div class="left">
{# {% if is_mobile() and not is_device('iPad') and slide.getImagesByType('image_main_mobile').first is not empty %}
<img data-src="{{ slide.getImagesByType('image_main_mobile').first.path|imagine_filter('app_any_image') }}" class="ui image" />
<div class="lien-ctn">
<a href="{{ slide.link }}">{{ slide.linkTitle }}</a>
</div>
{% elseif slide.getImagesByType('image_main').first is not empty %} #}
{% if slide.getImagesByType('image_main').first is not empty %}
<img data-src="{{ slide.getImagesByType('image_main').first.path|imagine_filter('app_home_slide_image') }}" class="ui image" />
{% endif %}
</div>
<div class="middle">
{% spaceless %}
{% if slide.subTitle is not empty %}
<span>{{ slide.subTitle | nl2br }}</span>
{% endif %}
{% if slide.title is not empty %}
<h2>{{ slide.title }}</h2>
{% endif %}
{% if slide.description is not empty %}
<p>{{ slide.description }}</p>
{% endif %}
{% endspaceless %}
{% if slide.linkTitle is not empty %}
<div class="lien-ctn">
<a class="lien-bleu" href="{{ slide.link }}">{{ slide.linkTitle }}</a>
</div>
{% endif %}
</div>
{% if slide.fabricProduct is not empty %}
<div class="right">
<div class="right-ctn">
<div>
<div id="circle">
<a href="{{ path('app_product_variant_show', {'slug': slide.fabricProduct.slug, 'id': slide.fabricProduct.id}) }}">
<img src="{{ asset('webapic-theme/images/txt-tournant-tissu.svg') }}" class="ui image" />
</a>
</div>
</div>
<div>
<a class="apercu-tissu" href="{{ path('app_product_variant_show', {'slug': slide.fabricProduct.slug, 'id': slide.fabricProduct.id}) }}">
{% if slide.fabricProduct.getImagesByType('image_product_main')|length > 0 %}
<img src="{{ slide.fabricProduct.getImagesByType('image_product_main').first.path|imagine_filter('app_product_fabric_small_thumbnail') }}" class="ui image" />
{% endif %}
</a>
</div>
</div>
</div>
{% endif %}
<img data-src="{{ asset('webapic-theme/images/slide-trait.svg') }}" class="ui image trait" />
{% if slide.linkTitle is empty %}
</a>
{% else %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
<img data-src="{{ asset('webapic-theme/images/slide-arrondi.svg') }}" class="ui image arrondi" />
</div>
{# Fin Slides #}
{# "Vous les adorez" #}
<div class="taxons-categories">
{# <span class="title">{{ 'app.front.accueil.categories.titre1'|trans }} <strong>{{ 'app.front.accueil.categories.titre2'|trans }} !</strong></span> #}
<div class="taxons-categories-content">
<div class="taxons-categories-ctn">
<div class="carrousel">
{% for value in homeTaxons %}
<div class="carrousel-ctn">
<a href="{{ path('sylius_shop_product_index', {'slug': value.mainTaxon.slug}) }}" class="top">
{# <div class="image_taxon_main">
{% if value.mainTaxon.imagesByType('image_taxon_main')|length > 0 %}
<img class="ui image lazyload" data-src="{{ value.mainTaxon.imagesByType('image_taxon_main').first.path|imagine_filter('app_taxon_image_taxon_main') }}" />
{% else %}
<img class="ui image lazyload" data-src="{{ asset('webapic-theme/images/placeholder-category-image.png') }}" />
{% endif %}
</div> #}
{% if value.mainTaxon.imagesByType('image_taxon_icon')|length > 0 %}
<div class="image_taxon_icon">
<img class="ui image lazyload" data-src="{{ value.mainTaxon.imagesByType('image_taxon_icon').first.path|imagine_filter('sylius_shop_product_original') }}" />
</div>
{% endif %}
</a>
<a href="{{ value.mainTaxon.slug }}">
<h2>
{% if app.request.locale == 'en_US' and value.titleen is not empty %}
{{ value.titleen }}
{% else %}
{{ value.title }}
{% endif %}
</h2>
</a>
</div>
{% endfor %}
</div>
{# {% if is_mobile() %}
<div class="ctn-lien">
<a href="#">{{ 'app.front.accueil.categories.lien'|trans }}</a>
</div>
{% endif %} #}
</div>
</div>
</div>
{# Fin "Vous les adorez" #}
{# Slide "Saisons" #}
<div class="saisons">
<span class="title">{{ 'app.front.accueil.saison1'|trans }}, <strong>{{ 'app.front.accueil.saison2'|trans }} !</strong></span>
{# <div class="saisons-ctn left"> #}
{% for value in saisons %}
<div class="saisons-left">
<div class="item {{ loop.index }}">
<div class="content">
{% if not is_mobile() %}
<div class="bordures">
<style>.triangle{{ value.id }}::before { border-right : 22px solid {{ value.couleurfond }};}</style>
{% for i in 0..21 %}
<span class="triangle triangle{{ value.id }}"> </span>
{% endfor %}
</div>
{% endif %}
<a href="{{ value.link }}">
<img class="ui image lazyload" data-src="{{ value.images.first.path|imagine_filter('app_any_image') }}" />
</a>
</div>
</div>
</div>
{% endfor %}
{# </div> #}
{# <div class="saisons-ctn right"> #}
{% for value in saisons %}
<div class="saisons-right">
<div class="item" style="background: {{ value.couleurfond }}" >
<div class="content">
<a href="{{ value.link }}">
<span class="soustitre">{{ value.subTitle }}</span>
<span class="titre">{{ value.title | nl2br }}</span>
</a>
<div class="lien-ctn">
<a href="{{ value.link }}">
{{ value.linkTitle }}
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{# </div> #}
</div>
{# Fin Slide "Saisons" #}
{# Sac&Zip #}
{# <div class="saczip">
<img class="ui image coquilles-zip lazyload" data-src="{{ asset('webapic-theme/images/coquilles-zip.svg') }}" />
<div class="contenu">
<div class="left">
{{ bitbag_cms_render_block('homepage-saczip') }}
</div>
<div class="right">
<h2 class="top">
<span class="soustitre">{{ 'app.front.accueil.sac.sac1'|trans }}</span>
<span class="titre">{{ 'app.front.accueil.sac.sac2a'|trans }}<strong> & </strong>{{ 'app.front.accueil.sac.sac2b'|trans }}</span>
</h2>
<div class="saczip-centaines">
{{ 'app.front.accueil.sac.slide5'|trans }} {{ 'app.front.accueil.sac.slide6'|trans }}
</div>
<div class="carrousel-ctn">
<div class="carrousel">
<div class="item part1">
<div class="left">
{% if sacZipSelectionDefault.productVariantBase.getImagesByType('image_product_main')|length > 0 %}
<img class="ui image lazyload" src="{{ asset('webapic-theme/images/saczip-home-base.svg') }}" />
{% endif %}
</div>
<div class="saczip-plus">+</div>
<div class="left">
{% if sacZipSelectionDefault.productVariantFlap.getImagesByType('image_product_main')|length > 0 %}
<img class="ui image lazyload" src="{{ asset('webapic-theme/images/saczip-home-rabat.svg') }}" />
{% endif %}
</div>
</div>
</div>
</div>
<div class="saczip-legende">
<div class="base-legende">{{ 'app.front.accueil.sac.slide1'|trans }} {{ 'app.front.accueil.sac.slide2'|trans }}</div>
<div class="rabat-legende">{{ 'app.front.accueil.sac.slide3'|trans }} </div>
</div>
<div id="circle">
<img class="ui image lazyload" data-src="{{ asset('webapic-theme/images/txt-tournant-incontournable.svg') }}" />
</div>
<div class="lien-ctn">
<a class="lien-bleu" href="{{ path('app_configurateur') }}">
{{ 'app.front.accueil.sac.commencer'|trans }}
</a>
</div>
</div>
</div>
</div> #}
{# Fin Sac&Zip #}
<div class="coquilles">
<div>
{{ 'app.front.accueil.coquilles.titre1'|trans }}
<span>
{{ 'app.front.accueil.coquilles.titre2'|trans }}
</span>
</div>
</div>
{# "Imprimé" #}
{# <div class="imprimes">
<div class="content">
<div class="top">
{{ 'app.front.accueil.imprime.titre'|trans }}
</div>
<div class="middle">
<a class="lien-bleu" href="{{ path('app_collection_index') }}">{{ 'app.front.accueil.collection.voir'|trans }}</a>
</div>
<img class="ui image lazyload" data-src="{{ asset('webapic-theme/images/accueil-imprime.svg') }}" />
</div>
<div class="imprimes-carousel" id="vertical">
{% for imprime in imprimes %}
<div class="item">
{% if imprime.collection is not empty %}
<a href="{{ path('app_collection_show', {'slugCategory': imprime.slugLocale, 'slug': imprime.collection.slug}) }}">
<img class="ui image lazyload" data-src="{{ imprime.images.first.path|imagine_filter('app_any_image') }}" />
</a>
{% else %}
<img class="ui image lazyload" data-src="{{ imprime.images.first.path|imagine_filter('app_any_image') }}" />
{% endif %}
</div>
{% endfor %}
</div>
</div> #}
{# Fin "Imprimé" #}
{# Liste des déclinaisons mises en avant #}
<div class="bitbag-block accueil-listing1">
<div class="accueil-listing1-slider listing1">
{% for row in homeProductsVariants %}
{% include 'products/single_product_in_circle.html.twig' with {'product': row.productVariant} only %}
{% endfor %}
</div>
</div>
{# Fin Liste des déclinaisons mises en avant #}
{# "Côté boutique" #}
<div class="banner">
{{ bitbag_cms_render_block('accueil-orange') }}
<div class="banner-right">
<div class="coteboutique">
<div class="coteboutique-ctn">
<h2> {{ 'app.front.accueil.boutique.titre1'|trans }} <strong>{{ 'app.front.accueil.boutique.titre2'|trans }}</strong></h2>
<div class="coteboutique-ctn-content">
<h3>{{ coteboutique.title }}</h3>
<img class="ui image lazyload" data-src="{{ coteboutique.images.first.path|imagine_filter('app_any_image') }}" />
<p>
{{ coteboutique.description }}
</p>
<div class="lien-ctn">
<a class="lien-bleu" href="{{ coteboutique.link }}">
{{ coteboutique.linkTitle }}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{# Fin "Côté boutique" #}
{# Instagram #}
{# {% include 'partials/block-instagram.html.twig' %} #}
</div>
{% endblock %}