{{ $id := default (printf "gallery-%d" (now.UnixNano)) (.Get "id") }}
<div class="image-gallery" id="{{ $id }}">
    <div class="gallery-slider">
        {{ $images := .Inner | transform.Unmarshal }}
        {{ range $index, $image := $images }}
            <div class="slide{{ if eq $index 0 }} active{{ end }}" data-index="{{ $index }}">
                <img src="{{ $image.src }}" alt="{{ $image.alt | default "" }}">
                <div class="gallery-navigation">
                    <div class="prev-slide" onclick="moveSlide('{{ $id }}', -1)">&#10094;</div>
                    <div class="next-slide" onclick="moveSlide('{{ $id }}', 1)">&#10095;</div>
                </div>
                {{ if $image.caption }}
                <div class="slide-caption">{{ $image.caption | markdownify }}</div>
                {{ end }}
            </div>
        {{ end }}
    </div>
    <div class="gallery-indicator">
        {{ range $index, $image := $images }}
            <span class="dot{{ if eq $index 0 }} active{{ end }}" onclick="showSlide('{{ $id }}', {{ $index }})"></span>
        {{ end }}
    </div>
</div>