<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"/>
                <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"/>
                <stop :stop="departure.stop"/>
            </div>
        </li>
    </ul>

    <div class="alert alert-info" v-if="stops.length === 0">
        <fa :icon="['fal', 'info-circle']"/>
        Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.
    </div>
</div>