<div style="width: 100%">
    <l-map :center="{ lat: 52.0194, lon: 19.1451 }" :zoom=7 :options="{ zoomControl: false }" class="map">
        <l-vector-layer url="https://api.maptiler.com/maps/bright/style.json?key=8GX5FRUNgk4lB83GZT8Q"
                        token="not-needed"
                        attribution='<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
        />

        <div class="provider-picker">
            <h2 class="provider-picker__heading">Wybierz lokalizację</h2>
            <ul class="provider-picker__providers">
                <li v-for="provider in providers" :key="provider.id" class="provider-picker__provider">
                    <a :href="`/${provider.id}`" class="provider">
                        <ui-icon icon="line-bus" size="2x" />
                        <div>
                            <div class="provider__short-name">{{ provider.shortName }}</div>
                            <div class="provider__name">{{ provider.name }}</div>
                        </div>
                        <tooltip v-if="provider.lastUpdate != null">Ostatnia akutalizacja: {{ provider.lastUpdate|moment('YYYY-MM-DD HH:mm') }}</tooltip>
                    </a>
                </li>
            </ul>
        </div>

        <l-marker :lat-lng="provider.location" v-for="provider in providers" :options="{ keyboard: false }" :key="provider.id">
            <l-icon>
                <div class="map__label-box" tabindex="0">
                    <a :href="`/${provider.id}`" class="provider">
                        <ui-icon icon="line-bus" class="map__icon" />
                        <div>
                            <div class="provider__short-name">{{ provider.shortName }}</div>
                            <div class="provider__name">{{ provider.name }}</div>
                        </div>
                    </a>
                </div>
            </l-icon>
        </l-marker>
    </l-map>
</div>