<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>