{% load i18n %}
{% load pyaa %}

{% if banners %}
<div class="carousel w-full" id="bannerCarousel">
    {% for banner in banners %}
    <div id="banner-{{ banner.token }}" class="carousel-item relative w-full {% if not forloop.first %}hidden{% endif %}"
        data-banner-view data-banner-token="{{ banner.token }}">
        <img src="{{ banner.image.url }}" class="w-full" alt="{{ banner.title }}">
        <a href="javascript:void(0);" class="absolute inset-0 z-0" data-banner-click data-banner-token="{{ banner.token }}"
            data-banner-link="{{ banner.link|default:'' }}" data-banner-target-blank="{{ banner.target_blank|lower }}"></a>
        {% if banners|length > 1 %}
        <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between z-10">
            <button class="btn btn-circle btn-sm" data-carousel-prev>❮</button>
            <button class="btn btn-circle btn-sm" data-carousel-next>❯</button>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

{% if banners|length > 1 %}
<div class="flex w-full justify-center gap-2 py-2">
    {% for banner in banners %}
    <button class="btn btn-xs {% if forloop.first %}btn-active{% endif %}" data-carousel-to="{{ forloop.counter0 }}">
        {{ forloop.counter }}
    </button>
    {% endfor %}
</div>
{% endif %}
{% endif %}