<div class="favourites">
    <ul class="list-underlined" v-if="favourites.length > 0">
        <li v-for="favourite in favourites" class="favourite">
            <button @click="choose(favourite)" class="favourite__entry">
                <div class="icon">
                    <ui-icon icon="favourite"/>
                </div>
                <div class="overflow-hidden">
                    <span class="text flex-grow-1">{{ favourite.name }}</span>
                    <ul class="favourite__stops">
                        <li class="favourite__stop" v-for="stop in favourite.stops" :key="stop.id"><stop :stop="stop"/></li>
                    </ul>
                </div>
            </button>
            <button class="btn btn-action" @click="remove(favourite)">
                <tooltip placement="left">usuń</tooltip>
                <ui-icon icon="delete"/>
            </button>
        </li>
    </ul>
    <div class="alert alert-info" v-else>
        <ui-icon icon="info"/>
        Brak zapisanych zespołów przystanków
    </div>
</div>