<Overlay
    @onLoad={{this.setOverlayContext}}
    @onOpen={{this.onOpen}}
    @onClose={{this.onClose}}
    @onToggle={{this.onToggle}}
    @position="right"
    @noBackdrop={{true}}
    @fullHeight={{true}}
    @isResizeble={{or this.isResizable @isResizable}}
    @width={{or this.width @width "570px"}}
>
    <Overlay::Header @title={{concat "Edit Order: " this.order.public_id " Route"}}>
        <Button @type="primary" @icon="check" @text="Save" @helpText="Save order route changes" @onClick={{perform this.save}} @isLoading={{this.save.isRunning}} @wrapperClass="mr-2" />
        <Button @type="default" @icon="times" @helpText={{t "fleet-ops.common.cancel"}} @onClick={{this.onPressCancel}} />
    </Overlay::Header>

    <Overlay::Body>
        <div class="p-4">
            <div class="flex flex-row justify-between mb-6">
                <div class="flex">
                    <Toggle @isToggled={{this.order.payload.isMultiDrop}} @onToggle={{this.toggleMultiDropOrder}} @label={{t "fleet-ops.component.modals.order-route-form.toggle"}} />
                </div>
                <div class="flex flex-1 justify-end space-x-2">
                    {{#if this.order.payload.isMultiDrop}}
                        {{!-- <Button @type="magic" @icon="magic" @text={{t "fleet-ops.component.modals.order-route-form.optimize"}} @size="sm" @onClick={{fn this.optimizeRoute}} @helpText={{t "fleet-ops.component.modals.order-route-form.optimize-text"}} @disabled={{lt this.order.payload.waypoints.length 3}} @isLoading={{this.isOptimizingRoute}} /> --}}
                        <Button
                            @icon="map-marked-alt"
                            @text={{t "fleet-ops.component.modals.order-route-form.add"}}
                            @size="sm"
                            @onClick={{this.addWaypoint}}
                            @helpText={{t "fleet-ops.component.modals.order-route-form.add-text"}}
                        />
                    {{/if}}
                </div>
            </div>

            {{#if this.order.payload.isMultiDrop}}
                <DragSortList class="overflow-visible" @items={{this.order.payload.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
                    <div id={{concat "waypoint_" (add index 1)}} class="py-1 mb-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center justify-between cursor-move">
                                <FaIcon @icon="grip-lines" @prefix="fas" class="mr-3 text-gray-100" />
                                <label class="waypoint-label dark:text-gray-100 text-sm">
                                    {{waypoint-label (add index 1)}}
                                </label>
                            </div>

                            <div class="flex-1 px-4">
                                <ModelSelect
                                    @modelName="place"
                                    @selectedModel={{waypoint}}
                                    @placeholder={{concat (t "fleet-ops.operations.orders.index.new.select-waypoint-placeholder") " " (add index 1)}}
                                    @triggerClass="form-select form-input truncate max-w-300px"
                                    @infiniteScroll={{false}}
                                    @customSearchEndpoint="places/search"
                                    @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
                                    @renderInPlace={{true}}
                                    @onChange={{fn this.setWaypointPlace index}}
                                    as |model|
                                >
                                    {{model.address}}
                                </ModelSelect>

                                {{#unless waypoint.isNew}}
                                    {{#if waypoint.hasInvalidCoordinates}}
                                        <div class="leading-5 text-sm text-red-400 mt-2">
                                            <FaIcon @icon="exclamation-triangle" class="mr-1" />
                                            {{t "fleet-ops.component.modals.order-route-form.invalid"}}
                                        </div>
                                    {{/if}}
                                {{/unless}}
                            </div>

                            <div class="flex items-center">
                                <Button class="mr-2" @icon="edit" @size="sm" @onClick={{fn this.editPlace waypoint}} />
                                <Button @type="danger" @icon="trash" @iconPrefix="fas" @size="sm" @onClick={{fn this.removeWaypoint waypoint}} />
                            </div>
                        </div>
                    </div>
                </DragSortList>
            {{else}}
                <div class="grid grid-cols-1 gap-3 text-xs dark:text-gray-100">
                    <div class="input-group">
                        <div class="flex items-center justify-between">
                            <label>{{t "fleet-ops.component.modals.order-route-form.pickup"}}</label>

                            {{#if this.order.payload.pickup}}
                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.pickup)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
                            {{/if}}
                        </div>

                        <ModelSelect
                            @modelName="place"
                            @selectedModel={{this.order.payload.pickup}}
                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-pickup"}}
                            @triggerClass="form-select form-input"
                            @infiniteScroll={{false}}
                            @customSearchEndpoint="places/search"
                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
                            @renderInPlace={{true}}
                            @onChange={{fn this.setPayloadPlace "pickup"}}
                            as |model|
                        >
                            {{model.address}}
                        </ModelSelect>

                        {{#if this.order.payload.pickup.hasInvalidCoordinates}}
                            <div class="leading-5 text-sm text-red-400 mt-2">
                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
                            </div>
                        {{/if}}
                    </div>

                    <div class="input-group">
                        <div class="flex items-center justify-between">
                            <label>{{t "fleet-ops.component.modals.order-route-form.dropoff"}}</label>

                            {{#if this.order.payload.dropoff}}
                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.dropoff)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
                            {{/if}}
                        </div>

                        <ModelSelect
                            @modelName="place"
                            @selectedModel={{this.order.payload.dropoff}}
                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-dropoff"}}
                            @triggerClass="form-select form-input"
                            @infiniteScroll={{false}}
                            @customSearchEndpoint="places/search"
                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
                            @renderInPlace={{true}}
                            @onChange={{fn this.setPayloadPlace "dropoff"}}
                            as |model|
                        >
                            {{model.address}}
                        </ModelSelect>

                        {{#if this.order.payload.dropoff.hasInvalidCoordinates}}
                            <div class="leading-5 text-sm text-red-400 mt-2">
                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
                            </div>
                        {{/if}}
                    </div>

                    <div class="input-group">
                        <div class="flex items-center justify-between">
                            <label>{{t "fleet-ops.component.modals.order-route-form.return"}}</label>

                            {{#if this.order.payload.return}}
                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.return)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
                            {{/if}}
                        </div>

                        <ModelSelect
                            @modelName="place"
                            @selectedModel={{this.order.payload.return}}
                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-return"}}
                            @triggerClass="form-select form-input"
                            @infiniteScroll={{false}}
                            @customSearchEndpoint="places/search"
                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
                            @renderInPlace={{true}}
                            @onChange={{fn this.setPayloadPlace "return"}}
                            as |model|
                        >
                            {{model.address}}
                        </ModelSelect>

                        {{#if this.order.payload.return.hasInvalidCoordinates}}
                            <div class="leading-5 text-sm text-red-400 mt-2">
                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
                            </div>
                        {{/if}}
                    </div>
                </div>
            {{/if}}
        </div>
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>