<div class="finder__stop">
    <div class="d-flex">
        <slot name="primary-action" />
        <div class="overflow-hidden align-self-center">
            <stop :stop="stop" />
            <div class="stop__destinations" v-if="destinations && destinations.length > 0">
                <ul class="ml-1">
                    <li class="stop__destination destination" v-for="destination in destinations" :key="destination.stop.id">
                        <ul class="destination__lines">
                            <li v-for="line in destination.lines">
                                <line-symbol :line="line" :key="line.symbol" simple/>
                            </li>
                        </ul>
                        <span class="destination__name ml-1">{{ destination.stop.name }}</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="stop__actions flex-space-left">
            <slot name="actions">
                <button class="btn btn-action" ref="action-info" @click="details = !details">
                    <tooltip>dodatkowe informacje</tooltip>
                    <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>
    </div>
    <fold :visible="details" class="stop__details-fold" lazy>
        <stop-details :stop="stop"/>
    </fold>

    <keep-alive>
        <popper reference="action-map" v-if="showMap" arrow class="popper--no-padding" style="width: 500px;" placement="right-start" v-hover:inMap>
            <stop-map :stop="stop" style="height: 300px"/>
        </popper>
    </keep-alive>
</div>