<div class="stop">
    <span class="stop__name">{{ stop.name }}</span>
    <span class="stop__description badge badge-dark" v-if="stop.variant">{{ stop.variant }}</span>

    <slot/>

    <div class="stop__actions flex-space-left">
        <slot name="actions">
            <button class="btn btn-action" ref="action-info" @click="details = !details">
                <fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
            </button>

            <button class="btn btn-action" ref="action-map" v-hover:map>
                <fa :icon="['fal', 'map-marker-alt']"/>
            </button>
        </slot>
    </div>

    <fold :visible="details" class="stop__details-fold" lazy>
        <stop-details :stop="stop"></stop-details>
    </fold>

    <popper reference="action-map" :visible="map" arrow>
        <div style="height: 300px; width: 500px">
            <l-map :center="stop.location" :zoom=17 :options="{ zoomControl: false, dragging: false }">
                <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>
    </popper>
</div>