@php
$uniqid = uniqid();
@endphp

<section id="carousel-{{ $uniqid }}" class="pb-8 lg:pb-0">
    <div class="container mx-auto px-8 pb-12 pt-6">
        <x-public.section-title label="{{ $section->title }}" class="pt-12" />
        <div class="communaute text-center max-w-4xl mx-auto">
            <p class="mb-4">Des recettes, conseils et astuces partagés dans la bonne humeur sur mon groupe Facebook
                : </p>
            <div class="flex flex-col lg:flex-row items-center justify-center lg:space-x-16">
                <span class="facebook">
                    <a href="{{ $facebook_url }}" target="_blank" rel="noopener"
                        class="underline font-semibold inline-flex items-center space-x-2">
                        <span class="icon">@svg('images/icons/facebook.svg', 'fill-current
                            text-darkgray h-5 w-5')</span>
                        <span class="label">Florence C.-Conseillère Thermomix-Reims</span>
                    </a>
                </span>
                <span class="instagram flex flex-col lg:flex-row items-center space-x-2">
                    <span class="my-1 lg:my-0">Ou sur Instagram :</span>
                    <a href="{{ $instagram_url }}" target="_blank" rel="noopener"
                        class="underline font-semibold inline-flex items-center space-x-2">
                        <span class="icon">@svg('images/icons/instagram.svg', 'fill-current
                            text-darkgray h-5 w-5')</span>
                        <span class="label">lesgourmandisesdeflo</span>
                    </a>
                </span>
            </div>
        </div>
    </div>
    <div class="lg:container lg:mx-auto lg:px-20 relative">
        <div class="communaute-slider mx-auto h-full">
            @foreach ($section->getCarouselImages() as $slider)
                <div class="communaute-slide flex justify-center items-center mx-auto">
                    <img src="{{ $slider }}" alt="Photo d'une recette réalisée par Florence CLEMENT"
                        loading="lazy" class="communaute-slide_image">
                </div>
            @endforeach
        </div>
        <div class="slider-controls absolute top-1/2 left-0 w-full px-4 transform -translate-y-1/2">
            <button id="prevButton" class="">@svg('images/icons/defilement.svg','fill-current
                text-primary inline-block transform rotate-90')</button>
            <button id="nextButton" class="float-right">@svg('images/icons/defilement.svg','fill-current
                text-primary inline-block transform -rotate-90')</button>
        </div>
    </div>
</section>