{% extends 'base.html.twig' %}

{% block title %}{% if app.request.locale == "hr" %}Led display za unutarnje i vanjsko oglašavanje - Specijalizirani za proizvodnju, prodaju i najam{% elseif app.request.locale == "de" %}Kaufen oder mieten sie unsere LED-bildschirme - LED display{% else %}Buy or lease our LED Screens for a period from one day to one year!{% endif %}
{% endblock %}

{% block meta %}{% if app.request.locale == "hr" %}Vjerujemo kako led display nije samo investicija, nego i alat koji će vam donositi zaradu i vrhunsku prezentaciju vaše tvrtke. Led display za unutarnje i vanjsko oglašavanje - Specijalizirani za proizvodnju, prodaju i najam. {% elseif app.request.locale == "de" %}Spezialisiert auf die vermietung von mobilen LED-Screens für innen- und aussenwerbung. Wir glauben, dass der led-bildschirmeine bereicherung und kein hindernis sein muss{% else %}Discover all of our products. All of our LED screens are available to buy or lease, on a period from one day to one year!{% endif %}
{% endblock %}


{% block body %}

    {% include('elements/_navigation.html.twig') %}

    <section class="blue-bg text-center">

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    {% if app.request.locale == "hr" %}
                        <h3 class="text-white">SPECIJALIZIRANI ZA PROIZVODNJU, PRODAJU I NAJAM<br/> LED DISPLEJA ZA UNUTARNJE I VANJSKO OGLAŠAVANJE</h3>
                    {% elseif app.request.locale == "de" %}
                        <h3 class="text-white">SPEZIALISIERT AUF DIE VERMIETUNG VON MOBILEN<br/> LED-SCREENS FÜR INNEN- UND AUSSENWERBUNG</h3>
                    {% else %}
                        <h3 class="text-white">SCREENZ COMPANY - EU LED FACTORY FOR<br/> OUTDOOR AND INDOOR SOLUTIONS</h3>
                    {% endif %}

                </div>
            </div>
        </div>

    </section>

    <section class="blue-transition text-center">

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    {% if app.request.locale == "hr" %}
                        <h4 class="text-white">KONTAKTIRAJTE NAS NA EMAIL INFO@SCREENZ.EU ILI NAS NAZOVITE DANAS NA +385 1 3385 771!</h4>
                    {% elseif app.request.locale == "de" %}
                        <h4 class="text-white">KONTAKTIEREN SIE UNS ODER RUFEN SIE UNS NOCH HEUTE UNTER +385 1 3385 771 AN!</h4>
                    {% else %}
                        <h4 class="text-white">CONTACT US OR CALL US TODAY AT +385 1 3385 771!</h4>
                    {% endif %}

                </div>
            </div>
        </div>

    </section>


    <section class="list-slider homepage">
    <!-- Slider main container -->
        <div class="swiper height500 align-items-center">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper black">
            <div class="swiper-slide black">
                <div class="play-rental-video">
                    <iframe src="https://www.youtube.com/embed/C0e2OWdGr-U?controls=0&&autoplay=1&playsinline=1&mute=1&loop=1&modestbranding=1&showinfo=0&rel=0"></iframe>
                </div>
            </div>
            <!-- Slides -->
            <div class="swiper-slide  align-slide-content">
                <div class="play-rental-video">
                    <iframe src="https://www.youtube.com/embed/C0e2OWdGr-U?controls=0&autoplay=1&mute=1&playsinline=1&loop=1&modestbranding=1&showinfo=0&rel=0"></iframe>
                </div>
            </div>

            <div class="swiper-slide black">
                <div class="play-rental-video">
                    <iframe src="https://www.youtube.com/embed/C0e2OWdGr-U?controls=0&&autoplay=1&playsinline=1&mute=1&loop=1&modestbranding=1&showinfo=0&rel=0"></iframe>
                </div>
            </div>

        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

       <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
       <div class="swiper-scrollbar"></div>
    </div>
    </section>

    <section class="list-products sec-30 sec-bg-products">
    <div class="container text-center">
        <div class="row">
           <h3>Discover all of our products</h3>
                    <p class="lead">
               All of our LED screens are available to buy or lease, on a period from one day to one year!<br> Contact us or call us today at +385 1 3385 771!
           </p>
           {% for pro in Products %}
           <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 padcard-30-0-0">
               <div class="card padcard-40-0-0 bg-none border-none">
                    <a href="{{ path('product_page', {'slug': pro.slug}) }}"><img src="{{ asset('uploads/images/' ~ pro.image) }}" class="card-img-top padcard-30-0-0" alt="{{  pro.title }}"></a>
                   <div class="card-body">
                        <a href="{{ path('product_page', {'slug': pro.slug}) }}"><h5 class="card-title product-special-h3">{{  pro.title }}</h5></a>
                       <p class="card-tex product-special-text">{{  pro.metaDescription }}</p>

                    </div>
                </div>
            </div>
            {% endfor %}



        </div>
    </div>
</section>

    <section class="container-fluid video-homepage-section">
        <div class="container">
            <div class="row py-lg-5 text-center">
                <div class="col-lg-12 col-md-8 mx-auto videoShow">
                    <h3 class="text-white text-center pb-4">Featured video</h3>
                    <iframe class="w-100" src="https://www.youtube.com/embed/u2rYfHN1a8Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </section>

    <section class="blue-bg text-center">

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    {% if app.request.locale == "hr" %}
                        <h3 class="text-white">VJERUJEMO KAKO LED DISPLAY NIJE SAMO INVESTICIJA,<br/> NEGO ALAT KOJI ĆE VAM DONOSITI ZARADU I VRHUNSKU PREZENTACIJU VAŠE TVRTKE</h3>
                    {% elseif app.request.locale == "de" %}
                        <h3 class="text-white">WIR GLAUBEN, DASS DER LED-BILDSCHIRM<br/> EINE BEREICHERUNG UND KEIN HINDERNIS SEIN MUSS</h3>
                    {% else %}
                        <h3 class="text-white">SCREENZ COMPANY - EU LED FACTORY FOR<br/> OUTDOOR AND INDOOR SOLUTIONS</h3>
                    {% endif %}

                </div>
            </div>
        </div>

    </section>

    <section class="container-fluid news-homepage-section news">
    <div class="container">
        <h3 class="text-white text-center pb-4">Latest news</h3>
    <div class="row">
        <div class="row row-cols-1 row-cols-md-4">
            {% for new in News %}
            <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 mb-3">
                <div class="card h-100 text-white bg-dark">
                    <a href="{{ path('news_details_page', {'slug': new.slug}) }}"><img src="{{ asset('uploads/images/' ~ new.image) }}" class="card-img-top" alt="{{ new.title }}"/></a>
                    <div class="card-body">
                        <a href="{{ path('news_details_page', {'slug': new.slug}) }}"><h5 class="card-title">{{ new.title }}</h5></a>
                        <p class="card-text">
                            {{ new.metaDescription }}
                        </p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">{{  new.published|date("M d, Y.")}}</small>
                    </div>
                </div>
            </div>
            {%  endfor %}

        </div>
    </div>
    </div>
</section>

    {% include('elements/_clients.html.twig') %}

    {% include('elements/_partners.html.twig') %}

    {% include('elements/_footer_buy.html.twig') %}

    {% include('elements/_footer.html.twig') %}

{% endblock %}