@php
$icon = "/img/templates_v2/{$templateName}/icon-gallery.svg";

$photosCount = 3;
@endphp
<section id="gallery">
    <div class="formaTop">
        <div class="position-relative">
            <span class="formaUno"></span>
            <span class="formaDos"></span>
            <span class="formaTres"></span>
        </div>
    </div>
    <div class="container">
        <div class="icon">
            <img src="{{ asset($icon) }}" alt="" />
        </div>
        <div>
            <div class="my-slider">
                @forelse ($invitation->gallery as $photo)
                    <div class="h-100"><img src="{{Storage::url($photo->image_path)}}" class="img-fluid d-block" loading="lazy"></div>
                @empty
                    <div class="h-100"><img src="/img/templates_v2/{{ $templateName }}/carrousel-1.jpg" class="img-fluid d-block" loading="lazy"></div>
                    <div class="h-100"><img src="/img/templates_v2/{{ $templateName }}/carrousel-2.jpg" class="img-fluid d-block" loading="lazy"></div>
                    <div class="h-100"><img src="/img/templates_v2/{{ $templateName }}/carrousel-3.jpg" class="img-fluid d-block" loading="lazy"></div>
                    <div class="h-100"><img src="/img/templates_v2/{{ $templateName }}/carrousel-4.jpg" class="img-fluid d-block" loading="lazy"></div>
                @endforelse
            </div>
        </div>
    </div>
    <div class="formaDown">
        <div class="position-relative">
            <span class="formaUno"></span>
            <span class="formaDos"></span>
            <span class="formaTres"></span>
        </div>
    </div>
</section>
<script type="module">
    if ( $('.my-slider').length > 0 ) {
        var slider = tns({
            container: '.my-slider',
            items: 1,
            gutter: 30,
            controlsText: ['', ''],
            nav: false,
            autoplayButtonOutput: false,
            mouseDrag: true,
            slideBy: 1,
            autoplay: true,
            items: 1,
            responsive: {
                640: {
                    items: 2
                },
                900: {
                    items: {{ $photosCount }}
                }
            }
        });
    }
</script>