<div class="order-route-list portal-order-details-route-list" ...attributes>
    {{#if this.firstStop}}
        <div class="order-route-stop">
            <div class="order-route-stop-index">
                <div class="index-count fleetops-route-stop-badge {{if this.firstStop.active 'fleetops-route-stop-badge--active'}}" style={{this.firstStop.badgeStyle}}>{{this.firstStop.label}}</div>
            </div>
            <div class="order-route-location dark:text-gray-100">
                <div class="portal-route-stop-title">{{this.firstStop.title}}</div>
                <div class="mb-2 flex flex-wrap items-center gap-1.5">
                    {{#if this.firstStop.statusCode}}<Badge @status={{this.firstStop.statusCode}} />{{/if}}
                    {{#if this.firstStop.showCompletedFlagBadge}}<Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>{{else if this.firstStop.active}}<Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>{{/if}}
                    {{#if this.firstStop.etaSeconds}}<Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration this.firstStop.etaSeconds}}</Badge>{{/if}}
                </div>
                {{place-address this.firstStop.place}}
            </div>
        </div>
    {{/if}}

    {{#if this.shouldCollapseWaypoints}}
        <Button class="btn-reset w-full" @wrapperClass="w-full" @onClick={{this.toggleWaypointsCollapse}}>
            <div class="px-3 py-2 w-full bg-yellow-200 text-yellow-900 rounded shadow-sm flex flex-col justify-center items-start mb-3">
                <div class="flex flex-row items-center">
                    <FaIcon @icon="eye" class="mr-2 text-yellow-900" />
                    <span class="font-bold">{{if this.isWaypointsCollapsed "Expand" "Collapse"}}</span>
                </div>
                <div>{{this.middleStops.length}} more stops</div>
            </div>
        </Button>
        {{#unless this.isWaypointsCollapsed}}
            {{#each this.middleStops as |stop|}}
                <div class="order-route-stop">
                    <div class="order-route-stop-index">
                        <div class="index-count fleetops-route-stop-badge {{if stop.active 'fleetops-route-stop-badge--active'}}" style={{stop.badgeStyle}}>{{stop.label}}</div>
                    </div>
                    <div class="order-route-location dark:text-gray-100">
                        <div class="portal-route-stop-title">{{stop.title}}</div>
                        <div class="mb-2 flex flex-wrap items-center gap-1.5">
                            {{#if stop.statusCode}}<Badge @status={{stop.statusCode}} />{{/if}}
                            {{#if stop.showCompletedFlagBadge}}<Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>{{else if stop.active}}<Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>{{/if}}
                            {{#if stop.etaSeconds}}<Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration stop.etaSeconds}}</Badge>{{/if}}
                        </div>
                        {{place-address stop.place}}
                    </div>
                </div>
            {{/each}}
        {{/unless}}
    {{else}}
        {{#each this.middleStops as |stop|}}
            <div class="order-route-stop">
                <div class="order-route-stop-index">
                    <div class="index-count fleetops-route-stop-badge {{if stop.active 'fleetops-route-stop-badge--active'}}" style={{stop.badgeStyle}}>{{stop.label}}</div>
                </div>
                <div class="order-route-location dark:text-gray-100">
                    <div class="portal-route-stop-title">{{stop.title}}</div>
                    <div class="mb-2 flex flex-wrap items-center gap-1.5">
                        {{#if stop.statusCode}}<Badge @status={{stop.statusCode}} />{{/if}}
                        {{#if stop.showCompletedFlagBadge}}<Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>{{else if stop.active}}<Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>{{/if}}
                        {{#if stop.etaSeconds}}<Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration stop.etaSeconds}}</Badge>{{/if}}
                    </div>
                    {{place-address stop.place}}
                </div>
            </div>
        {{/each}}
    {{/if}}

    {{#if this.lastStop}}
        <div class="order-route-stop">
            <div class="order-route-stop-index">
                <div class="index-count fleetops-route-stop-badge {{if this.lastStop.active 'fleetops-route-stop-badge--active'}}" style={{this.lastStop.badgeStyle}}>{{this.lastStop.label}}</div>
            </div>
            <div class="order-route-location dark:text-gray-100">
                <div class="portal-route-stop-title">{{this.lastStop.title}}</div>
                <div class="mb-2 flex flex-wrap items-center gap-1.5">
                    {{#if this.lastStop.statusCode}}<Badge @status={{this.lastStop.statusCode}} />{{/if}}
                    {{#if this.lastStop.showCompletedFlagBadge}}<Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>{{else if this.lastStop.active}}<Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>{{/if}}
                    {{#if this.lastStop.etaSeconds}}<Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration this.lastStop.etaSeconds}}</Badge>{{/if}}
                </div>
                {{place-address this.lastStop.place}}
            </div>
        </div>
    {{/if}}
</div>
