<div class="order-route-list" ...attributes>
    {{#if this.firstStop}}
        <div class="order-route-stop {{@routeStopClass}}">
            <div class="order-route-stop-index {{@routeStopIndexClass}}">
                <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 {{@routeLocationClass}} dark:text-gray-100">
                <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>
                <DisplayPlace @place={{this.firstStop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{this.firstStop}} @hideBadges={{true}} />
            </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 (t "route-list.expand") (t "route-list.collapse")}}</span>
                </div>
                <div>{{this.middleStops.length}} {{t "route-list.more-waypoints"}}</div>
            </div>
        </Button>
        {{#unless this.isWaypointsCollapsed}}
            {{#each this.middleStops as |stop|}}
                <div class="order-route-stop {{@routeStopClass}}">
                    <div class="order-route-stop-index {{@routeStopIndexClass}}">
                        <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 {{@routeLocationClass}} dark:text-gray-100">
                        <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>
                        <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{stop}} @hideBadges={{true}} />
                    </div>
                </div>
            {{/each}}
        {{/unless}}
    {{else if this.hasExtraStops}}
        {{#each this.middleStops as |stop|}}
            <div class="order-route-stop {{@routeStopClass}}">
                <div class="order-route-stop-index {{@routeStopIndexClass}}">
                    <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 {{@routeLocationClass}} dark:text-gray-100">
                    <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>
                    <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{stop}} @hideBadges={{true}} />
                </div>
            </div>
        {{/each}}
    {{/if}}

    {{#if this.lastStop}}
        <div class="order-route-stop {{@routeStopClass}}">
            <div class="order-route-stop-index {{@routeStopIndexClass}}">
                <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 {{@routeLocationClass}} dark:text-gray-100">
                <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>
                <DisplayPlace @place={{this.lastStop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{this.lastStop}} @hideBadges={{true}} />
            </div>
        </div>
    {{/if}}
</div>
