<?php
/**
 * Brand Carousel Template File.
 *
 * @var $brandsViewModel \FoundationCommerce\BrandCategories\ViewModel\BrandCategoriesProvider
 */
$brandsViewModel = $viewModels->require(\FoundationCommerce\BrandCategories\ViewModel\BrandCategoriesProvider::class);
$brandResults = $brandsViewModel->getAllBrandCategories();
$brandsCount = $brandResults->getTotalCount();
$brands = $brandResults->getItems();

if ($brandsCount > 5): ?>
    <section class="container-fluid mb-8">
        <div x-data="{ brands: null }"
             x-init="brands = new Swiper($refs.container, {
                  loop: true,
                  slidesPerView: 2,
                  slidesPerGroup: 2,
                  spaceBetween: 20,
                  lazy: true,
                  breakpoints: {
                    768: {
                      slidesPerView: 4,
                      slidesPerGroup: 4,
                    },
                    1024: {
                      slidesPerView: 6,
                      slidesPerGroup: 6,
                    },
                  }
                })"
             class="relative w-full mx-auto flex flex-row">
            <div class="absolute inset-y-0 left-0 z-10 flex items-center">
                <button @click="brands.slidePrev()"
                        aria-label="Previous Slide"
                        class="bg-white flex justify-center items-center w-10 h-10 shadow focus:outline-none">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="chevron-left w-6 h-6"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                </button>
            </div>

            <div class="swiper-container" x-ref="container">
                <div class="swiper-wrapper">
                    <?php foreach($brands as $brand): ?>
                        <div class="swiper-slide">
                            <div class="flex flex-col rounded-sm">
                                <div class="flex-shrink-0">
                                    <a href="<?= $brand->getUrl() ?>">
                                        <?php if ($brand->getData('totonic_brand_logo')): ?>
                                            <img src="<?= $block->getViewFileUrl('images/loading.gif'); ?>"
                                                data-src="<?= $brandsViewModel->getBrandLogoUrl($brand->getData('totonic_brand_logo')) ?>"
                                                 class="swiper-lazy"
                                                 alt="<?= $brand->getName() ?>">
                                        <?php endif ?>
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endforeach ?>
                </div>
            </div>

            <div class="absolute inset-y-0 right-0 z-10 flex items-center">
                <button @click="brands.slideNext()"
                        aria-label="Next Slide"
                        class="bg-white flex justify-center items-center w-10 h-10 shadow focus:outline-none">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="chevron-right w-6 h-6"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                </button>
            </div>
        </div>
    </section>
<?php endif ?>
