{% extends "base/base-front-home.html.twig" %}
{% block title %}{% trans into locale %}Home{% endtrans %} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block bodyclass %}{{ parent() }}{% endblock %}
{% block contenido %}
<div class="page-content">

    <!-- Slider -->
    <section class="intro-section">
        <div class="owl-carousel owl-theme row owl-dot-inner owl-dot-white intro-slider animation-slider cols-1 gutter-no" data-owl-options="{
                'nav': false,
                'dots': true,
                'loop': true,
                'items': 1,
                'autoplay': true,
                'autoplayTimeout': 8000
            }">

            <div class="banner banner-fixed intro-slide" style="background-color: #dddee0;">
                <figure>
                    <img src="{{ asset('assets/front/images/home/slide2.jpg') }}" alt="intro-banner" width="1903" height="630" style="background-color: #34ace5;" />
                </figure>
                <div class="container-fluid">
                    <div class="banner-content x-50 y-50 text-center">
                        <h2 class="banner-title mb-3 text-white font-weight-bold ls-m slide-animate pb-10" data-animation-options="{'name': 'fadeInUp', 'duration': '.7s', 'delay': '.5s'}">
                            {% trans into locale %}Cershop redesigns the shopping<br>experience tailored to the user{% endtrans %}
                        </h2>
                        <a href="#" class="btn btn-light slide-animate mb-1" data-animation-options="{'name': 'fadeInLeft', 'duration': '1s', 'delay': '1.5s'}">
                            {% trans into locale %}View more{% endtrans %}<i class="d-icon-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="banner banner-fixed intro-slide" style="background-color: #dddee0;">
                <figure>
                    <img src="{{ asset('assets/front/images/home/slide1.jpg') }}" alt="intro-banner" width="1903" height="630" style="background-color: #34ace5;" />
                </figure>
                <div class="container-fluid">
                    <div class="banner-content x-50 y-50 text-center">
                        <h2 class="banner-title mb-3 text-white font-weight-bold ls-m slide-animate pb-10" data-animation-options="{'name': 'fadeInUp', 'duration': '.7s', 'delay': '.5s'}">
                            {% trans into locale %}View the product at home{% endtrans %}
                        </h2>
                        <a href="#" class="btn btn-light slide-animate mb-1" data-animation-options="{'name': 'fadeInLeft', 'duration': '1s', 'delay': '1.5s'}">
                            {% trans into locale %}View more{% endtrans %}<i class="d-icon-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /slider -->

    <!-- Categorías -->
    <section class="pt-10 mt-7 appear-animate" data-animation-options="{'delay': '.3s'}">
        <div class="container-fluid">
            <h2 class="title title-center mb-5">{% trans into locale %}Categories{% endtrans %}</h2>
            <div class="row">

                <div class="col-xs-6 mb-3 col-lg-2">
                    <div class="category category-default1 category-absolute overlay-zoom">
                        <a href="{{ path('categorias.'~locale)~'?e=1' }}">
                            <figure class="category-media">
                                <img src="{{ asset('assets/front/images/home/categoria-cocina.jpg') }}" alt="{% trans into locale %}Kitchen{% endtrans %}" width="280" height="280" style="background-color: #8c8c8d;" />
                            </figure>
                        </a>
                        <div class="category-content">
                            <h4 class="category-name font-weight-bold ls-l"><a href="{{ path('categorias.'~locale)~'?e=1' }}">{% trans into locale %}Kitchen{% endtrans %}</a></h4>
                            <p>{% trans into locale %}View more{% endtrans %}</p>
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 mb-3 col-lg-2">
                    <div class="category category-default1 category-absolute overlay-zoom">
                        <a href="{{ path('categorias.'~locale)~'?e=2' }}">
                            <figure class="category-media">
                                <img src="{{ asset('assets/front/images/home/categoria-bano.jpg') }}" alt="{% trans into locale %}Bath{% endtrans %}" width="280" height="280" style="background-color: #8c8c8d;" />
                            </figure>
                        </a>
                        <div class="category-content">
                            <h4 class="category-name font-weight-bold ls-l"><a href="{{ path('categorias.'~locale)~'?e=2' }}">{% trans into locale %}Bath{% endtrans %}</a></h4>
                            <p>{% trans into locale %}View more{% endtrans %}</p>
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 mb-3 col-lg-2">
                    <div class="category category-default1 category-absolute overlay-zoom">
                        <a href="{{ path('categorias.'~locale)~'?e=3' }}">
                            <figure class="category-media">
                                <img src="{{ asset('assets/front/images/home/categoria-interior.jpg') }}" alt="{% trans into locale %}Inside{% endtrans %}" width="280" height="280" style="background-color: #8c8c8d;" />
                            </figure>
                        </a>
                        <div class="category-content">
                            <h4 class="category-name font-weight-bold ls-l"><a href="{{ path('categorias.'~locale)~'?e=3' }}">{% trans into locale %}Inside{% endtrans %}</a></h4>
                            <p>{% trans into locale %}View more{% endtrans %}</p>
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 mb-3 col-lg-2">
                    <div class="category category-default1 category-absolute overlay-zoom">
                        <a href="{{ path('categorias.'~locale)~'?e=4' }}">
                            <figure class="category-media">
                                <img src="{{ asset('assets/front/images/home/categoria-exterior.jpg') }}" alt="{% trans into locale %}Exterior{% endtrans %}" width="280" height="280" style="background-color: #8c8c8d;" />
                            </figure>
                        </a>
                        <div class="category-content">
                            <h4 class="category-name font-weight-bold ls-l"><a href="{{ path('categorias.'~locale)~'?e=4' }}">{% trans into locale %}Exterior{% endtrans %}</a></h4>
                            <p>{% trans into locale %}View more{% endtrans %}</p>
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 mb-3 col-lg-2">
                    <div class="category category-default1 category-absolute overlay-zoom">
                        <a href="{{ path('categorias.'~locale)~'?e=5' }}">
                            <figure class="category-media">
                                <img src="{{ asset('assets/front/images/home/categoria-contract.jpg') }}" alt="{% trans into locale %}Contract{% endtrans %}" width="280" height="280" style="background-color: #8c8c8d;" />
                            </figure>
                        </a>
                        <div class="category-content">
                            <h4 class="category-name font-weight-bold ls-l"><a href="{{ path('categorias.'~locale)~'?e=5' }}">{% trans into locale %}Contract{% endtrans %}</a></h4>
                            <p>{% trans into locale %}View more{% endtrans %}</p>
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 mb-3 col-lg-2">
                    <div class="category category-default1 category-absolute overlay-zoom">
                        <a href="{{ path('categorias.'~locale)~'?e=6' }}">
                            <figure class="category-media">
                                <img src="{{ asset('assets/front/images/home/categoria-hidrico.jpg') }}" alt="{% trans into locale %}Hydric{% endtrans %}" width="280" height="280" style="background-color: #8c8c8d;" />
                            </figure>
                        </a>
                        <div class="category-content">
                            <h4 class="category-name font-weight-bold ls-l"><a href="{{ path('categorias.'~locale)~'?e=6' }}">{% trans into locale %}Hydric{% endtrans %}</a></h4>
                            <p>{% trans into locale %}View more{% endtrans %}</p>
                        </div>
                    </div>
                </div>
                           
            </div>
        </div>
    </section>
    <!-- /categorías -->

    <!-- Productos destacados -->
    <section class="product-wrapper container-fluid appear-animate mt-6 mt-md-10 pt-4 pb-8" data-animation-options="{
        'delay': '.3s'
    }">
        <h2 class="title title-center mb-5">{% trans into locale %}Highlighted{% endtrans %}</h2>
        <div class="owl-carousel owl-theme row owl-nav-full cols-2 cols-md-3 cols-lg-4" data-owl-options="{
            'items': 5,
            'nav': false,
            'loop': false,
            'dots': true,
            'margin': 20,
            'responsive': {
                '0': {
                    'items': 2
                },
                '768': {
                    'items': 3
                },
                '992': {
                    'items': 8,
                    'dots': false,
                    'nav': true
                }
            }
        }">
        {% for variante in variantes %}
        <!-- Producto -->
        <div class="product text-center">
            <figure class="product-media">
                <div class="contenedor-multimedia">
                    <div class="miniatura-multimedia">
                        <div class="thumbnail-multimedia">
                            <div class="centrar-multimedia">
                                {% for imagen in variante.imagenesPieza %}
                                {% if imagen.principal == 1 %}
                                <img src="{{ imagen.ruta~'thumb-'~imagen.imagen }}" alt="{{ variante.prefijo~" "~variante.nombre }}" width="280" height="315" style="background-color: #f2f3f5;" />
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-action-vertical">
                    {% if app.user and app.user.rol.nombre == 'ROLE_USER' %}
                    <a href="#" class="btn-product-icon btn-wishlist login-toggle link-to-tab d-md-show" onclick="javascript: abrirModalTablero('{{ variante.id }}', '{{ variante.slug }}');" title="{% trans into locale %}Add to favorites{% endtrans %}"><i class="d-icon-heart"></i></a>
                    {% else %}
                    <a href="#" class="btn-product-icon btn-wishlist login-toggle link-to-tab d-md-show" onclick="javascript: $('#variante-favorito').val('{{ variante.id }}');$('#slug-variante-favorito').val('{{ variante.slug }}');agregarProductoFavorito();" title="{% trans into locale %}Add to favorites{% endtrans %}"><i class="d-icon-heart"></i></a>
                    {% endif %}
                </div>
                <div class="product-action">
                    <a href="{{ path('detallePieza.'~locale, {slug: variante.slug}) }}" class="btn-product" title="{% trans into locale %}View more{% endtrans %}">{% trans into locale %}View more{% endtrans %}</a>
                </div>
            </figure>
            <div class="product-details">
                <h3 class="product-name">
                    <a href="{{ path('detallePieza.'~locale, {slug: variante.slug}) }}">{{ variante.prefijo~" "~variante.nombre }}</a>
                </h3>
            </div>
        </div>
        <!-- ./producto -->
        {% endfor %}
    </section>
    <!-- /productos destacados -->

    <!-- Marcas -->
    <section class="mt-4 mb-5 pb-6 pb-md-10 appear-animate" data-animation-options="{'delay': '.3s'}">
        <h2 class="title d-none">Empresas colaboradoras</h2>
            <div class="container-fluid">
                <div class="owl-carousel owl-theme row brand-carousel cols-xl-6 cols-lg-5 cols-md-4 cols-sm-3 cols-2" data-owl-options="{
                    'nav': false,
                    'dots': false,
                    'autoplay': true,
                    'margin': 20,
                    'loop': true,
                    'responsive': {
                        '0': {
                            'items': 2
                        },
                        '576': {
                            'items': 3
                        },
                        '768': {
                            'items': 4
                        },
                        '992': {
                            'items': 5
                        },
                        '1200': {
                            'items': 6
                        }
                    }
                }">
                <figure><img src="{{ asset('assets/front/images/home/marcas/1.jpg') }}" alt="Generitat Valenciana" width="180" height="100" />
                </figure>
                <figure><img src="{{ asset('assets/front/images/home/marcas/2.jpg') }}" alt="Ivace" width="180" height="100" />
                </figure>
                <figure><img src="{{ asset('assets/front/images/home/marcas/3.jpg') }}" alt="Fondo Europeo de Desarrollo Regional" width="180" height="100" />
                </figure>
                <figure><img src="{{ asset('assets/front/images/home/marcas/1.jpg') }}" alt="Generitat Valenciana" width="180" height="100" />
                </figure>
                <figure><img src="{{ asset('assets/front/images/home/marcas/2.jpg') }}" alt="Ivace" width="180" height="100" />
                </figure>
                <figure><img src="{{ asset('assets/front/images/home/marcas/3.jpg') }}" alt="Fondo Europeo de Desarrollo Regional" width="180" height="100" />
                </figure>
            </div>
        </div>
    </section>
    <!-- /marcas -->

