<div v-if="ready" class="stop__details" v-responsive>
    <section>
        <strong>Linie:</strong>
        <ul class="stop__lines list-unstyled list-inline">
            <li v-for="line in lines" class="list-inline-item mb-2">
                <line-symbol :line="line"></line-symbol>
            </li>
        </ul>

        <strong>Trasy:</strong>
        <ul class="stop__tracks list-underlined">
            <li v-for="{ track, order } in tracks" class="track">
                <div class="track__line">
                    <line-symbol :line="track.line"></line-symbol>
                </div>
                <div class="track__description">
                    {{ track.description }}
                </div>
                <span class="badge badge-pill badge-light track__order">#{{ order }}</span>
            </li>
        </ul>
    </section>

    <section>
        <strong>Na mapie:</strong>
        <div style="height: 350px" tabindex="-1">
            <l-map :center="stop.location" :zoom=17>
                <l-tile-layer url="//{s}.tile.osm.org/{z}/{x}/{y}.png" attribution='&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'></l-tile-layer>
                <l-marker :lat-lng="stop.location"></l-marker>
            </l-map>
        </div>
    </section>
</div>
<div v-else class="text-center">
    <fa icon="spinner-third" pulse></fa>
</div>