{% load wagtailimages_tags %}

{% block style %}
<script async src="https://cdn.ampproject.org/v0.js"></script>

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

{% endblock style %}

<amp-carousel id="carousel-with-preview" width="{{width}}" height="{{height}}" layout="responsive" type="slides"
    role="list" aria-label="Carousel with slide previews"  delay="{{timer}}" loop>
    {% for slide in content %}
    <div class="shadow-2xl">

        <a href="{{slide.url}}" target="_blank">
            <div class="flex w-full justify-center">
                {% image slide.specific.search_image fill-200x200 %}

                <!-- <img src="{{slide.specific.search_image.file.url}}" alt="{{slide.title}}" class="{% if imgH %} h-[{{imgH}}px] {% else %} h-full {% endif %} w-auto">
                </img> -->
            </div>
            <!-- <h1 class="text-gray-900 font-bold line-clamp-2">
                {{content.title}}
            </h1> -->
        </a>
    </div>
    {% endfor %}


</amp-carousel>