<Overlay class="orders-panel" @position="right" @noBackdrop={{@noBackdrop}} @fullHeight={{@fullHeight}} @outView={{@outView}} @width={{@width}}>
    <Overlay::Header @hideLeftSection={{true}} @onPressCancel={{@onPressCancel}} @actionsWrapperClass="h-full" @cancelButtonHeight="1.5rem" class="pl-0i" {{set-height "2.75rem"}}>
        <div class="h-full flex-1 pl-11 relative">
            <div class="absolute h-full left-0 top-0 bottom-0 pl-4 flex items-center justify-center">
                <FaIcon @icon="search" />
            </div>
            <Input
                @value={{this.query}}
                @type="text"
                placeholder={{t "fleet-ops.component.order-list-overlay.search"}}
                class="w-full p-0 m-0 h-full bg-transparent order-list-overlay-search"
            />
        </div>
        {{#if this.selectedOrders.length}}
            <BasicDropdown class="mr-2" @renderInPlace={{true}} as |dd|>
                <dd.Trigger>
                    <div class="next-org-button-trigger has-selections {{if dd.isOpen 'is-open'}}">
                        <FaIcon @icon="ellipsis-h" @prefix="fas" class="text-gray-800 dark:text-white" />
                    </div>
                </dd.Trigger>
                <dd.Content>
                    <div class="next-dd-menu">
                        <div class="px-1">
                            <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1">
                                {{t "fleet-ops.component.order-list-overlay.selected"}}
                                {{pluralize this.selectedOrders.length "Order"}}
                            </div>
                        </div>
                        <div class="next-dd-menu-seperator"></div>
                        <div class="px-1">
                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressAssignOrders")}}>{{t
                                    "fleet-ops.component.order-list-overlay.assign"
                                }}</a>
                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCancelOrders" this.selectedOrders)}}>{{t
                                    "fleet-ops.component.order-list-overlay.cancel"
                                }}</a>
                            <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownAction dd "onPressDeleteOrders" this.selectedOrders)}}>{{t
                                    "fleet-ops.component.order-list-overlay.delete"
                                }}</a>
                        </div>
                    </div>
                </dd.Content>
            </BasicDropdown>
        {{/if}}
        <BasicDropdown @renderInPlace={{true}} as |dd|>
            <dd.Trigger>
                <div class="next-org-button-trigger {{if dd.isOpen 'is-open'}}">
                    <FaIcon @icon="ellipsis-h" @prefix="fas" class="text-gray-900 dark:text-gray-500" />
                </div>
            </dd.Trigger>
            <dd.Content>
                <div class="next-dd-menu">
                    <div class="px-1">
                        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1">
                            {{t "fleet-ops.component.order-list-overlay.actions"}}
                        </div>
                    </div>
                    <div class="next-dd-menu-seperator"></div>
                    <div class="px-1">
                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCreateOrder")}}>{{t
                                "fleet-ops.component.order-list-overlay.create-order"
                            }}</a>
                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCreateFleet")}}>{{t
                                "fleet-ops.component.order-list-overlay.create-fleet"
                            }}</a>
                    </div>
                </div>
            </dd.Content>
        </BasicDropdown>
    </Overlay::Header>

    <Overlay::Body>
        {{#if this.isLoading}}
            <div class="flex items-center p-4">
                <Spinner class="mr-2" />
                <span>{{t "fleet-ops.common.loading"}}</span>
            </div>
        {{/if}}

        <div class="space-y-4 orders-panel-fleets">
            <div class="next-content-panel-wrapper mb-2">
                <ContentPanel
                    @title={{t "fleet-ops.component.order-list-overlay.active-order"}}
                    @subtitle={{pluralize this.activeOrders.length "Order"}}
                    @open={{this.activeOrders.length}}
                    @pad={{true}}
                    @panelSubtitleInlineClass="text-xs"
                    @panelBodyClass="order-listings bg-white dark:bg-gray-800"
                >
                    {{#each this.activeOrders as |order index|}}
                        <OrderListOverlay::Order
                            @order={{order}}
                            @index={{add index 1}}
                            @isSelected={{includes order this.selectedOrders}}
                            @onClick={{this.selectOrder}}
                            @onDoubleClick={{fn this.onAction "onPressViewOrder"}}
                            as |isSelected|
                        >
                            {{#if isSelected}}
                                <div class="order-listings-row selected px-4 py-2">
                                    <div class="flex flex-row items-center space-x-2">
                                        {{! <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> }}
                                        <Button
                                            @type="default"
                                            @icon="file-invoice"
                                            @text={{t "fleet-ops.common.details"}}
                                            @size="xs"
                                            class="btn-transparent-border"
                                            @onClick={{fn this.onAction "onPressViewOrder" order}}
                                        />
                                    </div>
                                </div>
                            {{/if}}
                        </OrderListOverlay::Order>
                    {{/each}}
                </ContentPanel>
                <ContentPanel
                    @title={{t "fleet-ops.component.order-list-overlay.unassigned-order"}}
                    @subtitle={{pluralize this.unassignedOrders.length "Order"}}
                    @open={{this.unassignedOrders.length}}
                    @pad={{true}}
                    @panelSubtitleInlineClass="text-xs"
                    @panelBodyClass="order-listings bg-white dark:bg-gray-800"
                >
                    {{#each this.unassignedOrders as |order index|}}
                        <OrderListOverlay::Order
                            @order={{order}}
                            @index={{add index 1}}
                            @isSelected={{includes order this.selectedOrders}}
                            @onClick={{this.selectOrder}}
                            @onDoubleClick={{fn this.onAction "onPressViewOrder"}}
                            as |isSelected|
                        >
                            {{#if isSelected}}
                                <div class="order-listings-row selected px-4 py-2">
                                    <div class="flex flex-row items-center space-x-2">
                                        {{! <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> }}
                                        <Button
                                            @type="default"
                                            @icon="file-invoice"
                                            @text={{t "fleet-ops.common.details"}}
                                            @size="xs"
                                            class="btn-transparent-border"
                                            @onClick={{fn this.onAction "onPressViewOrder" order}}
                                        />
                                    </div>
                                </div>
                            {{/if}}
                        </OrderListOverlay::Order>
                    {{/each}}
                </ContentPanel>
            </div>
        </div>

        <div class="space-y-4 orders-panel-fleets">
            {{#each this.fleets as |fleet|}}
                <ContentPanel
                    @title={{fleet.name}}
                    @titleIcon="users"
                    @titleIconWrapperClass="flex-inline mr-3"
                    @subtitle={{concat fleet.drivers_online_count " of " fleet.drivers_count " Online"}}
                    @open={{fleet.drivers.length}}
                    @actionButtons={{array (hash type="default" icon="cog" size="xs" onClick=(fn this.onAction "onPressManageFleet" fleet))}}
                    @panelSubtitleInlineClass="dark:text-gray-100 text-xs"
                    @panelHeaderClass="flex"
                    @panelBodyClass="bg-white dark:bg-gray-800"
                >
                    {{#each fleet.drivers as |driver|}}
                        <ContentPanel
                            @titleComponent="order-list-overlay/driver-panel-title"
                            @titleComponentContext={{driver}}
                            @open={{true}}
                            @panelBodyClass="order-listings bg-white dark:bg-gray-800"
                            @panelHeaderClass="next-orders-driver-header"
                            @containerClass="mt-0i"
                        >
                            {{#each driver.activeJobs as |order index|}}
                                <OrderListOverlay::Order
                                    @order={{order}}
                                    @index={{add index 1}}
                                    @isSelected={{includes order this.selectedOrders}}
                                    @onClick={{this.selectOrder}}
                                    @onDoubleClick={{fn this.onAction "onPressViewOrder"}}
                                    as |isSelected|
                                >
                                    {{#if isSelected}}
                                        <div class="order-listings-row selected px-4 py-2">
                                            <div class="flex flex-row items-center space-x-2">
                                                {{! <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> }}
                                                <Button
                                                    @type="default"
                                                    @icon="file-invoice"
                                                    @text={{t "fleet-ops.common.details"}}
                                                    @size="xs"
                                                    class="btn-transparent-border"
                                                    @onClick={{fn this.onAction "onPressViewOrder" order}}
                                                />
                                            </div>
                                        </div>
                                    {{/if}}
                                </OrderListOverlay::Order>
                            {{/each}}
                        </ContentPanel>
                    {{/each}}
                </ContentPanel>
            {{/each}}
        </div>
    </Overlay::Body>
</Overlay>