<ContentPanel @title={{t "order.fields.route-panel-title"}} @open={{true}} @actionButtons={{this.actionButtons}} @wrapperClass="bordered-top">
    {{#if this.hasRouteSummaryLine}}
        <div class="mb-3 flex items-center justify-between gap-3 text-xs">
            <div class="font-semibold uppercase tracking-wide 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}}
        <div>
            <RouteList
                @order={{@resource}}
                @eta={{if this.showRouteEtaData @resource.eta}}
                @showEta={{this.showRouteEtaData}}
                @waypointActions={{hash
                    viewStopActivity=(hash label="View activity" fn=this.viewStopActivity)
                    viewWaypointLabel=(hash label=(t "order.fields.get-label") fn=this.viewWaypointLabel)
                }}
            />
        </div>
    {{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">{{t "order.fields.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">{{t "order.fields.dropoff"}}</label>
                <DisplayPlace @place={{@resource.payload.dropoff}} @eta={{if this.showRouteEtaData (get @resource.eta @resource.payload.dropoff.id)}} />
            </div>
            <div class="field-info-container">
                <label class="field-name">{{t "order.fields.return"}}</label>
                <DisplayPlace @place={{@resource.payload.return}} />
            </div>
        </div>
    {{/if}}
</ContentPanel>