<Layout::Resource::Panel
    @resource={{this.customer}}
    @controller={{this}}
    @headerComponent={{component "customer-panel/panel-header" resource=this.customer actionButtons=this.actionButtons}}
    @headerTitle={{or this.customer.name}}
    @actionButtons={{this.actionButtons}}
    @onPressCancel={{this.onPressCancel}}
    @onOverlayReady={{this.setOverlayContext}}
    @headerClass="no-bottom-border"
    @bodyClass="no-scroll"
    @width={{or this.width @width "570px"}}
    @isResizable={{or this.isResizable @isResizable}}
>
    <TabNavigation @tabs={{this.tabs}} @activeTabId={{this.tab.id}} @onTabChange={{this.onTabChanged}} @contentClass="scrollable" @tablistClass="pl-2" as |activeTab|>
        {{component activeTab.component customer=this.customer tabOptions=activeTab options=activeTab.componentParams}}
    </TabNavigation>
</Layout::Resource::Panel>
