<div class="o-locations js-locations @unless(isset($noSlant) && $noSlant) o-locations--slant @endunless">

    <div class="o-locations__intro">

        <div class="s-text u-spacing-pt8" data-kal="slide-up">
            @if(isset($h1) && $h1)
                <h1 class="">Er is altijd een FarmFun in je buurt</h1>
            @else
                <h2 class="">Er is altijd een FarmFun in je buurt</h2>
            @endif

            <p>FarmFun is verspreid over heel Vlaanderen en diepgeworteld in elke Vlaamse provincie, maar intussen ook
                actief in Nederland. Wie de plak zwaait op elk van de boerderijen? Onze melkkoeien! Terwijl zij naar het
                hilarisch gestuntel van jou en je koe-llega's of vrienden kijken, bezorgen onze Chief Executive Farmers
                en onze spelbegeleiders jullie een farmtastische dag.
            </p>

            <h3>onze locaties</h3>
            <ul class="o-locations__list">
                @foreach($composedLocations as $location)
                    <li class="o-locations__list-item">
                        <button data-location-id="{{$loop->iteration}}"
                                class="o-locations__list-item-button js-locations-list-item">
                            {{$location->translation->name}} @if(isset($location->country) && !empty($location->country))
                                ({{$location->country}})
                            @endif
                        </button>
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="o-locations__map  u-spacing-mt8" data-kal="slide-up">
            <div class="c-map">
                <img class="c-map__background" loading="lazy" src="/img/locations/NLBEMap.svg" alt=""/>
                @foreach($composedLocations as $location)
                    {{ debug($location->translation->name . ' : ' . $location->lat_marker . ' - ' . $location->lon_marker) }}
                    @if($location->lat_marker != 0 && $location->lon_marker != 0)
                        <svg class="c-map__marker js-locations-marker"
                             style="--latitude: {{$location->lat_marker}}; --longitude: {{$location->lon_marker}};"
                             data-location-id="{{$loop->iteration}}" xmlns="http://www.w3.org/2000/svg" width="26"
                             height="41" viewBox="0 0 26 41" fill="currentColor">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M26 0.233612C24.362 0.233612 23.0079 1.45963 22.7921 3.05067C22.7371 3.45638 22.3949 3.76572 21.9884 3.76847C21.9811 3.76878 21.9738 3.76878 21.9665 3.76878H19.6536C16.3503 3.76878 13.6728 6.46712 13.6728 9.79576V26.0452H12.4417V9.79576C12.4417 6.46712 9.76413 3.76878 6.46085 3.76878H4.03348C4.02589 3.76878 4.01827 3.76878 4.01068 3.76847C3.60475 3.76572 3.2632 3.4573 3.20825 3.05189C2.99299 1.46024 1.63889 0.233612 0 0.233612V3.76266C0 3.7648 0.000305176 3.76664 0.000305176 3.76878C1.17579e-06 5.57675 1.45459 7.04265 3.24893 7.04265H6.09378C7.68561 7.04265 8.97626 8.34332 8.97626 9.94752V15.1184H4.92761C4.06232 15.1184 3.30693 15.7765 3.25107 16.6464C3.19004 17.5998 3.93904 18.3923 4.87204 18.3923H7.07111C8.12342 18.3923 8.97626 19.252 8.97626 20.3122V27.1329C8.97626 28.4534 7.91393 29.524 6.60355 29.524C6.60355 31.3259 8.05329 32.7869 9.84155 32.7869H11.4558L12.5337 39.7853C12.6165 40.3284 13.3835 40.3284 13.4663 39.7853L14.5445 32.7869H16.1724C17.9607 32.7869 19.4104 31.3259 19.4104 29.524C18.1556 29.524 17.1382 28.4987 17.1382 27.2342V20.3122C17.1382 19.252 17.9911 18.3923 19.0434 18.3923H21.0879C21.9532 18.3923 22.7086 17.7344 22.7644 16.8646C22.8258 15.9112 22.0767 15.1184 21.1437 15.1184H17.1382V9.94752C17.1382 8.34332 18.4289 7.04265 20.021 7.04265H22.7514C24.5454 7.04265 26 5.57675 26 3.76878C25.9997 3.76664 26 3.7648 26 3.76266V0.233612Z"
                                  fill="currentColor"/>
                        </svg>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    <div class="o-locations__cards js-locations-cards" data-kal="slide-up">
        @foreach($composedLocations as $location)
            <div hidden class="o-locations__card hidden js-locations-card" data-location-id="{{$loop->iteration}}">

                <img class="o-locations__card-image u-clip-path" loading="lazy" data-id="clip-path-image-3"
                     src="{{$location->images->first()->large_image_url ?? ''}}" alt="">

                <div class="o-locations__card-content">
                    <div class="o-locations__card-left">
                        <h3 class="o-locations__card-title">{{$location->translation->name}}</h3>
                        <p class="s-text s-text--on-dark">{!! $location->translation->short_description !!}</p>

                        <a class="c-button u-spacing-mt3" href="{{$location->getLocationLink($links)}}">
                            <span class="c-button__text">Ontdek deze locatie</span>
                        </a>
                    </div>
                    <div class="o-locations__card-right s-text s-text--on-dark">
                        <strong class="">Aanbod activiteiten:</strong>
                        {!! $location->translation->available_activities_description !!}
                    </div>
                </div>

            </div>
        @endforeach
    </div>

</div>