{#    <!-- Sobre nosotros --> 
    <section class="customer-section pb-10 appear-animate">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-md-5 mb-4">
                    <figure>
                        <img src="{{ asset('assets/front/images/home/sobre-nosotros-1.jpg') }}" alt="Sobre nosotros" style="background-color: #BDD0DE;" />
                    </figure>
                </div>
                <div class="col-md-1 mb-4"></div>
                <div class="col-md-6 mb-4">
                    <h5 class="section-subtitle lh-2 ls-md font-weight-normal">Curabitur suscipit libero justo</h5>
                    <h3 class="section-title lh-1 font-weight-bold">Nam vitae massa quis lectus aliquam maximus eget</h3>
                    <p class="section-desc text-grey">Phasellus non mauris sit amet ante imperdiet vestibulum. Donec non interdum erat. Sed mi risus, efficitur sed placerat ut, semper eu quam. Fusce non egestas neque. Duis volutpat arcu libero, sed vestibulum massa molestie in. Suspendisse ac tortor sem. Aenean vitae iaculis arcu. Morbi nec mollis neque.</p>
                    <p class="section-desc text-grey">Nullam eget sodales neque, non dapibus nunc. Duis a massa maximus, dapibus dui vitae, volutpat odio. Suspendisse potenti. Donec vulputate faucibus varius. Suspendisse tincidunt lectus vel nulla porta, in faucibus mi feugiat. Nulla et venenatis ante. Mauris auctor mi sit amet quam pellentesque, at viverra dui hendrerit. Sed eu rutrum nisl, condimentum convallis sem. Ut sit amet cursus neque. Suspendisse mattis turpis arcu, ut imperdiet risus molestie vel.</p>
                    <a href="#" class="btn btn-dark btn-link btn-underline ls-m">Saber más<i class="d-icon-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <section class="store-section pb-10 appear-animate">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-md-6 order-md-first mb-4">
                    <h5 class="section-subtitle lh-2 ls-md font-weight-normal mb-1">Aliquam non justo velit</h5>
                    <h3 class="section-title lh-1 font-weight-bold">Pellentesque non felis id nibh dictum</h3>
                    <p class="section-desc text-grey">Aenean consectetur accumsan diam, vitae tempor felis scelerisque at. Nunc non gravida nisi. Morbi ultrices iaculis ornare. In vehicula pharetra leo rhoncus fermentum. Aenean bibendum ante et lacus fringilla, nec fringilla lorem viverra. Aliquam gravida placerat nunc, id blandit massa volutpat vitae. Proin vehicula eros nec risus ullamcorper interdum.</p>
                    <p class="section-desc text-grey">Nullam eget sodales neque, non dapibus nunc. Duis a massa maximus, dapibus dui vitae, volutpat odio. Suspendisse potenti. Donec vulputate faucibus varius. Suspendisse tincidunt lectus vel nulla porta, in faucibus mi feugiat. Nulla et venenatis ante. Mauris auctor mi sit amet quam pellentesque, at viverra dui hendrerit. Sed eu rutrum nisl, condimentum convallis sem. Ut sit amet cursus neque. Suspendisse mattis turpis arcu, ut imperdiet risus molestie vel.</p>
                    <a href="#" class="btn btn-dark btn-link btn-underline ls-m">Ver categorías<i class="d-icon-arrow-right"></i></a>
                </div>
                <div class="col-md-1 mb-4"></div>
                <div class="col-md-5 mb-4">
                    <figure>
                        <img src="{{ asset('assets/front/images/home/sobre-nosotros-2.jpg') }}" alt="Sobre nosotros" style="background-color: #DEE6E8;" />
                    </figure>
                </div>
            </div>
        </div>
    </section>
    <!-- /sobre nosotros -->#}
                
</div>

{% include '/partials/front-modal-favoritos.html.twig' %}
{% endblock %}

{% block javascript %}
{{ parent() }}
{% include '/js/modal-producto-favoritos.js.twig' %}
{% endblock %}