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

{% load unicms_contexts %}
{% load unicms_templates %}

{% settings_value "CMS_PUBLICATION_LIST_PREFIX_PATH" as page_news_suffix %}
{% settings_value "UNICAL_PUBLICATION_CAROUSEL_ITEMS" as carousel_items %}
{% random_id as uid %}

{% if publications %}
<div class="custom-unical owl-carousel d-none d-lg-block" id="carousel_{{ uid }}">
    {% for pub in publications %}
    <div class="card-wrapper card-space">
        <div class="card card-bg no-after">
            <div class="card-body">
                {% block desktop_item_body %}
                <div class="category-top">
                    <span>{% trans "Published" %}: {{ pub.date_start|date:"d/m/Y, H:i" }}</span>
                    {% include "includes/edit_news.html" with item=pub %}
                </div>
                <h5 class="card-title">
                    <a href="{{ pub.url }}" class="no-color" title="{{ pub.publication.title }}">
                        {{ pub.publication.title|truncatechars:120 }}
                    </a>
                </h5>
                <p class="card-text">
                    {{ pub.publication.subheading|truncatechars:135 }}
                </p>
                {% include "includes/social_share.html" with share_title=item.publication.title share_url=request.get_host|add:pub.url %}
                {% endblock desktop_item_body %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<div class="custom-unical d-lg-none">
    {% for pub in publications %}
    <div class="card-wrapper card-space">
        <div class="card card-bg no-after">
            <div class="card-body">
                {% block mobile_item_body %}
                <div class="category-top">
                    <span>{% trans "Published" %}: {{ pub.date_start|date:"d/m/Y, H:i" }}</span>
                    {% include "includes/edit_news.html" with item=pub %}
                </div>
                <h5 class="card-title">
                    <a href="{{ pub.url }}" class="no-color" title="{{ pub.publication.title }}">
                        {{ pub.publication.title|truncatechars:120 }}
                    </a>
                </h5>
                <p class="card-text">
                    {{ pub.publication.subheading|truncatechars:135 }}
                </p>
                {% include "includes/social_share.html" with share_title=item.publication.title share_url=request.get_host|add:pub.url %}
                {% endblock mobile_item_body %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<div class="customNavigation text-right d-none d-lg-block">
    <span class="{{ uid }}_prev" style="cursor: pointer">
        <span class="text-black font-weight-bold">
            <svg class="icon icon-sm mr-2" aria-labelledby="{{ uid }}_carousel_prev">
                <title id="{{ uid }}_carousel_prev">{% trans "Previous" %}</title>
                <use xlink:href="{% static '/svg/sprite.svg' %}#it-arrow-left-circle"></use>
            </svg>
        </span>
    </span>
    <span class="{{ uid }}_next" style="cursor: pointer">
        <span class="text-black font-weight-bold">
            <svg class="icon icon-sm mr-2" aria-labelledby="{{ uid }}_carousel_next">
                <title id="{{ uid }}_carousel_next">{% trans "Next" %}</title>
                <use xlink:href="{% static '/svg/sprite.svg' %}#it-arrow-right-circle"></use>
            </svg>
        </span>
    </span>
</div>

{% block all_items_link %}
<p class="mt-3 ml-2 d-lg-none">
    <a href="{{ page_news_suffix }}?category_name=avvisi" class="no-color">
        <span class="text-black font-weight-bold">
            <svg class="icon mr-2">
                <use xlink:href="{% static '/svg/sprite.svg' %}#it-arrow-right-circle"></use>
            </svg>
            {% trans "Go to all notices" %}
        </span>
    </a>
</p>
{% endblock all_items_link %}

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

    owl_{{ uid }}.owlCarousel({
        nav : true, // Show next and prev buttons
        rewind: true,
        //loop: true,
        //slideSpeed : 300,
        //paginationSpeed : 400,
        //autoplay: true,
        //items : 4,
        //itemsDesktop : false,
        //itemsDesktopSmall : false,
        //itemsTablet: false,
        //itemsMobile : false,
        dots: false,
        margin: 12,
        //dotsEach: false,
        stagePadding: 1,

        responsive : {
            // breakpoint from 0 up
            0 : {
                items: 1
            },
            // breakpoint from 480 up
            480 : {
                items: 2
            },
            // breakpoint from 1024 up
            1024 : {
                items: {{ carousel_items }}
            }
        }
    });
    $(".{{ uid }}_next").click(function(){
        owl_{{ uid }}.trigger('next.owl.carousel');
      })
    $(".{{ uid }}_prev").click(function(){
        owl_{{ uid }}.trigger('prev.owl.carousel');
    })
});
</script>
{% endif %}
