<div class="departures" v-responsive> <ul class="departures__list list-underlined"> <li class="departure" v-for="departure in departures"> <div class="departure__line"> <line-symbol :line="departure.line"></line-symbol> <div class="line__display">{{ departure.display }}</div> </div> <div class="departure__time"> <span class="departure__scheduled" v-if="departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm')"> {{ departure.scheduled.format('HH:mm') }} </span> <span class="badge" :class="[departure.delay < 0 ? 'badge-danger' : 'badge-warning']" v-if="departure.delay < 0 || departure.delay > 30"> {{ departure.delay|signed }}s </span> <span class="departure__estimated">{{ departure.estimated.format('HH:mm') }}</span> </div> <div class="departure__stop"> <fa :icon="['fal', 'sign']" fixed-width class="mr-1"></fa> <stop :stop="departure.stop"></stop> </div> </li> </ul> <div class="alert alert-info" v-if="stops.length === 0"> <fa :icon="['fal', 'info-circle']"></fa> Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów. </div> </div>