{{--@php--}}
{{--    $locations = \App\Repositories\LocationRepository::getHeroData();--}}
{{--@endphp--}}
{{--<section class="locations" style="--locations-bg: url({{ $block->image('image') }});">--}}
{{--    <div class="locations__video-wrap">--}}
{{--        <video class="location-video" src="{{ $block->file('video') }}" autoplay="true" loop="true" muted="muted" poster="{{ $block->image('image') }}"></video>--}}
{{--    </div>--}}
{{--    <div class="container">--}}
{{--        <div class="locations__inner">--}}
{{--            <div class="locations__selector">--}}
{{--                <div id="selector-marker" class="locations__selector-marker"></div>--}}
{{--                @foreach($locations as $location)--}}
{{--                    @php--}}
{{--                        $locationPageRoute = route('location.show', [$location->slug]);--}}
{{--                    @endphp--}}
{{--                <a class="locations__place"--}}
{{--                   href="{{ $locationPageRoute }}"--}}
{{--                     data-img="{{ $location->image('video_poster', 'flexible') }}"--}}
{{--                     data-video="{{ $location->file('video') }}"--}}
{{--                     data-positions="{{ $location->getVacancyCount() }}"--}}
{{--                     data-description="{{ $location->description }}"--}}
{{--                     data-prepositional="{{ $location->title_prepositional }}"--}}
{{--                   rel="noopener"--}}
{{--                >--}}
{{--                    <div class="locations__city">{{ $location->title }}</div>--}}
{{--                    <div class="locations__country">{{ $location->country }}</div>--}}
{{--                </a>--}}
{{--                @endforeach--}}
{{--            </div>--}}
{{--            <div class="locations__page">--}}
{{--                <header class="locations__header">--}}
{{--                    <h1>@lang('messages.Work with us') <span class="js-location-title">@lang('messages.around the world')</span></h1>--}}
{{--                </header>--}}
{{--                <a href class="locations__positions-num js-location-pos-num" rel="noopener"></a>--}}
{{--                <div class="locations__positions-location">--}}
{{--                    <a href class="locations__positions-location-pos js-location-pos" rel="noopener"></a>--}}
{{--                    <span class="locations__positions-location-message">@lang('messages.positions-currently')</span>--}}
{{--                </div>--}}
{{--                <div class="locations__description js-location-description"></div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}


{{--    <script>--}}

{{--        // Loading video on mouse in for every location via theirs data-video-name attribute and other data--}}
{{--        const $link = $('.locations__place');--}}
{{--        const $linkWrapper = $('locations__selector');--}}
{{--        const $videoWrapper = $('.locations__video-wrap');--}}
{{--        const $video = $('.location-video');--}}
{{--        const $marker = $('#selector-marker');--}}
{{--        const $pageTitle = $('.js-location-title');--}}
{{--        const $pagePositions = $('.js-location-pos-num');--}}
{{--        const $pageLocationPos = $('.js-location-pos');--}}
{{--        const $pageDescription = $('.js-location-description');--}}
{{--        const $pagePositionPlural = $('.locations__positions-location-message');--}}
{{--        // const defaultText = 'around the world';--}}
{{--        const breakpointSm = window.matchMedia('(max-width: 720)');--}}
{{--        const breakpointSmMin = window.matchMedia('(min-width: 719px)');--}}
{{--        const breakpointSmMax = window.matchMedia('(max-width: 1200px)');--}}

{{--        const noun = "@lang('messages.positions-currently')".split('|');--}}
{{--        const plural = function(number, five, one, two) {--}}
{{--            number = Math.abs(number);--}}
{{--            number %= 100;--}}
{{--            if (number >= 5 && number <= 20) {--}}
{{--                return five;--}}
{{--            }--}}
{{--            number %= 10;--}}
{{--            if (number == 1) {--}}
{{--                return one;--}}
{{--            }--}}
{{--            if (number >= 2 && number <= 4) {--}}
{{--                return two;--}}
{{--            }--}}
{{--            return five;--}}
{{--        }--}}

{{--        $link.click(function () {--}}

{{--            if (breakpointSmMin.matches && breakpointSmMax.matches) return false;--}}
{{--        });--}}

{{--        $link.mouseenter(function() {--}}
{{--            // Setting current elem--}}
{{--            if (!breakpointSm.matches) {--}}
{{--                $link.removeClass('is-current');--}}
{{--                $(this).addClass('is-current');--}}

{{--                // Add new videoframe and remove old for transition--}}
{{--                var $newVideo = $video.clone().addClass('animate').attr({--}}
{{--                    'src': $(this).data('video'),--}}
{{--                    'poster': $(this).data('img')--}}
{{--                });--}}
{{--                $newVideo.appendTo($videoWrapper);--}}
{{--                $('video:first-child').remove();--}}

{{--                // Set marker position--}}
{{--                var offsetTop = $(this).position().top;--}}
{{--                $marker.show().height($(this).height()).css('top', offsetTop + 15);--}}

{{--                // Set data for selection--}}
{{--                $pageTitle.text($(this).data('prepositional'));--}}
{{--                $pagePositions.text($(this).data('positions'));--}}
{{--                $pageLocationPos.text($(this).data('prepositional'));--}}
{{--                $pageLocationPos.attr('href', $(this).attr('href'));--}}
{{--                $pagePositions.attr('href', $(this).attr('href'));--}}
{{--                $pageDescription.text($(this).data('description'));--}}
{{--                $pagePositionPlural.text(plural($(this).data('positions'), noun[0], noun[1], noun[2]))--}}
{{--            }--}}

{{--            if ($pagePositions.text() > 0) {--}}
{{--                $pagePositions.addClass('locations__positions-num--active')--}}
{{--            }--}}
{{--            else {--}}
{{--                $pagePositions.removeClass('locations__positions-num--active')--}}
{{--            }--}}
{{--        });--}}

{{--        const breakpointChecker = () => {--}}
{{--            // $pageTitle.text(defaultText);--}}
{{--            $link.removeClass('is-current');--}}
{{--            $marker.hide();--}}
{{--        };--}}

{{--        breakpointSm.addListener(breakpointChecker);--}}

{{--        breakpointChecker();--}}
{{--    </script>--}}
{{--</section>--}}