<div class="stop">
    <span class="stop__name">{{ stop.name }}</span>
    <span class="stop__description badge badge-dark" v-if="stop.variant">{{ stop.variant }}</span>

    <slot/>

    <div class="stop__actions flex-space-left">
        <slot name="actions">
            <button class="btn btn-action" ref="action-info" @click="details = !details">
                <fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
            </button>

            <button class="btn btn-action" ref="action-map">
                <fa :icon="['fal', 'map-marked-alt']"/>
            </button>
        </slot>
    </div>

    <fold :visible="details" class="stop__details" lazy>
        <stop-details :stop="stop"></stop-details>
    </fold>
</div>