<OrderConfigManager @tab={{this.tab}} @orderConfig={{this.config}} @context={{this.context}} @contextModel={{this.contextModel}} @onTabChanged={{this.onTabChanged}} @onConfigChanged={{this.onConfigChanged}} @onContextChanged={{this.onContextChanged}} as |Action Context|>
    <Layout::Section::Header @title={{t "fleet-ops.component.order-config-manager.title"}}>
        <DropdownButton class="order-config-select-button mr-2" @disabled={{not Context.configs}} @text={{if Context.currentConfig.name Context.currentConfig.name (t "fleet-ops.component.order-config-manager.select-order-config")}} @textClass="text-sm mr-2" @buttonClass="flex-row-reverse w-44 justify-between" @icon="caret-down" @iconClass="mr-0i" @size="sm" @iconPrefix="fas" @triggerClass="hidden md:flex" as |dd|>
            <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                <div class="p-1">
                    {{#each Context.configs as |orderConfig|}}
                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd Context.selectConfig orderConfig)}}>
                            <div class="flex-1 flex flex-row items-center">
                                <div class="w-6">
                                    <FaIcon @icon="cogs" />
                                </div>
                                <span>{{orderConfig.name}}</span>
                            </div>
                            <div>
                                {{#if (eq Context.currentConfig.id orderConfig.id)}}
                                    <FaIcon @icon="check" class="text-green-500" />
                                {{/if}}
                            </div>
                        </a>
                    {{/each}}
                </div>
            </div>
        </DropdownButton>
        <Action.NewOrderConfigButton />
    </Layout::Section::Header>

    <Layout::Section::Body class="h-full">
        <div class="h-full w-full overflow-y-scroll">
            {{#if Context.currentConfig}}
                <div class="px-5 py-3">
                    <div class="fleetops-pill-tabs">
                        <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>
                <Context.content />
                <Spacer @height="300px" />
            {{else}}
                <div class="h-full">
                    <div class="flex flex-col items-center justify-center h-40">
                        <h4 class="text-lg text-gray-400 mb-4">{{t "fleet-ops.component.order-config-manager.select-order-config-to-start"}}</h4>
                        <Button @type="link" @text={{t "fleet-ops.component.order-config-manager.new-order-config"}} @onClick={{Context.onClickCreateOrderConfig}} class="text-blue-400" />
                    </div>
                </div>
            {{/if}}
        </div>
    </Layout::Section::Body>
</OrderConfigManager>
{{outlet}}