{% extends "web/base.html.twig" %}
{% block body %}
    <!-- WRAPPER -->
    <div class="wrapper">
        <div class="video-container">
            <video loop="loop" autoplay="" playsinline="" muted="" id="mejs_8371402035827533_html5" preload="none" src="/video/gravadors_final.mp4" style="object-fit:cover; width: 100%; height: 500px">
                <source type="video/mp4" src="/video/gravadors_final.mp4">
            </video>
            <div class="video-message">
                <h1>Solucions en gravat làser</h1>
            </div>
        </div>


        <!-- SLIDER
        <div class="slider oneslider slider-fwd">
            <ul data-auto="true">
                {% for banner in banners %}
                    <li class="bg-slide" style="background-image: url({{ asset('images/uploaded/' ~ banner.image) }});">
                        <div class="container fullheight">
                            <div class="bus-descr animate {{ random(['left-bottom-pos', 'right-bottom-pos']) }}" data-animate="{{ random(['fadeInUp', 'fadeInLeft', 'fadeInRight']) }}" style="display: flex; flex-direction: column">
                                <div>
                                    <h4>{{ banner.title }}</h4>
                                    <p>{{ banner.body | raw }}</p>
                                </div>
                                {% if banner.hasButton %}
                                    <div class="margin-top-md" style="margin-left: auto; margin-right: auto">
                                        <button class="btn btn-accent margin-right-md" style="position: relative">
                                            <a href="{{ banner.buttonLink }}">{{ banner.buttonText }}</a>
                                        </button>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
            <div class="slider-nav">
                <a href="" class="prev square">&larr;</a>
                <nav class="nav-pages"></nav>
                <a href="" class="next square">&rarr;</a>
            </div>
        </div>
         /.slider -->

        <!-- CONTAINER -->
        <div class="content">
            {% if  header is not empty or subHeader is not empty %}
                <div class="row jumbotron home-content" style="background-color: transparent; border: 1px solid #95CA2A; padding: 5px">
                    <p class="h2 text-center text-accent" style="margin-bottom: 22px"><b>{{ header | raw }}</b></p>
                    <p class="h3 text-center">{{ subHeader | raw }}</p>
                    <!--<p class="text-center"><a class="btn btn-lg btn-accent" href="#" role="button">Sign up today</a></p>-->
                </div>
            {% endif %}

            <div class="padding-x-s">
                <hr>
            </div>
            <div class="row irow home-content">
                <div class="col-sm-6 fade-left">
                    {{ aboutUs | raw }}
                </div>
                <div class="col-sm-6 fade-right">
                    {{ aboutUsRight | raw }}
                </div>
            </div>

            <hr/>
            <div style="    background-image: url('../../images/background_specialities.webp');
    width: 100%;
    padding-top: 100px;
    padding-bottom: 100px; overflow: hidden">
            <div class="home-content irow">
                <div class="col-sm-5 home-speciality fade-left">
                    {% if app.request.attributes.get('_locale') == 'ca' %}
                        <div>
                            <h5>Ressaltats</h5>
                            <img src="../../images/icons/icon_laser.webp" alt="" class="img-icon">
                        </div>
                    <p>Gravat làser sobre qualsevol tipus de material.
                        Personalització de peces úniques.
                        Escull el millor procés i material pels teus projectes, t’assessorarem de les millors opcions.
                        Adaptació y creació d'arxius per gravar.
                        Rapidesa. Servei d'urgència.</p>
                    {% else %}
                        <div class="row">
                            <h5>Resaltados</h5>
                            <img src="../../images/icons/icon_laser.webp" alt="" class="img-icon">
                        </div>
                        <p>Grabado láser sobre cualquier tipo de material. Personalización de prendas únicas.
                            Escoge el mejor proceso y material para tus proyectos, te asesoraremos de las mejores opciones.
                            Adaptación y creación de archivos para grabar. Rapidez. Servicio de urgencia.</p>
                    {% endif %}
                </div>
                <div class="col-sm-5 col-sm-offset-2 home-speciality fade-right">
                    {% if app.request.attributes.get('_locale') == 'ca' %}
                        <div>
                            <h5>Solucions per a particulars</h5>
                            <img src="../../images/icons/ico-account.png" alt="" class="img-icon">
                        </div>
                    <p>Fem tot tipus de serveis integral per particulars, pots portar-nos una sola unitat sense
                        problema.</p>
                    {% else %}
                        <div>
                            <h5>Soluciones para particulares</h5>
                            <img src="../../images/icons/ico-account.png" alt="" class="img-icon">
                        </div>
                        <p>Hacemos todo tipo de servicios integrales para particulares, nos puedes traer una sola unidad sin problema.</p>
                    {% endif %}
                </div>
            </div>
            <hr class="sm-margin no-bg">
            <div class="home-content irow">
                <div class="col-sm-5 home-speciality fade-left">
                    {% if app.request.attributes.get('_locale') == 'ca' %}
                        <div>
                            <h5>Màquines d'última generació</h5>
                            <img src="../../images/icons/ico-phone.png" alt="" class="img-icon">
                        </div>
                    <p>Treballem amb maquinària d&#39;última tecnologia i amb les marques de referència més
                        representatives del sector.</p>
                    {% else %}
                        <div>
                            <h5>Máquinas de última generación</h5>
                            <img src="../../images/icons/ico-phone.png" alt="" class="img-icon">
                        </div>
                        <p>Trabajamos con maquinaria de última técnologia y con las marcas de referencia más representativas del sector</p>
                    {% endif %}
                </div>
                <div class="col-sm-5 col-sm-offset-2 home-speciality fade-right">
                    {% if app.request.attributes.get('_locale') == 'ca' %}
                        <div>
                            <h5>Solucions per a la indústria</h5>
                            <img src="../../images/icons/icon_factory.webp" alt="" class="img-icon">
                        </div>
                    <p>Serveis dirigits per a professionals amb preu competitius, d’alta qualitat i on l’atendrem de
                        forma
                        personalitzada. Un servei professional per a professionals.</p>
                    {% else %}
                        <div>
                            <h5>Soluciones para la industria</h5>
                            <img src="../../images/icons/icon_factory.webp" alt="" class="img-icon">
                        </div>
                        <p>Servicios dirigidos para profesionales con precios competitivos, de alta calidad y donde lo atenderemos de
                        forma personalizada. Un servicio profesional para profesionales.</p>
                    {% endif %}
                </div>
            </div>
            </div>
            <hr>
            <h3 class="text-center">
                {% if app.request.attributes.get('_locale') == 'ca' %}Formulari de Contacte{% else %}Formulario de contacto{% endif %}</h3>
            <div class="row irow home-content">
                <!-- Map -->
                <div class="col-md-6 fade-left">
                    <br/>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2992.622687736283!2d2.1752804159390027!3d41.40399977926274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a4a2dc5ac5e22d%3A0xbb5f20e792fa4a6f!2sJM%20Gravadors!5e0!3m2!1ses!2ses!4v1645910139992!5m2!1ses!2ses"
                            width="100%" height="490" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
                <!-- Form -->
                <div class="col-md-6 fade-right">
                    <br/>
                    {% if app.request.attributes.get('_locale') == 'ca' %}
                    <h4> La millor solució professional</h4>
                    <h3 class="text-accent">EXPLICA'NS QUÈ NECESSITES</h3>
                    <small>La teva petició serà resposta el més aviat possible</small>
                    {% else %}
                        <h4>La mejor solución profesional</h4>
                        <h3 class="text-accent">EXPLICANOS QUE NECESITAS</h3>
                        <small>Tu petición será procesada lo antes posible.</small>
                    {% endif %}
                    <form action="{{ path('post-contact') }}" method="post" id="send-form" class="send-form" novalidate="">
                        <fieldset class="form-wrap">
                            <div class="form-group">
                                <input type="text" name="name" id="send-form-name" placeholder="{% if app.request.attributes.get('_locale') == 'ca' %}Nom{% else %}Nombre{% endif %}" required="required">
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" id="send-form-email" placeholder="Email" required="required">
                            </div>
                            <div class="form-group col-sm-6" style="border-left: 0">
                                <input type="text" name="phone" id="send-form-phone" placeholder="{% if app.request.attributes.get('_locale') == 'ca' %}Telèfon{% else %}Teléfono{% endif %}" required="required">
                            </div>
                            <div class="form-group col-sm-6">
                                <input type="text" name="company" id="send-form-company" placeholder="Empresa">
                            </div>
                            <div class="form-group">
                                <textarea name="message" placeholder="{% if app.request.attributes.get('_locale') == 'ca' %}Com podem ajudar-te?{% else %}¿Como podemos ayudarte?{% endif %}" id="send-form-message"
                                          required="required"></textarea>
                            </div>
                        </fieldset>
                        <button type="submit" class="btn btn-accent">Enviar</button>
                    </form>
                </div>
            </div>
            <hr>
            <h3 class="text-center">
                {% if app.request.attributes.get('_locale') == 'ca' %}Alguns dels nostres treballs{% else %}Algunos de nuestros trabajos{% endif %}</h3>
            <div class="row irow home-content">
                <div class="splide">
                    <div class="splide__track hes-gallery">
                        <ul class="splide__list">
                        {% for image in imagesGallery %}
                               <li class="splide__slide">
                                   <img src="{{ asset('images/uploaded/' ~ image.image) }}" alt="{{ image.title }}">
                               </li>
                        {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <!--<div class="row irow last-blog-entries">
                <h3>Últimes entrades al blog</h3>
                <div class="col-sm-4">
                    <ul class="nav nav-tabs tabs-vertical">
                        <li class="active"><a href="#y1983" data-toggle="tab">11/01/2022</a></li>
                        <li><a href="#y1990" data-toggle="tab">12/01/2022</a></li>
                        <li><a href="#y2004" data-toggle="tab">13/01/2022</a></li>
                    </ul>
                </div>
                <div class="col-sm-8">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="y1983">
                            <h4>Company history</h4>
                            <p>Ultrices commodo mi felis scelerisque nulla bibendum, augue aliquam, eget vulputate
                                congue. Elit varius, justo ad tincidunt lorem sit, convallis adipiscing, elit vitae
                                vivamus congue elit aliquet, et scelerisque luctus. Tristique vestibulum pellentesque
                                enim viverra tincidunt. Vel nulla in, lobortis taciti, sit sed mi auctor commodo.</p>
                        </div>
                        <div class="tab-pane fade" id="y1990">
                            <h4>News begins publication</h4>
                            <p>Elementum a risus aliquam integer vehicula. Ligula ipsum pretium ac, amet egestas mauris
                                interdum et, fusce convallis tristique mauris, in ut, vel aliquam sem conubia viverra.
                                Turpis vestibulum et inceptos ornare ornare, ante urna a eu velit nulla senectus, in
                                vitae sit quis eleifend lacus, mauris nec quo viverra elit quis eleifend lacus, mauris
                                nec quo viverra elit enim.</p>
                        </div>
                        <div class="tab-pane fade" id="y2004">
                            <h4>Plans for a cable network</h4>
                            <p>Diam dui, at sodales. Quaerat arcu in molestie suspendisse, pellentesque maecenas diam
                                lorem eleifend semper condimentum, elementum ut neque id aenean lacus. Vel imperdiet
                                pellentesque neque vulputate, imperdiet sed lorem urna, tellus urna elementum nisl,
                                viverreget tincidunt quis lorem cras, ut sed euismod dictumst.</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr/>-->
        </div>
        <!-- /.container -->
    </div>
    <!-- /.wrapper -->
{% endblock %}
{% block js %}
    {{ parent() }}
    <script>
        var splide = new Splide( '.splide', {
            perPage: 3,
            rewind : true,
            type     : 'loop',
            height   : '20rem',
            focus    : 'center',
            autoWidth: true,
            pagination: false
        } );

        splide.mount();
        HesGallery.init({
            showImageCount: false,
        })

        function reveal() {
            var reveals = document.querySelectorAll(".fade-left, .fade-right");
            for (var i = 0; i < reveals.length; i++) {
                var windowHeight = window.innerHeight;
                var elementTop = reveals[i].getBoundingClientRect().top;
                var elementVisible = 150;
                if (elementTop < windowHeight - elementVisible) {
                    reveals[i].classList.add("active");
                } else {
                    reveals[i].classList.remove("active");
                }
            }
        }

        window.addEventListener("scroll", reveal);
        reveal();
    </script>
{% endblock %}