<li> <div class="departure"> <div class="departure__line"> <line-symbol :line="departure.line"/> <div class="line__display">{{ departure.display }}</div> </div> <div class="departure__time"> <template v-if="!departure.estimated"> <tooltip placement="top-end">Czas rozkładowy, nieuwzględniający aktualnej sytuacji komunikacyjnej.</tooltip> <ui-icon icon="departure-warning" class="mr-1"/> </template> <template v-if="!relativeTimes"> <span :class="[ 'departure__time', 'departure__time--delayed']" v-if="timeDiffers"> {{ departure.scheduled|moment('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__time">{{ time|moment('HH:mm') }}</span> </template> <template v-else> {{ timeLeft|duration('humanize', true) }} </template> </div> <div class="departure__stop"> <ui-icon icon="stop" fixed-width class="mr-1 flex-shrink-0"/> <stop :stop="departure.stop"/> <div class="stop__actions flex-space-left"> <button class="btn btn-action" @click="showTrip = !showTrip"> <tooltip>pokaż/ukryj trasę</tooltip> <ui-icon icon="track" /> </button> </div> </div> </div> <fold :visible="showTrip"> <trip :schedule="trip.schedule" :current="departure.stop" v-if="trip" :class="[ `trip--${departure.line.type}` ]"/> <div v-else class="text-center"> <ui-icon icon="spinner"/> </div> </fold> </li>