{{ $time := now.UnixNano }}
{{ $id := delimit (slice "gallery" $time) "-" }}
{{ $aspect := default "16-9" (.Get "aspectRatio") }}
{{ $images := .Page.Resources.Match (.Get "images") }}
{{ $randomDuration := add (mod (add (mul 13 $time) 97) 1000) 2000 }}

<div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
    <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">

        {{ $num := 0 }}
        {{ range $images }}

        <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{ $num }}" 
        {{ if eq $num 0 }} class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button>

        {{ $num = add $num 1 }}
        {{ end }}

    </div>
    <div class="carousel-inner relative w-full overflow-hidden">

        {{ $num := 0 }}
        {{ range $images }}

        <div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-{{ $aspect }} single_hero_background"
            style="background-image:url({{ . }})"
            data-bs-interval="{{ $randomDuration }}"
        ></div>
        {{ $num = add $num 1 }}
        {{ end }}

    </div>
    <button
        class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
        type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
        <span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button
        class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
        type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
        <span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>