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


{% if carousel_items %}

{% with carousel_items|length as count %}
<div class="row d-lg-flex">

    {% for item in carousel_items %}
        {% if count > 2 %}
        <div class="col-12 col-lg-4">
        {% elif count == 1 %}
        <div class="col-12">
        {% else %}
        <div class="col-12 col-lg-6">
        {% endif %}
            <!--start card-->
            <div class="card-wrapper card-space">
                <div class="card card-bg no-after">
                    <div class="card-body">
                        {% if item.image %}
                        <div class="img-responsive-wrapper mb-3">
                            <div class="img-responsive img-responsive-panoramic">
                                <figure class="img-wrapper">
                                    <img src="{{ item.image.file.url }}"
                                         title="{{ item.image.name }}"
                                         alt="{{ item.image.name }}">
                                </figure>
                            </div>
                        </div>
                        {% endif %}

                        {% if item.pre_heading %}
                        <div class="category-top">
                            <span>{{ item.pre_heading }}</span>
                        </div>
                        {% endif %}
                        {% if item.heading %}
                        <h4 class="card-title">
                            {{ item.heading }}
                        </h4>
                        {% endif %}
                        {% if item.description %}
                        <p class="card-text">
                            {{ item.description }}
                        </p>
                        {% endif %}

                        {% for link in item.get_links %}
                        <p>
                            <a class="read-more"
                               style="position: inherit"
                               href="{{ link.url }}">
                                <span class="text">{{ link.get_title }}</span>
                                <svg class="icon">
                                    <use xlink:href="{% static 'svg/sprite.svg' %}#it-arrow-right"></use>
                                </svg>
                            </a>
                        </p>
                        {% endfor %}

                    </div>
                </div>
            </div>
            <!--end card-->
        </div>
    {% endfor %}

</div>
{% endwith %}
{% endif %}
