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