{% load static %}
{% load app_tags %}

<script type="text/javascript" src="{% static 'portal/js/carouselCards.js' %}"></script>

<div id="carouselCards" class="carousel carousel-cards slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
        {% for card in cards %}
            <div class="item col-xs-4 {% if forloop.first %}active{% endif %}">
                <div class="card">
                    <div class="card__images">
                        <img class="card__image" src="{{ card.image | cloud_storage }}">
                    </div>
                    <div class="card__text">
                        <h5 class="card__title">{{ card.title }}</h5>
                        {% if card.description %}
                            <p>{{ card.description }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="carousel-nav text-center">
        <a class="button prev disabled" data-target="#carouselCards" data-slide="prev">
            <span class="iconify" data-icon="mdi:chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="button next" data-target="#carouselCards" data-slide="next">
            <span class="iconify" data-icon="mdi:chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<script>
    setUpCarouselCards({{ cards | length }})
</script>
