<div>
    <div class="d-flex">
        <div class="d-flex position-relative" style="min-width: 0">
            <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>
                        <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>

        <div class="stop__actions">
            <slot name="actions">
                <button class="btn btn-action" ref="action-info" @click="details = !details">
                    <tooltip>dodatkowe informacje</tooltip>
                    <ui-icon icon="info"/>
                </button>

                <button class="btn btn-action" ref="action-map" v-hover:map>
                    <ui-icon icon="map"/>
                </button>
            </slot>
        </div>
    </div>

    <keep-alive>
        <portal to="popups">
            <ui-dialog v-if="details" @leave="details = false" behaviour="modal" class="ui-modal--medium" title="Szczegóły przystanku">
                <stop-details :stop="stop"/>
            </ui-dialog>
        </portal>
    </keep-alive>
    <keep-alive>
        <!-- FIXME: This should be in portal but it's not possible due to information loss, maybe in vue3 it will be better?-->
        <ui-dialog reference="action-map" v-if="showMap" arrow class="ui-popup--no-padding" style="width: 500px;" placement="right-start" v-hover:inMap>
            <stop-map :stop="stop" style="height: 300px"/>
        </ui-dialog>
    </keep-alive>
</div>
