@extends('web.layouts.app')

@push('web.styles')
    @vite('resources/css/web/page/home.css')
@endpush

@php
    function isYoutubeUrl($url)
    {
        return preg_match('/(youtube\.com|youtu\.be)/i', $url);
    }
@endphp

@section('content')
    @if ($general->banner_video_status === true)
        <div class="banner-video">
            @if ($general->banner_video_type === 'video_url')

                @php
                    $videoUrl = $general->banner_video_url;
                @endphp

                @if (isYoutubeUrl($videoUrl))
                    @php
                        preg_match(
                            '/(youtu\.be\/|youtube\.com\/(watch\?v=|embed\/|shorts\/))([a-zA-Z0-9_-]+)/',
                            $videoUrl,
                            $matches,
                        );
                        $videoId = $matches[3] ?? null;
                    @endphp

                    @if ($videoId)
                        <iframe class="w-100 h-100" width="100%" height="100%"
                            src="https://www.youtube.com/embed/{{ $videoId }}?autoplay=1&mute=1&loop=1&controls=0&playlist={{ $videoId }}&modestbranding=1&showinfo=0&rel=0"
                            title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen>
                        </iframe>
                    @endif
                @else
                    <video src="{{ $general->banner_video_url }}" class="w-100 h-100" autoplay muted loop></video>
                @endif
            @elseif ($general->banner_video_type === 'video_file')
                <video src="{{ asset('storage/' . $general->banner_video) }}" class="w-100 h-100" autoplay muted
                    loop></video>
            @endif
        </div>
    @endif

    <div class="container">
        <section class="home-section">
            @if ($bannerAd)
                <div class="banner-image-1 mt-0">
                    <a href="{{ $bannerAd->ad_link ?? '#' }}" target="_blank" rel="noopener noreferrer">
                        <img src="{{ $bannerAd->getFirstMediaUrl('adverts_image') ?: asset('images/placeholder.jpg') }}"
                            alt="{{ $bannerAd->getFirstMedia('adverts_image')?->name ?? 'Ad banner' }}" class="w-100 h-100"
                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/home-ads-placeholder.jpg') }}';">
                    </a>
                </div>
            @endif
            <div class="row gx-3 gx-md-2 gx-xl-3">
                <div class="col-12 col-lg-9 col-xl-9">
                    <div class="row g-2 gx-md-2 gx-xl-3">
                        {{-- Primary Article --}}
                        @if ($primaryArticle)
                            <div class="col-12 col-lg-8 col-xl-8">
                                <div class="text-image-1">
                                    <img src="{{ $primaryArticle->hasMedia('article_poster')
                                        ? $primaryArticle->getFirstMediaUrl('article_poster')
                                        : asset('assets/images/placeholder/article-primary-slot.png') }}"
                                        alt="{{ $primaryArticle->title }}" class="w-100 h-100"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-primary-slot.png') }}';">
                                    <div class="image-overlay-text">
                                        <div class="text-image-1-content">
                                            <p class="overlay-subtitle">
                                                {{ $primaryArticle->categories->first()->name }}
                                                {{ $primaryArticle->subtitle ? ' | ' . $primaryArticle->subtitle : '' }}
                                            </p>
                                            <h2 class="overlay-title">{{ Str::limit($primaryArticle->title, 40) }}</h2>
                                            <a href="{{ route('web.article.solo', $primaryArticle->slug) }}"
                                                class="read-more-btn">Lire</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="col-12 col-lg-8 col-xl-8">
                                <div class="text-image-1">
                                    <img src="{{ asset('assets/images/placeholder/article-primary-slot.png') }}"
                                        alt="{{ $general->site_name }}" class="w-100 h-100"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-primary-slot.png') }}';">
                                    <div class="image-overlay-text">
                                        <div class="text-image-1-content">
                                            <p class="overlay-subtitle">
                                                News
                                            </p>
                                            <h2 class="overlay-title">À venir</h2>
                                            <button class="read-more-btn">Lire</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Side Articles (2 Articles) --}}
                        <div class="col-12 col-lg-4 col-xl-4">
                            <div class="d-flex flex-column flex-lg-column flex-md-row gap-2 gap-md-2 gap-xl-3 h-100">
                                @if ($otherArticles->count() > 0)
                                    @foreach ($otherArticles as $news)
                                        @if ($news)
                                            <div class="text-image-2 text-image-2-lg">
                                                <img src="{{ $news->hasMedia('article_poster')
                                                    ? $news->getFirstMediaUrl('article_poster')
                                                    : asset('assets/images/placeholder/articles.png') }}"
                                                    alt="{{ $news->title }}" class="w-100 h-100"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                                <div class="image-overlay-text">
                                                    <div class="text-image-1-content">
                                                        <p class="overlay-subtitle">
                                                            {{ $news->categories->first()->name }}
                                                            {{ $news->subtitle ? ' | ' . $news->subtitle : '' }}
                                                        </p>
                                                        <h2 class="overlay-title">{{ Str::limit($news->title, 40) }}</h2>
                                                        <a href="{{ route('web.article.solo', $news->slug) }}"
                                                            class="read-more-btn">Lire</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="text-image-2 text-image-2-lg">
                                                <img src="{{ asset('assets/images/placeholder/articles.png') }}"
                                                    alt="{{ $general->site_name }}" class="w-100 h-100"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                                <div class="image-overlay-text">
                                                    <div class="text-image-1-content">
                                                        <p class="overlay-subtitle">
                                                            News
                                                        </p>
                                                        <h2 class="overlay-title">À venir</h2>
                                                        <button class="read-more-btn">Lire</button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                @else
                                    <div class="text-image-2 text-image-2-lg">
                                        <img src="{{ asset('assets/images/placeholder/articles.png') }}"
                                            alt="{{ $general->site_name }}" class="w-100 h-100"
                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                        <div class="image-overlay-text">
                                            <div class="text-image-1-content">
                                                <p class="overlay-subtitle">
                                                    News
                                                </p>
                                                <h2 class="overlay-title">À venir</h2>
                                                <button class="read-more-btn">Lire</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-image-2 text-image-2-lg">
                                        <img src="{{ asset('assets/images/placeholder/articles.png') }}"
                                            alt="{{ $general->site_name }}" class="w-100 h-100"
                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                        <div class="image-overlay-text">
                                            <div class="text-image-1-content">
                                                <p class="overlay-subtitle">
                                                    News
                                                </p>
                                                <h2 class="overlay-title">À venir</h2>
                                                <button class="read-more-btn">Lire</button>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row g-2 pt-2 pt-md-2 pt-xl-3 pb-2 pb-md-2 pb-xl-3 gx-md-2 gx-xl-3">
                        <div class="col-12 col-md-4 col-xl-4">
                            @if ($uniqueArticle)
                                <div class="text-image-2">
                                    <img src="{{ $uniqueArticle->hasMedia('article_poster')
                                        ? $uniqueArticle->getFirstMediaUrl('article_poster')
                                        : asset('assets/images/placeholder/articles.png') }}"
                                        alt="{{ $uniqueArticle->title }}" class="w-100 h-100"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                    <div class="image-overlay-text">
                                        <div class="text-image-1-content">
                                            <p class="overlay-subtitle">
                                                {{ $uniqueArticle->categories->first()->name }}{{ $uniqueArticle->subtitle ? ' | ' . $uniqueArticle->subtitle : '' }}
                                            </p>
                                            <h2 class="overlay-title">
                                                {{ Str::limit($uniqueArticle->title, 40) }}
                                            </h2>
                                            <a href="{{ route('web.article.solo', $uniqueArticle->slug) }}"
                                                class="read-more-btn">Lire</a>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="text-image-2">
                                    <img src="{{ asset('assets/images/placeholder/articles.png') }}"
                                        alt="{{ $general->site_name }}" class="w-100 h-100"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                    <div class="image-overlay-text">
                                        <div class="text-image-1-content">
                                            <p class="overlay-subtitle">
                                                News
                                            </p>
                                            <h2 class="overlay-title">À venir</h2>
                                            <button class="read-more-btn">Lire</button>
                                        </div>
                                    </div>
                                </div>
                            @endif

                        </div>
                        <div class="col-12 col-md-8 col-xl-8">
                            @if ($secondaryArticles->first())
                                <div class="text-image-2">
                                    <img src="{{ $secondaryArticles->first()->hasMedia('article_poster')
                                        ? $secondaryArticles->first()->getFirstMediaUrl('article_poster')
                                        : asset('assets/images/placeholder/article-secondary-slot.png') }}"
                                        alt="{{ $secondaryArticles->first()->title }}" class="w-100 h-100"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-secondary-slot.png') }}';">
                                    <div class="image-overlay-text">
                                        <div class="text-image-1-content">
                                            <p class="overlay-subtitle">
                                                {{ $secondaryArticles->first()->categories->first()->name }}{{ $secondaryArticles->first()->subtitle ? ' | ' . $secondaryArticles->first()->subtitle : '' }}
                                            </p>
                                            <h2 class="overlay-title">
                                                {{ Str::limit($secondaryArticles->first()->title, 40) }}
                                            </h2>
                                            <a href="{{ route('web.article.solo', $secondaryArticles->first()->slug) }}"
                                                class="read-more-btn">Lire</a>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="text-image-2">
                                    <img src="{{ asset('assets/images/placeholder/article-secondary-slot.png') }}"
                                        alt="{{ $general->site_name }}" class="w-100 h-100"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/article-secondary-slot.png') }}';">
                                    <div class="image-overlay-text">
                                        <div class="text-image-1-content">
                                            <p class="overlay-subtitle">
                                                News
                                            </p>
                                            <h2 class="overlay-title">À venir</h2>
                                            <button class="read-more-btn">Lire</button>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3 col-xl-3">
                    <div class="left-image-1 pb-2 pb-lg-2 pb-xl-0">
                        <div class="d-flex w-100 h-100 flex-column border border-2 border-dark">
                            <div class="swiper newsletter-swiper w-100">
                                <div class="swiper-wrapper">
                                    @if ($upcomingEvents->count() > 0)
                                        @foreach ($upcomingEvents as $event)
                                            @if ($event)
                                                <div class="swiper-slide">
                                                    <a href="{{ route('web.event.solo.coming.soon', ['eventSlug' => $event->slug]) }}"
                                                        class="text-decoration-none">
                                                        <img src="{{ $event->hasMedia('event_poster') ? $event->getFirstMediaUrl('event_poster') : asset('assets/images/placeholder/event-upcoming.png') }}"
                                                            alt="Image Banner"
                                                            class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-upcoming.png') }}';">
                                                        <div
                                                            class="location-icon d-flex justify-content-center align-items-center gap-2">
                                                            <i class="bi bi-geo-alt-fill fs-5 text-danger"></i>
                                                            {{ $event->venue->name ?? 'À venir' }}
                                                        </div>
                                                    </a>
                                                </div>
                                            @else
                                                <div class="swiper-slide">
                                                    <img src="{{ asset('assets/images/placeholder/event-upcoming.png') }}"
                                                        alt="Image Banner"
                                                        class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-upcoming.png') }}';">
                                                    <div
                                                        class="location-icon d-flex justify-content-center align-items-center gap-2">
                                                        <i class="bi bi-geo-alt-fill fs-5 text-danger"></i>
                                                        À venir
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    @else
                                        <div class="swiper-slide">
                                            <img src="{{ asset('assets/images/placeholder/event-upcoming.png') }}"
                                                alt="Image Banner"
                                                class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-upcoming.png') }}';">
                                            <div
                                                class="location-icon d-flex justify-content-center align-items-center gap-2">
                                                <i class="bi bi-geo-alt-fill fs-5 text-danger"></i>
                                                À venir
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-2 gx-md-2 gx-xl-3">
                @if ($nextThreeArticles->count() > 0)
                    @foreach ($nextThreeArticles as $article)
                        @if ($article)
                            <div class="col-12 col-md-6 col-lg-3 col-xl-3">
                                <div class="text-image-2">
                                    <img src="{{ $article->hasMedia('article_poster')
                                        ? $article->getFirstMediaUrl('article_poster')
                                        : asset('assets/images/placeholder/articles.png') }}"
                                        alt="{{ $article->title }}" class="w-100 h-100"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                    <div class="image-overlay-text">
                                        <div class="text-image-1-content">
                                            <p class="overlay-subtitle">
                                                {{ $article->categories->first()->name }}{{ $article->subtitle ? ' | ' . $article->subtitle : '' }}
                                            </p>
                                            <h2 class="overlay-title">{{ Str::limit($article->title, 40) }}</h2>
                                            <a href="{{ route('web.article.solo', $article->slug) }}"
                                                class="read-more-btn">Lire</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="col-12 col-md-6 col-lg-3 col-xl-3">
                                <div class="text-image-2">
                                    <img src="{{ asset('assets/images/placeholder/articles.png') }}"
                                        alt="{{ $general->site_name }}" class="w-100 h-100"
                                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                                    <div class="image-overlay-text">
                                        <div class="text-image-1-content">
                                            <p class="overlay-subtitle">
                                                News
                                            </p>
                                            <h2 class="overlay-title">À venir</h2>
                                            <button class="read-more-btn">Lire</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                @else
                    <div class="col-12 col-md-6 col-lg-3 col-xl-3">
                        <div class="text-image-2">
                            <img src="{{ asset('assets/images/placeholder/articles.png') }}"
                                alt="{{ $general->site_name }}" class="w-100 h-100"
                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                            <div class="image-overlay-text">
                                <div class="text-image-1-content">
                                    <p class="overlay-subtitle">
                                        News
                                    </p>
                                    <h2 class="overlay-title">À venir</h2>
                                    <button class="read-more-btn">Lire</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-3 col-xl-3">
                        <div class="text-image-2">
                            <img src="{{ asset('assets/images/placeholder/articles.png') }}"
                                alt="{{ $general->site_name }}" class="w-100 h-100"
                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                            <div class="image-overlay-text">
                                <div class="text-image-1-content">
                                    <p class="overlay-subtitle">
                                        News
                                    </p>
                                    <h2 class="overlay-title">À venir</h2>
                                    <button class="read-more-btn">Lire</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-3 col-xl-3">
                        <div class="text-image-2">
                            <img src="{{ asset('assets/images/placeholder/articles.png') }}"
                                alt="{{ $general->site_name }}" class="w-100 h-100"
                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/articles.png') }}';">
                            <div class="image-overlay-text">
                                <div class="text-image-1-content">
                                    <p class="overlay-subtitle">
                                        News
                                    </p>
                                    <h2 class="overlay-title">À venir</h2>
                                    <button class="read-more-btn">Lire</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="col-12 col-md-6 col-lg-3 col-xl-3">
                    <!-- Newsletter Module -->
                    <div class="text-image-2 cursor-pointer" data-bs-toggle="modal" data-bs-target="#newsletterModal">
                        <img src="{{ asset('assets/images/placeholder/newsletter-placeholder.jpg') }}" alt="Image Banner"
                            class="w-100 h-100">
                    </div>
                </div>
            </div>

            <!-- LA ISLA TV start -->
            <div class="laisla-tv-section">
                <div class="laisla-tv-header">
                    <div class="laisla-tv-box">LA ISLA TV</div>
                    <div class="laisla-tv-line"></div>
                </div>
            </div>
            <div class="swiper laisla-tv-swiper">
                <div class="swiper-wrapper">
                    @if (count($pageData->videos) == 0)
                        <div class="swiper-slide">
                            <div class="laisla-tv-card">
                                <iframe class="w-100 h-100"
                                    src="https://www.youtube.com/embed/z_6ezxP-7pE?si=uiDwJWB_6wl7v5PH&autoplay=0&mute=1&loop=1&controls=0&playlist=z_6ezxP-7pE&modestbranding=1&showinfo=1&rel=0"
                                    title="DREAMERS | Antonio Perrine 'Bani li' - Live @ Caudan Arts Centre Rooftop"
                                    frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen>
                                </iframe>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="laisla-tv-card">
                                <iframe class="w-100 h-100"
                                    src="https://www.youtube.com/embed/asKW9oND2r0?si=lrCs6jfUTHJtWSjv&autoplay=0&mute=1&loop=1&controls=0&playlist=asKW9oND2r0&modestbranding=1&showinfo=0&rel=0"
                                    title="The Prophecy - Where we belong" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen>
                                </iframe>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="laisla-tv-card">
                                <iframe class="w-100 h-100"
                                    src="https://www.youtube.com/embed/g4kLI1V9yqo?si=D5AVOkneUngOTHnF&autoplay=0&mute=1&loop=1&controls=0&playlist=g4kLI1V9yqo&modestbranding=1&showinfo=0&rel=0"
                                    title="DREAMERS on the Beach | The Prophecy 'Zis Souvenir' - Live" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen>
                                </iframe>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="laisla-tv-card">
                                <iframe class="w-100 h-100"
                                    src="https://www.youtube.com/embed/KiBsT7blyu4?si=nUW5fOGswDYpi0Fq?si=D5AVOkneUngOTHnF&autoplay=0&mute=1&loop=1&controls=0&playlist=g4kLI1V9yqo&modestbranding=1&showinfo=0&rel=0"
                                    title="DREAMERS 7 | The Prophecy 'Laglwar' - Live" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen>
                                </iframe>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="laisla-tv-card">
                                <iframe class="w-100 h-100"
                                    src="https://www.youtube.com/embed/g5er4dgf5-U?si=uOk758APNHLzCpXI?si=nUW5fOGswDYpi0Fq?si=D5AVOkneUngOTHnF&autoplay=0&mute=1&loop=1&controls=0&playlist=g4kLI1V9yqo&modestbranding=1&showinfo=0&rel=0"
                                    title="Zulu - 'Mo Ti Bato' (2020)" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen>
                                </iframe>
                            </div>
                        </div>
                    @else
                        @foreach ($pageData->videos as $video)
                            @php
                                $videoUrl = $video['link'];
                            @endphp

                            <div class="swiper-slide">
                                <div class="laisla-tv-card">
                                    @if (isYoutubeUrl($videoUrl))
                                        @php
                                            preg_match(
                                                '/(youtu\.be\/|youtube\.com\/(watch\?v=|embed\/|shorts\/))([a-zA-Z0-9_-]+)/',
                                                $videoUrl,
                                                $matches,
                                            );
                                            $videoId = $matches[3] ?? null;
                                        @endphp

                                        @if ($videoId)
                                            <iframe class="w-100 h-100"
                                                src="https://www.youtube.com/embed/{{ $videoId }}?autoplay=0&mute=1&loop=1&controls=0&playlist={{ $videoId }}&modestbranding=1&showinfo=0&rel=0"
                                                title="{{ $video['title'] }}" frameborder="0"
                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                allowfullscreen>
                                            </iframe>
                                        @endif
                                    @else
                                        <video src="{{ $videoUrl }}" class="w-100 h-100" autoplay muted loop></video>
                                    @endif

                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- LA ISLA TV end -->
            <!-- THROWBACK start -->

            <div class="row">
                <div class="col-12 col-md-12 col-lg-8 col-xl-8 col-xxl-9">
                    <div class="laisla-tv-section">
                        <div class="laisla-tv-header">
                            <div class="laisla-tv-box">THROWBACK</div>
                            <div class="laisla-tv-line"></div>
                        </div>
                    </div>
                    <div class="swiper throwback-swiper">
                        <div class="swiper-wrapper">
                            @foreach ($events as $event)
                                <div class="swiper-slide" data-title="{{ $event->title }}"
                                    data-description="{{ $event->description_html }}" data-slug="{{ $event->slug }}"
                                    data-image="{{ $event->getFirstMediaUrl('event_poster') }}">
                                    <div class="throwback-card">
                                        <img src="{{ asset($event->getFirstMediaUrl('event_poster')) }}"
                                            alt="{{ $event->title }}" class="w-100 h-100">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="row g-0 pt-3">
                        <div class="col-12 col-lg-4 col-xl-5">
                            <div class="en-savoir-image">
                                <img id="tb-big-image" src="{{ asset('assets/images/placeholder/event-finished.png') }}"
                                    alt="Concert Event" class="w-100 h-100 object-fit-cover"
                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-finished.png') }}';">
                            </div>
                        </div>
                        <div class="col-12 col-lg-8 col-xl-7">
                            <div class="en-savoir-content ps-xxl-0">
                                <p class="en-savoir-subtitle">THROWBACK</p>
                                <h2 id="tb-title" class="en-savoir-title">DREAMERS XX</h2>
                                <p id="tb-description" class="en-savoir-text">
                                    Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex praefecto,
                                    exploratius causam Maximino spectante, convictus codicem noxiarum artium nondum per
                                    aetatem
                                    firmato consilio descripsisse, exulque mittendus, ut sperabatur, patris inpulsu
                                    provocavit
                                    ad principium, ubi audientia commissa introspicere citra gestiens iudicium, quod agebat,
                                    nihil sane quidem memorabile, sed in litteris variis et multiplicibus dissimulatum est.
                                </p>
                                <a href="#" id="tb-link" class="social-btn follow-btn text-decoration-none">
                                    EN SAVOIR +
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-4 col-xl-4 col-xxl-3 ps-lg-1">
                    <div class="laisla-tv-section">
                        <div class="laisla-tv-header">
                            <div class="laisla-tv-line"></div>
                            <div class="laisla-tv-box">FAN ZONE</div>
                        </div>
                    </div>
                    <div class="fan-zone">
                        <div class="social-panel">
                            <div class="fan-zone-social-icon youtube-icon">
                                <svg width="20" height="20" viewBox="0 -3 20 20" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    fill="currentColor">
                                    <g transform="translate(-300.000000, -7442.000000)" fill="currentColor">
                                        <g transform="translate(56.000000, 160.000000)">
                                            <path
                                                d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289">
                                            </path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                            <div class="social-count">10,900 subscribers</div>
                            <a href="{{ $general->youtube_link ?? '#' }}" target="_blank"
                                class="social-btn follow-btn">SUBSCRIBE</a>
                        </div>
                        <div class="social-panel">
                            <div class="fan-zone-social-icon instagram-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
                                        fill="currentColor"></path>
                                    <path
                                        d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z"
                                        fill="currentColor"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z"
                                        fill="currentColor"></path>
                                </svg>
                            </div>
                            <div class="social-count">11,119 followers</div>
                            <a href="{{ $general->instagram_link ?? '#' }}" target="_blank"
                                class="social-btn follow-btn">FOLLOW</a>
                        </div>
                        <div class="social-panel">
                            <div class="fan-zone-social-icon tiktok-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M22.459 6.84582V10.5048C22.2623 10.5048 22.0262 10.5442 21.7902 10.5442C20.0197 10.5442 18.3672 9.87532 17.1082 8.81303V16.6032C17.1082 18.177 16.5967 19.672 15.6918 20.8524C14.4328 22.5442 12.3869 23.6852 10.0656 23.6852C7.54755 23.6852 5.34428 22.3475 4.1246 20.3802C5.38362 21.5606 7.07542 22.3081 8.9246 22.3081C11.2066 22.3081 13.2525 21.2065 14.5115 19.4753C15.3771 18.295 15.9279 16.8393 15.9279 15.2261V7.39664C17.1869 8.49828 18.8 9.12778 20.6098 9.12778C20.8459 9.12778 21.0426 9.12778 21.2787 9.08844V6.72778C21.6328 6.80647 21.9476 6.84582 22.3017 6.84582H22.459Z"
                                        fill="currentColor"></path>
                                    <path
                                        d="M11.0492 9.56058V13.613C10.7738 13.5344 10.459 13.495 10.1836 13.495C8.45246 13.495 7.03606 14.9507 7.03606 16.7212C7.03606 17.1147 7.11475 17.4688 7.23279 17.8229C6.4459 17.2327 5.89508 16.2885 5.89508 15.2262C5.89508 13.4557 7.31147 11.9999 9.04262 11.9999C9.35738 11.9999 9.63279 12.0393 9.9082 12.118V9.52124C9.98688 9.52124 10.0656 9.52124 10.1443 9.52124C10.459 9.52124 10.7738 9.52124 11.0492 9.56058Z"
                                        fill="currentColor"></path>
                                    <path
                                        d="M17.6984 3.93442C16.9902 3.30492 16.4787 2.43934 16.2033 1.53442H17.1475C17.1475 1.73115 17.1475 1.88852 17.1475 2.08524C17.2262 2.71475 17.4229 3.34426 17.6984 3.93442Z"
                                        fill="currentColor"></path>
                                    <path
                                        d="M21.318 6.76721V9.12787C21.1213 9.16721 20.8853 9.16721 20.6492 9.16721C18.8787 9.16721 17.2262 8.49836 15.9672 7.43606V15.2262C15.9672 16.8 15.4558 18.2951 14.5508 19.4754C13.2525 21.2066 11.2459 22.3082 8.96395 22.3082C7.11477 22.3082 5.42297 21.5607 4.16395 20.3803C3.4951 19.2787 3.10165 18.0197 3.10165 16.6426C3.10165 12.8262 6.13116 9.71803 9.90821 9.6V12.1967C9.6328 12.118 9.31805 12.0787 9.04264 12.0787C7.31149 12.0787 5.8951 13.5344 5.8951 15.3049C5.8951 16.3672 6.40657 17.3508 7.2328 17.9016C7.66559 19.1213 8.84592 20.0262 10.1836 20.0262C11.9148 20.0262 13.3312 18.5705 13.3312 16.8V1.53442H16.2033C16.4787 2.47869 16.9902 3.30492 17.6984 3.93442C18.4066 5.35082 19.7443 6.41311 21.318 6.76721Z"
                                        fill="currentColor"></path>
                                    <path
                                        d="M9.9082 8.18367V9.52137C6.13115 9.63941 3.10164 12.7476 3.10164 16.564C3.10164 17.941 3.49508 19.2001 4.16393 20.3017C2.82623 19.0033 2 17.1935 2 15.1476C2 11.2525 5.14754 8.10498 9.00328 8.10498C9.31803 8.10498 9.63279 8.14432 9.9082 8.18367Z"
                                        fill="currentColor"></path>
                                    <path
                                        d="M16.2033 1.53443H13.3311V16.7213C13.3311 18.4918 11.9148 19.9475 10.1836 19.9475C8.80656 19.9475 7.66557 19.082 7.23279 17.823C7.74426 18.177 8.37377 18.4131 9.04262 18.4131C10.7738 18.4131 12.1902 16.9967 12.1902 15.2262V0H16.0066V0.0786885C16.0066 0.236066 16.0066 0.393443 16.0459 0.55082C16.0459 0.865574 16.1246 1.21967 16.2033 1.53443Z"
                                        fill="currentColor"></path>
                                    <path
                                        d="M21.318 5.31138V6.72777C19.7443 6.41301 18.4066 5.35072 17.659 3.93433C18.6426 4.83924 19.9016 5.35072 21.318 5.31138Z"
                                        fill="currentColor"></path>
                                </svg>
                            </div>
                            <div class="social-count">2,027 followers</div>
                            <a href="{{ $general->tiktok_link ?? '#' }}" target="_blank"
                                class="social-btn follow-btn">FOLLOW</a>
                        </div>
                        <div class="social-panel">
                            <div class="fan-zone-social-icon facebook-icon">
                                <svg width="20" height="20" viewBox="-5 0 20 20" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    fill="currentColor">
                                    <g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
                                        <g transform="translate(-385.000000, -7399.000000)" fill="currentColor">
                                            <g transform="translate(56.000000, 160.000000)">
                                                <path
                                                    d="M335.821282,7259 L335.821282,7250 L338.553693,7250 L339,7246 L335.821282,7246 L335.821282,7244.052 C335.821282,7243.022 335.847593,7242 337.286884,7242 L338.744689,7242 L338.744689,7239.14 C338.744689,7239.097 337.492497,7239 336.225687,7239 C333.580004,7239 331.923407,7240.657 331.923407,7243.7 L331.923407,7246 L329,7246 L329,7250 L331.923407,7250 L331.923407,7259 L335.821282,7259 Z"
                                                    id="facebook-[#176]"> </path>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                            <div class="social-count">39,000 fans</div>
                            <a href="{{ $general->facebook_link ?? '#' }}" target="_blank"
                                class="social-btn follow-btn">LIKE</a>
                        </div>
                    </div>
                    <div class="row g-3 g-lg-2 g-xl-3 pt-3">
                        @if ($artists->count() > 0)
                            @foreach ($artists as $artist)
                                <div class="col-6">
                                    @if ($artist)
                                        <div class="artist-card">
                                            <div class="artist-image">
                                                <img src="{{ $artist->hasMedia('artist_avatar') ? $artist->getFirstMediaUrl('artist_avatar') : asset('assets/images/placeholder/artist.png') }}"
                                                    alt="{{ $artist->name }}" class="w-100 h-100 object-fit-cover"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/artist.png') }}';">
                                            </div>

                                            <div class="artist-info">
                                                <h3 class="artist-name">{{ $artist->name }}</h3>
                                                <a href="{{ $artist->slug ? route('web.artistes.solo', $artist->slug) : '#' }}"
                                                    class="artist-link">>> Voir la fiche</a>
                                            </div>
                                        </div>
                                    @else
                                        <div class="artist-card">
                                            <div class="artist-image">
                                                <img src="{{ asset('assets/images/placeholder/artist.png') }}"
                                                    alt="{{ $general->site_name }}" class="w-100 h-100 object-fit-cover"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/artist.png') }}';">
                                            </div>

                                            <div class="artist-info">
                                                <h3 class="artist-name">À venir</h3>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @else
                            <div class="col-6">
                                <div class="artist-card">
                                    <div class="artist-image">
                                        <img src="{{ asset('assets/images/placeholder/artist.png') }}"
                                            alt="{{ $general->site_name }}" class="w-100 h-100 object-fit-cover"
                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/artist.png') }}';">
                                    </div>

                                    <div class="artist-info">
                                        <h3 class="artist-name">À venir</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="artist-card">
                                    <div class="artist-image">
                                        <img src="{{ asset('assets/images/placeholder/artist.png') }}"
                                            alt="{{ $general->site_name }}" class="w-100 h-100 object-fit-cover"
                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/artist.png') }}';">
                                    </div>

                                    <div class="artist-info">
                                        <h3 class="artist-name">À venir</h3>
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
            @if ($bannerAdSecondary)
                <div class="banner-image-1 mb-0">
                    <a href="{{ $bannerAdSecondary->ad_link ?? '#' }}" target="_blank" rel="noopener noreferrer">
                        <img src="{{ $bannerAdSecondary->getFirstMediaUrl('adverts_image') ?: asset('images/placeholder.jpg') }}"
                            alt="{{ $bannerAdSecondary->getFirstMedia('adverts_image')?->name ?? 'Ad banner' }}"
                            class="w-100 h-100"
                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/home-ads-placeholder.jpg') }}';"></a>
                </div>
            @endif
            <div class="la-isla-social-club">
                <div class="row g-2 g-md-3 gx-xl-3">
                    <div class="col-12 col-lg-9">
                        <div class="la-isla-content">
                            <h1 class="la-isla-title">
                                @if ($pageData->title)
                                    {{ $pageData->title ? $pageData->title : 'LA ISLA SOCIAL CLUB, UN MÉDIA ET DES ÉVÉNEMENTS' }}
                                @else
                                    LA ISLA SOCIAL CLUB, UN MÉDIA ET DES ÉVÉNEMENTS
                                @endif
                            </h1>

                            <div class="la-isla-text">
                                @if ($pageData->text)
                                    {!! $pageData->text !!}
                                @else
                                    <p>
                                        a Isla Social Club place I'lle Maurice au cceur des nouvelles tendances culturelles
                                        internationales en imaginant des rencontres artistiques créatives et fédératrices.
                                        Suivez nos événements sur I 'ile: La Isla 2068, Dreamers, We Love Maurice - The
                                        Party... et consultez notre média, Le Lab, le site web branché actualité culturelle
                                        des talents émergents de Maurice et d'ailleurs. Vous souhaitez découvrir I'ile
                                        Maurice qu'on aime, authentique et moderne ? Suivez La Isla TV, Ia chaine YouTube de
                                        La Isla Social Club. De nos événements å nos concepts We Love Maurice et Good
                                        Morning Mauritius, La Isla TV explore les plus beaux sites de l'ile, de son
                                        patrimoine å ses rues, des spots touristiques aux sites méconnus, toujours en
                                        compagnie d'artistes iconiques ou de nouveaux talents. De nos événements å nos
                                        concepts We Love Maurice et Good Morning Mauritius, La Isla TV explore Ies plus
                                        beaux sites de l'ile, de son patrimoine å ses rues, des spots touristiques aux sites
                                        méconnus, toujours en compagnie d'artistes iconiques ou de nouveaux talents.
                                    </p>
                                @endif
                            </div>
                            <div class="la-isla-logos">
                                <div class="swiper la-isla-logo-swiper">
                                    <div class="swiper-wrapper">
                                        @if ($partners->isNotEmpty())
                                            @foreach ($partners as $partner)
                                                <div class="swiper-slide">
                                                    <div class="compnay-logos">
                                                        @if ($partner)
                                                            <img src="{{ asset($partner->getFirstMediaUrl('partner_logo')) }}"
                                                                alt="{{ $partner->name }}" class="w-100 h-100"
                                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/partner.png') }}';">
                                                        @else
                                                            <img src="{{ asset('assets/images/placeholder/partner.png') }}"
                                                                alt="{{ $general->site_name }}" class="w-100 h-100"
                                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/partner.png') }}';">
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if ($buzzArticles->isNotEmpty())
                        <div class="col-12 col-lg-3">
                            <div class="buzz-sidebar">
                                <h2 class="buzz-title">BUZZ</h2>
                                <div class="buzz-entries">
                                    @foreach ($buzzArticles as $index => $article)
                                        <div class="buzz-entry">
                                            <div class="buzz-number">{{ $index + 1 . ' .' }}</div>
                                            <div class="buzz-content">
                                                <h3 class="buzz-headline">
                                                    <a href="{{ route('web.article.solo', $article->slug) }}"
                                                        class="text-decoration-none text-white">
                                                        {{ Str::limit($article->title, 50) }}
                                                    </a>
                                                </h3>
                                                <div class="buzz-clicks">
                                                    {{ ($article->views->views ?? 0) . ' Clics' }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="buzz-divider"></div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- EN SAVOIR END -->
        </section>
    </div>
@endsection
@push('web.scripts')
    <script>
        window.translations = window.translations || {};
        window.translations.newsletterSuccess = @json(__('admin.newsletter.success'));
        window.translations.newsletterFailed = @json(__('admin.newsletter.error'));

        document.addEventListener('DOMContentLoaded', function() {
            const laislaTvSwiper = new Swiper('.laisla-tv-swiper', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: false,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                //     type: 'bullets',
                // },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    640: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 10,
                    },
                    1024: {
                        slidesPerView: 4,
                        spaceBetween: 10,
                    },
                    1200: {
                        slidesPerView: 4,
                        spaceBetween: 17,
                    },
                    1400: {
                        slidesPerView: 4,
                        spaceBetween: 17,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const laislaTvSwiper = new Swiper('.throwback-swiper', {
                slidesPerView: 1,
                spaceBetween: 20,
                autoplay: false,
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                //     type: 'bullets',
                // },
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev',
                // },
                breakpoints: {
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 17,
                    },
                    640: {
                        slidesPerView: 2,
                        spaceBetween: 17,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 17,
                    },
                    1024: {
                        slidesPerView: 3,
                        spaceBetween: 10,
                    },
                    1200: {
                        slidesPerView: 5,
                        spaceBetween: 17,
                    },
                    1400: {
                        slidesPerView: 5,
                        spaceBetween: 17,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const laislaTvSwiper = new Swiper('.la-isla-logo-swiper', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: false,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                //     type: 'bullets',
                // },
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev',
                // },
                breakpoints: {
                    320: {
                        slidesPerView: 2,
                        spaceBetween: 17,
                    },
                    640: {
                        slidesPerView: 3,
                        spaceBetween: 17,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 17,
                    },
                    1024: {
                        slidesPerView: 6,
                        spaceBetween: 17,
                    },
                    1400: {
                        slidesPerView: 6,
                        spaceBetween: 17,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
            const laislaTvSwiper = new Swiper('.newsletter-swiper', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: false,
                // autoplay: {
                //     delay: 300,
                //     disableOnInteraction: false,
                //     pauseOnMouseEnter: true,
                // },
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                //     type: 'bullets',
                // },
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev',
                // },
                breakpoints: {
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 17,
                    },
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 17,
                    },
                    768: {
                        slidesPerView: 1,
                        spaceBetween: 17,
                    },
                    1024: {
                        slidesPerView: 1,
                        spaceBetween: 17,
                    },
                    1400: {
                        slidesPerView: 1,
                        spaceBetween: 17,
                    },
                },
                speed: 600,
                grabCursor: true,
                watchOverflow: true,
            });
        });

        document.addEventListener("DOMContentLoaded", () => {

            const slides = document.querySelectorAll(".throwback-swiper .swiper-slide");

            if (slides.length > 0) {
                const firstSlide = slides[0];

                const title = firstSlide.dataset.title;
                const description = firstSlide.dataset.description;
                const image = firstSlide.dataset.image;
                const slug = firstSlide.dataset.slug;

                document.getElementById("tb-title").textContent = title;
                document.getElementById("tb-description").textContent = description;

                const img = document.getElementById("tb-big-image");
                img.src = image;
                img.classList.remove("d-none");

                document.getElementById("tb-link").href =
                    "{{ route('web.event.solo.finish', ['eventSlug' => 'SLUG_PLACEHOLDER']) }}"
                    .replace('SLUG_PLACEHOLDER', slug);

            }

            slides.forEach(slide => {
                slide.addEventListener("click", () => {

                    const title = slide.dataset.title;
                    const description = slide.dataset.description;
                    const image = slide.dataset.image;
                    const slug = slide.dataset.slug;

                    document.getElementById("tb-title").textContent = title;
                    document.getElementById("tb-description").textContent = description;

                    const img = document.getElementById("tb-big-image");
                    img.src = image;
                    img.classList.remove("d-none");

                    document.getElementById("tb-link").href =
                        "{{ route('web.event.solo.finish', ['eventSlug' => 'SLUG_PLACEHOLDER']) }}"
                        .replace('SLUG_PLACEHOLDER', slug);
                });
            });

        });
    </script>
@endpush