{% 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 %}
    {% for pub in publications %}
    {% if forloop.first %}
    <div class="col-12 d-none d-lg-block">
        <div class="card-wrapper card-space">
            <div class="card card-bg no-after">
                <div class="card-body ps-lg-0">
                    <div class="row h-100">
                        {% if pub.publication.image_url %}
                        <div class="col-12 col-lg-6">

                            {% block categories_buttons_1 %}
                            {% if pub.publication.categories|length > 1 %}
                            <div class="etichetta d-lg-none">
                                {% for cat in pub.publication.categories %}
                                <span class="badge rounded-pill badge-grey-unical my-1 py-2 px-4 me-1">
                                    <a class="no-color" href="{% call obj=pub method='get_url_list' category_name=cat.name %}">
                                        <b>{{ cat.name }}</b>
                                    </a>
                                </span>
                                {% endfor %}
                            </div>
                            {% endif %}
                            {% endblock categories_buttons_1 %}

                            <div class="img-responsive-wrapper mb-3 mx-n4 d-lg-none ">
                                <div class="img-responsive img-responsive-panoramic">
                                    <figure class="img-wrapper">
                                      <a href="{{ pub.url }}">
                                        <img src="{{ pub.publication.image_url }}"
                                             title="{{ pub.publication.image_title }}"
                                             alt="{{ pub.publication.image_description }}"
                                             loading="lazy">
                                      </a>
                                    </figure>
                                </div>
                            </div>
                            <div class="img-responsive-wrapper d-none d-lg-block h-100">
                                <div class="img-responsive img-responsive-panoramic h-100">
                                    <figure class="img-wrapper">
                                      <a href="{{ pub.url }}" class="d-none d-lg-block h-100">
                                            <img src="{{ pub.publication.image_url }}"
                                                 title="{{ pub.publication.image_title }}"
                                                 alt="{{ pub.publication.image_description }}"
                                                 class="h-100"
                                                 loading="lazy">
                                        </a>
                                    </figure>
                                </div>
                            </div>
                        </div>

                        {% endif %}
                        <div class="col-12 col-lg-6 ps-lg-4">

                            {% block categories_buttons_2 %}
                            {% if pub.publication.categories|length > 1 %}
                            <div class="etichetta d-none d-lg-block">
                                {% for cat in pub.publication.categories %}
                                <span class="badge rounded-pill badge-grey-unical my-1 py-2 px-4 me-1">
                                    <a class="no-color" href="{% call obj=pub method='get_url_list' category_name=cat.name %}">
                                        <b>{{ cat.name }}</b>
                                    </a>
                                </span>
                                {% endfor %}
                            </div>
                            {% endif %}
                            {% endblock categories_buttons_2 %}

                            <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>

                            <a class="no-color" href="{{ pub.url }}">
                                <h4 class="card-title">
                                    {{ pub.publication.title }}
                                </h4>
                            </a>
                            {% if pub.publication.subheading %}
                            <p class="card-text">
                                {{ pub.publication.subheading }}
                            </p>
                            {% endif %}

                            {% include "includes/social_share.html" with share_title=pub.publication.title share_url=request.get_host|add:pub.url %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if carousel_items > 1 %}
    <div class="custom-unical owl-carousel d-none d-lg-block" id="carousel_{{ uid }}">
    {% endif %}
    {% else %}

        <div class="card-wrapper card-space">
            <div class="card card-bg no-after">
                <div class="card-body">
                    {% block desktop_item_body %}

                    {% block categories_buttons_3 %}
                    {% if pub.publication.categories|length > 1 %}
                    <div class="etichetta">
                        {% for cat in pub.publication.categories %}
                            <span class="badge rounded-pill badge-grey-unical my-1 py-2 px-4 me-1">
                                <a class="no-color" href="{% call obj=pub method='get_url_list' category_name=cat.name %}">
                                    <b>{{ cat.name }}</b>
                                </a>
                            </span>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% endblock categories_buttons_3 %}

                    {% if pub.publication.image_url %}
                    <div class="img-responsive-wrapper mb-3 mx-n4" {% block categories_margin_3 %}{% if pub.publication.categories|length == 1 %}style="margin-top: -24px"{% endif %}{% endblock categories_margin_3 %}>
                        <div class="img-responsive img-responsive-panoramic">
                            <figure class="img-wrapper">
                              <a href="{{ pub.url }}">
                                <img src="{{ pub.publication.image_url }}"
                                     title="{{ pub.publication.image_title }}"
                                     alt="{{ pub.publication.image_description }}"
                                     loading="lazy">
                              </a>
                            </figure>
                        </div>
                    </div>
                    {% endif %}
                    <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>
                    {% block desktop_item_title %}
                    <h4 class="card-title">
                        <a href="{{ pub.url }}" class="no-color" title="{{ pub.publication.title }}">
                            {{ pub.publication.title|truncatechars:120 }}
                        </a>
                    </h4>
                    {% endblock desktop_item_title %}

                    {% block desktop_subheading %}
                    {% if not pub.publication.image_url %}
                    <p class="card-text">
                        {{ pub.publication.subheading|truncatechars:135 }}
                    </p>
                    {% endif %}
                    {% endblock desktop_subheading %}

                    {% include "includes/social_share.html" with share_title=pub.publication.title share_url=request.get_host|add:pub.url %}
                    {% endblock desktop_item_body %}
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}

    {% if carousel_items > 1 %}
    </div>
    {% endif %}

    <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 %}

                    {% block categories_buttons_4 %}
                    {% if categories|length != 1 %}
                    <div class="etichetta">
                        {% for cat in pub.publication.categories %}
                            <span class="badge rounded-pill badge-grey-unical my-1 py-2 px-4 me-1">
                                <a class="no-color" href="{% call obj=pub method='get_url_list' category_name=cat.name %}">
                                    <b>{{ cat.name }}</b>
                                </a>
                            </span>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% endblock categories_buttons_4 %}

                    {% if pub.publication.image_url %}
                    <div class="img-responsive-wrapper mb-3 mx-n4" {% block categories_margin_4 %}{% if pub.publication.categories|length == 1 %}style="margin-top: -24px"{% endif %}{% endblock categories_margin_4 %}>
                        <div class="img-responsive img-responsive-panoramic">
                            <figure class="img-wrapper">
                              <a href="{{ pub.url }}">
                                <img src="{{ pub.publication.image_url }}"
                                     title="{{ pub.publication.image_title }}"
                                     alt="{{ pub.publication.image_description }}"
                                     loading="lazy">
                              </a>
                            </figure>
                        </div>
                    </div>
                    {% endif %}
                    <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>
                    {% block mobile_item_title %}
                    <h4 class="card-title">
                        <a href="{{ pub.url }}" class="no-color" title="{{ pub.publication.title }}">
                            {{ pub.publication.title|truncatechars:120 }}
                        </a>
                    </h4>
                    {% endblock mobile_item_title %}

                    {% block mobile_subheading %}
                    {% if not pub.publication.image_url %}
                    <p class="card-text">
                        {{ pub.publication.subheading|truncatechars:135 }}
                    </p>
                    {% endif %}
                    {% endblock mobile_subheading %}

                    {% include "includes/social_share.html" with share_title=pub.publication.title share_url=request.get_host|add:pub.url %}
                    {% endblock mobile_item_body %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

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

{% block all_items_link %}
<p class="mt-3 ms-2">
    <a href="{{ page_news_suffix }}" class="no-color">
        <span class="text-black fw-bold">
            <svg class="icon me-2">
                <use xlink:href="{% static '/svg/sprites.svg' %}#it-arrow-right-circle"></use>
            </svg>
            {% trans "Go to all news" %}
        </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: 0,

        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 %}
