<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
            <InputGroup @name={{t "fleet-ops.component.modals.driver-assign-order.order"}}>
                <ModelSelect class="listbox-lg" @modelName="order" @selectedModel={{@options.selectedOrder}} @placeholder={{t "fleet-ops.component.modals.driver-assign-order.assign-order"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @query={{hash sort="-created_at" unassigned=true}} @renderInPlace={{true}} @onChange={{@options.selectOrder}} as |order|>
                    <div class="mb-3 flex items-center justify-between">
                        <div>{{order.public_id}} - {{order.createdAt}}</div>
                        <Badge @hideStatusDot={{true}} @status={{order.status}} />
                    </div>
                    <div class="-ml-2">
                        {{#if @order.payload.hasWaypoints}}
                            <div class="order-route-list storefront flex-1">
                                <div class="order-route-stop">
                                    <div class="order-route-stop-index">
                                        <div class="index-count">
                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
                                        </div>
                                    </div>
                                    <div class="order-route-location dark:text-gray-100">
                                        <div>{{or (get order.payload.waypoints "0.name") (get order.payload.waypoints "0.street1")}}</div>
                                        <div>{{or (get order.payload.waypoints "0.city") (get order.payload.waypoints "0.postal_code")}}</div>
                                    </div>
                                </div>
                                <div class="order-route-stop">
                                    <div class="order-route-stop-index">
                                        <div class="index-count">
                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
                                        </div>
                                    </div>
                                    <div class="order-route-location dark:text-gray-100">
                                        <div>{{or order.payload.waypoints.lastObject.name order.payload.waypoints.lastObject.street1}}</div>
                                        <div>{{or order.payload.waypoints.lastObject.city order.payload.waypoints.lastObject.postal_code}}</div>
                                    </div>
                                </div>
                            </div>
                        {{else}}
                            <div class="order-route-list storefront flex-1">
                                <div class="order-route-stop">
                                    <div class="order-route-stop-index">
                                        <div class="index-count">
                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
                                        </div>
                                    </div>
                                    <div class="order-route-location dark:text-gray-100">
                                        <div>{{or order.payload.pickup.name order.payload.pickup.street1}}</div>
                                        <div>{{or order.payload.pickup.city order.payload.pickup.postal_code}}</div>
                                    </div>
                                </div>
                                <div class="order-route-stop">
                                    <div class="order-route-stop-index">
                                        <div class="index-count">
                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
                                        </div>
                                    </div>
                                    <div class="order-route-location dark:text-gray-100">
                                        <div>{{or order.payload.dropoff.name order.payload.dropoff.street1}}</div>
                                        <div>{{or order.payload.dropoff.city order.payload.dropoff.postal_code}}</div>
                                    </div>
                                </div>
                            </div>
                        {{/if}}
                    </div>
                </ModelSelect>
            </InputGroup>
        </div>
    </div>
</Modal::Default>