<main class="d-flex">
    <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>

    <portal-target name="popups" multiple/>
</main>