@php use App\Models\Location;use App\Repositories\OfficeRepository; @endphp
<section class="app-section map">
    <div class="container">
        <aside class="map__coords js-map-links">
            <aside class="map__coords js-map-links">
                @foreach(OfficeRepository::getOffices() as $office)
                    @php /** @var Location $office */ @endphp
                    @php
                        if (empty($office->map_coords)) {
                            continue;
                        }
                        [$x, $y] = explode(',', $office->map_coords);

                        // TODO Костыль надо хранить в базе
                        $class = in_array($office->title, ['London', 'Limassol', 'Gibraltar']) ? 'map__coords-city--left' : '';
                    @endphp
                    <a class="map__coords-city {{ $class }}" style="--x-coord: {{ $x }}; --y-coord: {{ $y }};" href="{{ route('office', [$office->slug]) }}" rel="noopener">
                        <img src="{{ asset('/files/flags/' . $office->title . '.svg') }}" alt="map img" class="map__coords-city-img">
                        <span class="map__coords-city-marker"></span>
                        <div class="map__coords-city-inner">
                            <span class="map__coords-city-name">{{ $office->title }}</span>
                            <div class="map__coords-city-count {{ $office->count_positions ? '' : 'map__coords-city-count--disable' }} ">
                                <span class="map__coords-city-count-text">{{ $office->count_positions }}</span>
                            </div>
                        </div>
                    </a>
                @endforeach
            </aside>
        </aside>
        <div class="app-section__inner">
            <header class="app-section__header">
                <h2>6 offices, 700+ employees</h2>
            </header>
        </div>
        <div class="map__media">
            <img src="{{ asset('/media/images/map_2x.png?v=2') }}" style="width: 100%; height: 100%;" alt="world map">
        </div>
    </div>
</section>