{{--
  Title: Gallery
  Description: Gallery block
  Category: formatting
  Icon: columns
  Keywords: gallery
  Mode: edit
  Align: left
  PostTypes: page post
  SupportsAlign: full
  SupportsMode: true
  SupportsMultiple: true
  EnqueueStyle:
  EnqueueScript:
  EnqueueAssets:
--}}

@php
    $blocks = get_field('blocks');
    $count = count($blocks);
    $amount = str_pad($count, 2, '0', STR_PAD_LEFT);
@endphp

<div class="block-gallery">
    <div class="block-gallery__wrapper glide">

        <div class="block-gallery__pagination">
            <span class="p" data-js="block-gallery__pagination-current"> 01 </span>
            <span class="p"> / </span>
            <span class="p"> {{ $amount }}</span>
        </div>

        <div class="block-gallery__container glide__track" data-glide-el="track">

            <ul class="glide__slides">
                @foreach ($blocks as $block)
                    <li class="block-gallery__block glide__slide" aria-hidden="true">
                        <div class="block-gallery__content">
                            <div class="block-gallery__content-image">
                                <picture>
                                    <source srcset="{{ $block['image_desktop']['url'] }}" media="(min-width: 992px)">
                                    <source srcset="{{ $block['image_mobile']['url'] }}" media="(max-width: 991px)">
                                    <img src="{{ $block['image_desktop']['url'] }}" alt="{{ $block['image_desktop']['alt'] }}">
                                </picture>
                            </div>
                            <div class="block-gallery__content-caption">
                                <div class="p">{{ $block['caption'] }}</div>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>

            <div class="block-gallery__arrows" data-glide-el="controls">
                <a href="#" class="block-gallery__arrows-arrow block-gallery__arrows-arrow--left" data-glide-dir='&lt;' >previous slide</a>
                <a href="#" class="block-gallery__arrows-arrow block-gallery__arrows-arrow--right" data-glide-dir='&gt;' >next slide</a>
            </div>

        </div>

    </div>
</div>