<OrderConfigManager as |Action Context|>
    <Overlay
        @onLoad={{this.setOverlayContext}}
        @onOpen={{this.onOpen}}
        @onClose={{this.onClose}}
        @onToggle={{this.onToggle}}
        @position="right"
        @noBackdrop={{true}}
        @fullHeight={{true}}
        @isResizeble={{true}}
        @width="645px"
    >
        <Overlay::Header @title={{t "fleet-ops.component.order-config-manager.title"}} @onPressCancel={{this.onPressCancel}}>
            <Action.NewOrderConfigButton />
        </Overlay::Header>

        <Overlay::Body class="p-0i" @wrapperClass="py-5">
            <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
                <div class="ui-tabs mt-4">
                    <nav>
                        {{#each Context.tabs as |tab|}}
                            <a href="javascript:;" class="ui-tab {{if (eq tab.slug Context.currentTab.slug) 'active'}}" {{on "click" (fn Context.onTabChanged tab.slug)}}>
                                <FaIcon @icon={{tab.icon}} class="mr-1" />
                                <span>{{tab.title}}</span>
                            </a>
                        {{/each}}
                    </nav>
                </div>
            </div>
            <div class="tab-content tab-{{Context.currentTab.slug}}">
                <Context.Content />
            </div>
            <Spacer @height="300px" />
        </Overlay::Body>
    </Overlay>
</OrderConfigManager>