{{#if this.visible}}
    <a
        href="javascript:;"
        class="next-nav-item {{if this.active 'active'}} {{if @dropdownButton 'next-nav-item-with-dropdown'}}"
        disabled={{this.disabled}}
        {{on "click" this.onClick}}
        ...attributes
    >
        <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
            {{#if @icon}}
                <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
            {{/if}}
        </div>
        <div class="truncate w-10/12 {{@itemWrapperClass}}">{{yield}}</div>
        <div class="next-nav-item-right-side {{@itemRightSideContainerClass}}">
            {{#if @rightSideComponent}}
                {{component @rightSideComponent context=@rightSideComponentContext}}
            {{else}}
                {{#if @rightSideStatus}}
                    <span class="ml-2 {{@rightSideStatusContainerClass}}">
                        {{#if @rightSideStatusText}}
                            <Badge
                                @status={{@rightSideStatus}}
                                @hideStatusDot={{@hideRightSideStatusDot}}
                                class={{@rightSideStatusClass}}
                                @disableHumanize={{@disableRightSideStatusHumanize}}
                            >
                                {{@rightSideStatusText}}
                            </Badge>
                        {{else}}
                            <Badge
                                @status={{@rightSideStatus}}
                                @hideStatusDot={{@hideRightSideStatusDot}}
                                class={{@rightSideStatusClass}}
                                @disableHumanize={{@disableRightSideStatusHumanize}}
                            />
                        {{/if}}
                    </span>
                {{/if}}
                {{#if @dropdownButton}}
                    <DropdownButton
                        @icon={{or @dropdownButtonIcon "ellipsis"}}
                        @iconPrefix={{@dropdownButtonIconPrefix}}
                        @text={{@dropdownButtonText}}
                        @size="xs"
                        @horizontalPosition={{or @dropdownHorizontalPosition "left"}}
                        @calculatePosition={{@dropdownButtonCalculatePosition}}
                        @renderInPlace={{this.dropdownButtonRenderInPlace}}
                        @wrapperClass="{{@dropdownButtonWrapperClass}} next-nav-item-dropdown-button"
                        @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}"
                        @registerAPI={{this.onRegisterAPI}}
                        @onInsert={{this.onDropdownButtonInsert}}
                        @disabled={{this.disabled}}
                        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 {{@dropdownMenuLabelClass}}">
                                        {{@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">
                                            {{! template-lint-disable no-nested-interactive }}
                                            <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action dd)}}>
                                                {{#if action.icon}}
                                                    <div class="w-6">
                                                        <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
                                                    </div>
                                                {{/if}}
                                                {{action.label}}
                                            </a>
                                        </div>
                                    {{/if}}
                                {{/if}}
                            {{/each}}
                        </div>
                    </DropdownButton>
                {{/if}}
            {{/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>
{{/if}}