{% load i18n %}
{% load static %}

{% load unicms_templates %}

{% settings_value "CAROUSEL_HERO_AUTOPLAY_TIMEOUT" as carousel_timeout %}
{% random_id as id %}

{% if carousel_items %}

    {% if carousel_items|length > 1 %}
    <div class="customNavigation w-100" id="{{ id }}_customNavigation" style="position: absolute;">
        <span class="{{ id }}_prev" id="{{ id }}_prev" style="cursor: pointer; position: relative; z-index: 10">
            <span class="text-white fw-bold">
                <svg class="icon icon-lg icon-white" aria-labelledby="{{ id }}_carousel_prev">
                    <title id="{{ id }}_carousel_prev">{% trans "Previous" %}</title>
                    <use xlink:href="{% static '/svg/sprites.svg' %}#it-chevron-left"></use>
                </svg>
            </span>
        </span>
        <span class="{{ id }}_next float-end" id="{{ id }}_next" style="cursor: pointer; position: relative; z-index: 10">
            <span class="text-white fw-bold">
                <svg class="icon icon-lg icon-white" aria-labelledby="{{ id }}_carousel_next">
                    <title id="{{ id }}_carousel_next">{% trans "Next" %}</title>
                    <use xlink:href="{% static '/svg/sprites.svg' %}#it-chevron-right"></use>
                </svg>
            </span>
        </span>
    </div>
    {% endif %}

    <div id="italia_carousel_{{ id }}" class="owl-carousel owl-theme">

        {% for item in carousel_items %}
        {% with item.links as item_links %}
        <div class="item">
            <div class="it-hero-wrapper it-overlay {% if item.heading %}it-dark{% endif %} {% block extra_class %}{% endblock %}">

                <!-- - img-->
                {% if item_links|length == 1 %}
                <a href="{{ item_links.0.url }}" class="w-100" style="text-decoration: none">
                {% endif %}
                <div class="img-responsive-wrapper">
                    <div class="img-responsive">
                        <div class="img-wrapper">
                            <picture>
                                {% if item.mobile_image %}
                                <source srcset="{{ item.mobile_image.file.url }}"
                                        media="(max-width: 767px)"
                                        title="{{ item.mobile_image.name }}">
                                {% endif %}
                                <img src="{{ item.image.file.url }}"
                                     title="{{ item.image.name }}"
                                     alt="{{ item.image.description }}">
                            </picture>
                        </div>
                    </div>
                </div>


                {% if item.pre_heading or item.heading or item.description %}
                <!-- - texts-->
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="it-hero-text-wrapper unical-hero-text-wrapper {% if item.heading %}bg-dark{% endif %}">

                                {% block pre_heading %}
                                {% if item.pre_heading %}
                                <h5 class="unical-hero-preheading">
                                    {{ item.pre_heading }}
                                </h5>
                                {% endif %}
                                {% endblock pre_heading %}

                                {% block heading %}
                                {% if item.heading %}
                                <h1 class="no_toc unical-hero-heading">
                                    {{ item.heading }}
                                </h1>
                                {% endif %}
                                {% endblock heading %}

                                {% block description %}
                                {% if item.description %}
                                <h1 class="no_toc unical-hero-description">
                                    {{ item.description }}
                                </h1>
                                {% endif %}
                                {% endblock description %}

                                {% if item_links|length > 1 %}
                                <div class="it-btn-container">
                                    {% for link in item_links %}
                                    <a class="btn btn-sm btn-secondary mb-1" href="{{ link.url }}">
                                        {{ link.get_title }}
                                    </a>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if item_links|length == 1 %}
                </a>
                {% endif %}
            </div>
        </div>
        {% endwith %}
        {% endfor %}
    </div>

    <script>
    $(document).ready(function() {
        var owl_{{ id }} = $("#italia_carousel_{{ id }}");

        owl_{{ id }}.owlCarousel({
            navigation : false, // Show next and prev buttons
            loop: true,
            slideSpeed : 300,
            paginationSpeed : 400,
            autoplay: true,
            autoplayTimeout: {{ carousel_timeout|default:5000 }},
            items : 1,
            dots: false,
            //lazyLoad : true,
        });
        $(".{{ id }}_next").click(function(){
            owl_{{ id }}.trigger('next.owl.carousel');
        });
        $(".{{ id }}_prev").click(function(){
            owl_{{ id }}.trigger('prev.owl.carousel');
        });

        {% if carousel_items|length > 1 %}
        let banner_height = document.querySelector('#italia_carousel_{{ id }}').offsetHeight;
        document.getElementById("{{ id }}_customNavigation").style.marginTop = (banner_height/2)-32 + "px";
        {% endif %}
    });
    </script>
{% endif %}
