{% load i18n %}

<div class="full-height scrollable" data-height-difference=230 id="carousel-container">
    {% for document_page in widget.value.pages.all %}
        <div class="carousel-item">
            <a href="{% url 'documents:document_page_view' document_page.pk %}">
                {% with 'lazy-load-carousel' as image_classes %}
                {% with document_page as instance %}
                {% with widget.attrs.height as display_height %}
                    {% include 'documents/forms/widgets/document_page_image.html' %}
                {% endwith %}
                {% endwith %}
                {% endwith %}
            </a>
            <div class="carousel-item-page-number">
                {% blocktrans with document_page.page_number as page_number and widget.value.pages.count as total_pages %}
                    Page {{ page_number }} of {{ total_pages }}
                {% endblocktrans %}
            </div>
	</div>
    {% empty %}
        <p>{% trans 'No pages to display' %}</p>
    {% endfor %}
</div>
