<div class="next-content-panel-wrapper {{if this.isOpen 'is-open' 'is-closed'}} {{@wrapperClass}} {{if @isLoading 'is-loading'}}" {{did-update this.handleArgsChange @open}}>
    <div class="next-content-panel-container {{if this.isOpen 'is-open' 'is-closed'}} {{@containerClass}}">
        <div class="next-content-panel {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelClass}} {{if @isLoading 'is-loading'}}">
            <div
                class="next-content-panel-header next-content-panel-toggle
                    {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}}
                    {{@panelHeaderClass}}
                    {{if @isLoading 'is-loading'}}"
            >
                <a
                    href="javascript:;"
                    aria-expanded={{this.isOpen}}
                    class="next-content-panel-header-left {{if this.disabled 'opacity-50'}} {{@panelHeaderLeftClass}}"
                    disabled={{this.disabled}}
                    {{on "click" this.toggle}}
                >
                    {{#if (and @caretLeft (not @hideCaret))}}
                        <span class="icon-container" {{did-insert this.trackIconContainer}} {{on "click" this.toggle}}>
                            <FaIcon @icon={{if this.isOpen (concat (or @caretIcon "chevron") "-down") (concat (or @caretIcon "chevron") "-up")}} @prefix="fas" />
                        </span>
                    {{/if}}

                    {{#if @titleIcon}}
                        <span class="icon-container {{@titleIconWrapperClass}}" {{did-insert this.trackIconContainer}}>
                            <FaIcon @icon={{@titleIcon}} @prefix={{@titleIconPrefix}} @size={{or @titleIconSize "xs"}} class={{@titleIconClass}} />
                        </span>
                    {{/if}}
                    <div class="next-content-panel-title-container {{@titleContainerClass}}">
                        {{#if @titleComponent}}
                            {{component @titleComponent context=@titleComponentContext}}
                        {{else}}
                            <div class="flex flex-row items-center justify-between">
                                <div>
                                    {{#if @prefixTitle}}
                                        <div class="next-content-panel-prefix-title-container {{@prefixTitleContainerClass}}">
                                            <span class="next-content-panel-prefix-title text-xs {{@prefixTitleClass}}">{{@prefixTitle}}</span>
                                        </div>
                                    {{/if}}
                                </div>
                            </div>
                            <div class="panel-title flex-shrink-0 {{@panelTitleClass}}">
                                <div class="flex flex-col {{@panelTitleWrapperClass}}">
                                    <div class="flex flex-row items-center space-x-2">
                                        <span class={{@panelTitleInlineClass}}>{{@title}}</span>
                                        {{#if @isLoading}}
                                            <Spinner />
                                        {{/if}}
                                    </div>
                                    {{#if @subtitle}}
                                        <span class={{@panelSubtitleInlineClass}}>{{@subtitle}}</span>
                                    {{/if}}
                                </div>
                                {{#if @titleStatus}}
                                    <span class="ml-2 {{@titleStatusContainerClass}}">
                                        <Badge @status={{@titleStatus}} @hideStatusDot={{@hideStatusDot}} class={{@titleStatusClass}} @disableHumanize={{@disableTitleStatusHumanize}} />
                                    </span>
                                {{/if}}
                            </div>
                            {{yield to="title"}}
                        {{/if}}
                    </div>
                    {{#if this.doesntHavePermissions}}
                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
                            <InputInfo @text={{t "common.unauthorized"}} />
                        </Attach::Tooltip>
                    {{else if @helpText}}
                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
                            <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
                        </Attach::Tooltip>
                    {{/if}}
                </a>
                <div class="next-content-panel-header-right {{@panelHeaderRightClass}}">
                    {{yield to="actions"}}
                    {{#if @titleRightSideComponent}}
                        {{component @titleRightSideComponent context=@titleRightSideComponentContext}}
                    {{else}}
                        {{#if @prefixTitleRight}}
                            <div class={{@prefixTitleRightContainerClass}}>
                                <span class="text-xs {{@prefixTitleRightClass}}">{{@prefixTitleRight}}</span>
                            </div>
                        {{/if}}
                        {{#if @titleStatusRight}}
                            <span class="ml-2 {{@titleStatusRightContainerClass}}">
                                {{#if @titleStatusRightText}}
                                    <Badge
                                        @status={{@titleStatusRight}}
                                        @hideStatusDot={{@hideRightTitleStatusDot}}
                                        class={{@titleStatusRightClass}}
                                        @disableHumanize={{@disableTitleStatusRightHumanize}}
                                    >
                                        {{@titleStatusRightText}}
                                    </Badge>
                                {{else}}
                                    <Badge
                                        @status={{@titleStatusRight}}
                                        @hideStatusDot={{@hideRightTitleStatusDot}}
                                        class={{@titleStatusRightClass}}
                                        @disableHumanize={{@disableTitleStatusRightHumanize}}
                                    />
                                {{/if}}
                            </span>
                        {{/if}}
                        {{#each @actionButtons as |actionButton|}}
                            {{#if actionButton.items}}
                                <DropdownButton
                                    @text={{or actionButton.text actionButton.label}}
                                    @textClass={{actionButton.textClass}}
                                    @type={{actionButton.type}}
                                    @icon={{or actionButton.icon "ellipsis"}}
                                    @size={{or actionButton.size "xs"}}
                                    @iconPrefix={{actionButton.prefix}}
                                    @triggerClass={{actionButton.triggerClass}}
                                    @renderInPlace={{or actionButton.renderInPlace true}}
                                    as |dd|
                                >
                                    <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                                        {{#each actionButton.items as |item|}}
                                            {{#if item.separator}}
                                                <div class="next-dd-menu-seperator"></div>
                                            {{else}}
                                                <div class="px-1 {{item.wrapperClass}}">
                                                    <a
                                                        href="javascript:;"
                                                        class="next-dd-item {{item.class}} {{if item.disabled 'disabled'}}"
                                                        disabled={{item.disabled}}
                                                        {{on "click" (dropdown-fn dd (or item.fn item.onClick))}}
                                                    >
                                                        {{#if item.icon}}
                                                            <div class="w-7 flex-grow-0 flex-shrink-0">
                                                                <FaIcon @icon={{item.icon}} />
                                                            </div>
                                                        {{/if}}
                                                        <span>{{or item.text item.label}}</span>
                                                    </a>
                                                </div>
                                            {{/if}}
                                        {{/each}}
                                    </div>
                                </DropdownButton>
                            {{else if actionButton.component}}
                                {{component
                                    actionButton.component
                                    icon=actionButton.icon
                                    iconPrefix=actionButton.iconPrefix
                                    iconComponent=actionButton.iconComponent
                                    size=(or actionButton.size "xs")
                                    text=actionButton.text
                                    options=actionButton.options
                                    items=actionButton.items
                                    permission=actionButton.permission
                                    isLoading=actionButton.isLoading
                                    renderInPlace=actionButton.renderInPlace
                                    triggerClass=actionButton.triggerClass
                                    disabled=actionButton.disabled
                                    onClick=actionButton.onClick
                                    fn=actionButton.fn
                                    perform=actionButton.perform
                                    onSelect=actionButton.onSelect
                                    onChange=actionButton.onChange
                                }}
                            {{else}}
                                <Button
                                    @type={{actionButton.type}}
                                    @text={{actionButton.text}}
                                    @onClick={{if actionButton.perform (perform actionButton.perform) (or actionButton.onClick actionButton.fn)}}
                                    @size={{or actionButton.size "xs"}}
                                    @buttonType={{actionButton.buttonType}}
                                    @disabled={{actionButton.disabled}}
                                    @exampleText={{actionButton.exampleText}}
                                    @helpText={{actionButton.helpText}}
                                    @icon={{actionButton.icon}}
                                    @iconClass={{actionButton.iconClass}}
                                    @iconFlip={{actionButton.iconFlip}}
                                    @iconPrefix={{actionButton.iconPrefix}}
                                    @iconRotation={{actionButton.iconRotation}}
                                    @iconSize={{actionButton.iconSize}}
                                    @isLoading={{actionButton.isLoading}}
                                    @outline={{actionButton.outline}}
                                    @permission={{actionButton.permission}}
                                    @wrapperClass={{actionButton.wrapperClass}}
                                    @textClass={{actionButton.textClass}}
                                    @tooltipPlacement={{actionButton.tooltipPlacement}}
                                    @visible={{actionButton.visible}}
                                />
                            {{/if}}
                        {{/each}}
                        {{#if @dropdownButton}}
                            <DropdownButton
                                class={{@dropdownButtonWrapperClass}}
                                @defaultClass={{@dropdownButtonDefaultClass}}
                                @icon={{or @dropdownButtonIcon "ellipsis"}}
                                @iconPrefix={{@dropdownButtonIconPrefix}}
                                @text={{@dropdownButtonText}}
                                @size="xs"
                                @horizontalPosition={{or @dropdownButtonHorizontalPosition "right"}}
                                @verticalPosition={{@verticalPosition}}
                                @calculatePosition={{@dropdownButtonCalculatePosition}}
                                @renderInPlace={{this.dropdownButtonRenderInPlace}}
                                @permission={{@dropdownButtonPermission}}
                                @disabled={{@dropdownButtonDisabled}}
                                as |dd|
                            >
                                <div class="next-dd-menu mt-0i {{@dropdownMenuWrapperClass}}" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                    {{#if @dropdownButtonMenuLabel}}
                                        <div class="next-dd-menu-label-container px-1">
                                            <div class="next-dd-menu-label {{@dropdownButtonMenuLabelClass}}">
                                                {{@dropdownButtonMenuLabel}}
                                            </div>
                                        </div>
                                        <div class="next-dd-menu-seperator"></div>
                                    {{/if}}
                                    {{#each @dropdownButtonActions as |action|}}
                                        {{#if action.separator}}
                                            <div class="next-dd-menu-seperator"></div>
                                        {{else}}
                                            {{#if (is-dd-item-visible action.context action.isVisible)}}
                                                <div role="group" class="px-1">
                                                    <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action dd)}}>
                                                        {{#if action.icon}}
                                                            <span class="mr-1">
                                                                <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
                                                            </span>
                                                        {{/if}}
                                                        {{action.label}}
                                                    </a>
                                                </div>
                                            {{/if}}
                                        {{/if}}
                                    {{/each}}
                                </div>
                            </DropdownButton>
                        {{/if}}
                    {{/if}}
                    {{#unless (or @caretLeft @hideCaret)}}
                        <a href="#" class="icon-container" {{did-insert this.trackIconContainer}} {{on "click" this.toggle}}>
                            <FaIcon @icon={{if this.isOpen (concat (or @caretIcon "chevron") "-down") (concat (or @caretIcon "chevron") "-up")}} @prefix="fas" />
                        </a>
                    {{/unless}}
                </div>
            </div>
            <div class="next-content-panel-body {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelBodyClass}} {{if @isLoading 'is-loading'}}">
                {{#if this.isOpen}}
                    <div
                        class="next-content-panel-body-inner next-content-panel-body-wrapper relative
                            {{@panelBodyWrapperClass}}
                            {{if @pad 'p-4'}}
                            {{if @isLoading 'opacity-50'}}
                            {{if @isLoading 'is-loading'}}"
                    >
                        {{yield}}
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
</div>