<div class="next-content-panel-wrapper {{@wrapperClass}} {{if @isLoading 'is-loading'}}">
    <div class="next-content-panel-container {{@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 {{@panelHeaderLeftClass}}" {{on "click" this.toggle}}>
                    {{#unless @hideCaret}}
                        <span class="icon-container" {{did-insert this.trackIconContainer}}>
                            <FaIcon @icon={{if this.isOpen "caret-down" "caret-right"}} @prefix="fas" />
                        </span>
                    {{/unless}}
                    {{#if @isLoading}}
                        <Spinner @iconClass="text-sky-500 fa-spin-800ms" class="flex mr-2i" />
                    {{/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}}">
                                    <span class={{@panelTitleInlineClass}}>{{@title}}</span>
                                    {{#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>
                        {{/if}}
                    </div>
                </a>
                <div class="next-content-panel-header-right {{@panelHeaderRightClass}}">
                    {{#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 |button|}}
                            <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} />
                        {{/each}}
                        {{#if @dropdownButton}}
                            <DropdownButton
                                @icon={{or @dropdownButtonIcon "ellipsis"}}
                                @iconPrefix={{@dropdownButtonIconPrefix}}
                                @text={{@dropdownButtonText}}
                                @size="xs"
                                @horizontalPosition="left"
                                @calculatePosition={{@dropdownButtonCalculatePosition}}
                                @renderInPlace={{this.dropdownButtonRenderInPlace}}
                                as |dd|
                            >
                                <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                    {{#if @dropdownButtonMenuLabel}}
                                        <div class="px-1">
                                            <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
                                                {{@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}}
                </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'}}"
                    >
                        {{#if @isLoading}}
                            <div class="absolute w-full h-full inset-0 bg-opacity-50 bg-gray-900 flex items-center justify-center">
                                <div class="flex flex-row items-center">
                                    <Spinner @iconClass="text-sky-500 fa-spin-800ms" class="flex mr-2i" />
                                    <span>Loading...</span>
                                </div>
                            </div>
                        {{/if}}
                        {{yield}}
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
</div>