<ContentPanel @title="Route" @open={{true}} @isLoading={{@isLoading}} @actionButtons={{@actionButtons}} @wrapperClass="bordered-top" ...attributes>
    {{#if this.hasRouteSummaryLine}}
        <div class="mb-3 flex items-center justify-between gap-3 text-xs">
            <div class="font-semibold uppercase text-gray-500 dark:text-gray-400">All Stops - {{this.routeStopsCount}}</div>
            <div class="flex min-w-0 items-center gap-2 font-semibold text-gray-700 dark:text-gray-200">
                <span>
                    {{#if this.hasTrackingDistance}}
                        {{format-meters this.trackerData.route.distance_m}}
                    {{else}}
                        -
                    {{/if}}
                </span>
                <span class="text-gray-300 dark:text-gray-600">-</span>
                <span>
                    {{#if this.trackingDurationSeconds}}
                        {{format-duration this.trackingDurationSeconds}}
                    {{else if this.hasCompletionEta}}
                        {{format-date-fns this.trackerData.eta.completion_at "d MMM HH:mm"}}
                    {{else}}
                        -
                    {{/if}}
                </span>
            </div>
        </div>
    {{/if}}

    {{#if @resource.hasIntermediateWaypoints}}
        <RouteList @order={{@resource}} @eta={{if this.showRouteEtaData @resource.eta}} @showEta={{this.showRouteEtaData}} />
    {{else}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
            <div class="field-info-container">
                <label class="field-name">Pickup</label>
                <DisplayPlace @place={{@resource.payload.pickup}} @eta={{if this.showRouteEtaData (get @resource.eta @resource.payload.pickup.id)}} />
            </div>
            <div class="field-info-container">
                <label class="field-name">Dropoff</label>
                <DisplayPlace @place={{@resource.payload.dropoff}} @eta={{if this.showRouteEtaData (get @resource.eta @resource.payload.dropoff.id)}} />
            </div>
            {{#if @resource.payload.return}}
                <div class="field-info-container">
                    <label class="field-name">Return</label>
                    <DisplayPlace @place={{@resource.payload.return}} />
                </div>
            {{/if}}
        </div>
    {{/if}}
</ContentPanel>
