{{! template-lint-disable no-nested-interactive require-presentational-children }}
<div class="tab-navigation {{@containerClass}}" data-style={{or @style "github"}} data-size={{or @size "md"}} {{did-update this.argsDidChange @activeTabId @tabs}}>
    <div class="tab-list justify-between {{@tablistClass}}" role="tablist" {{did-insert this.registerTabList}} {{did-update this.tabsDidChange @tabs @activeTabId}}>
        <div class="tab-items flex flex-row items-center min-w-0 overflow-hidden" role="tablist">
            {{#if (has-block "title")}}
                <div id="tab-navigation-title" class="tab-navigation-title {{@tabTitleWrapperClass}}" data-tab-navigation-title>
                    {{yield to="title"}}
                </div>
            {{/if}}
            {{#if (has-block "tabs")}}
                {{yield this to="tabs"}}
            {{else if @tabs}}
                {{#each this.visibleTabs as |tab|}}
                    {{#if tab.route}}
                        {{#if tab.model}}
                            <LinkTo
                                @route={{tab.route}}
                                @query={{or tab.query (hash)}}
                                @model={{tab.model}}
                                @activeClass="tab-item--active"
                                class="tab-item {{@tabClass}} {{tab.class}} {{if tab.isDisabled 'tab-item--disabled'}}"
                                role="tab"
                                aria-selected={{tab.isActive}}
                                aria-controls="tabpanel-{{tab.route}}"
                                id="tab-{{tab.route}}"
                                data-tab-id={{tab.route}}
                                data-disabled={{tab.isDisabled}}
                                disabled={{tab.isDisabled}}
                            >
                                {{#if tab.hasIcon}}
                                    <span class="tab-ico {{tab.iconWrapperClass}}">
                                        {{#if (eq @iconType "component")}}
                                            {{component tab.icon}}
                                        {{else}}
                                            <FaIcon @icon={{tab.icon}} @size={{tab.iconSize}} class={{tab.iconClass}} />
                                        {{/if}}
                                    </span>
                                {{/if}}
                                <span class="tab-label">
                                    {{tab.label}}
                                </span>
                                {{#if tab.hasBadge}}
                                    <span class="tab-badge">
                                        {{tab.badgeText}}
                                    </span>
                                {{/if}}
                                {{#if tab.isClosable}}
                                    <button type="button" class="tab-close" aria-label="Close {{tab.label}}" {{on "click" (fn this.closeTab tab) stopPropagation=true}}>
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                        </svg>
                                    </button>
                                {{/if}}
                            </LinkTo>
                        {{else}}
                            <LinkTo
                                @route={{tab.route}}
                                @query={{or tab.query (hash)}}
                                @activeClass="tab-item--active"
                                class="tab-item {{@tabClass}} {{tab.class}} {{if tab.isDisabled 'tab-item--disabled'}}"
                                role="tab"
                                aria-selected={{tab.isActive}}
                                aria-controls="tabpanel-{{tab.route}}"
                                id="tab-{{tab.route}}"
                                data-tab-id={{tab.route}}
                                data-disabled={{tab.isDisabled}}
                                disabled={{tab.isDisabled}}
                            >
                                {{#if tab.hasIcon}}
                                    <span class="tab-ico {{tab.iconWrapperClass}}">
                                        {{#if (eq @iconType "component")}}
                                            {{component tab.icon}}
                                        {{else}}
                                            <FaIcon @icon={{tab.icon}} @size={{tab.iconSize}} class={{tab.iconClass}} />
                                        {{/if}}
                                    </span>
                                {{/if}}
                                <span class="tab-label">
                                    {{tab.label}}
                                </span>
                                {{#if tab.hasBadge}}
                                    <span class="tab-badge">
                                        {{tab.badgeText}}
                                    </span>
                                {{/if}}
                                {{#if tab.isClosable}}
                                    <button type="button" class="tab-close" aria-label="Close {{tab.label}}" {{on "click" (fn this.closeTab tab) stopPropagation=true}}>
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                        </svg>
                                    </button>
                                {{/if}}
                            </LinkTo>
                        {{/if}}
                    {{else}}
                        <button
                            type="button"
                            class="tab-item {{@tabClass}} {{tab.class}} {{if tab.isActive 'tab-item--active'}} {{if tab.isDisabled 'tab-item--disabled'}}"
                            role="tab"
                            aria-selected={{tab.isActive}}
                            aria-controls="tabpanel-{{tab.id}}"
                            id="tab-{{tab.id}}"
                            {{on "click" (fn this.selectTab tab)}}
                            {{on "keydown" (fn this.handleKeyDown tab)}}
                            data-tab-id={{tab.id}}
                            data-active={{tab.isActive}}
                            data-disabled={{tab.isDisabled}}
                            disabled={{tab.isDisabled}}
                        >
                            {{#if tab.hasIcon}}
                                <span class="tab-ico {{tab.iconWrapperClass}}">
                                    {{#if (eq @iconType "component")}}
                                        {{component tab.icon}}
                                    {{else}}
                                        <FaIcon @icon={{tab.icon}} @size={{tab.iconSize}} class={{tab.iconClass}} />
                                    {{/if}}
                                </span>
                            {{/if}}
                            <span class="tab-label">
                                {{tab.label}}
                            </span>
                            {{#if tab.hasBadge}}
                                <span class="tab-badge">
                                    {{tab.badgeText}}
                                </span>
                            {{/if}}
                            {{#if tab.isClosable}}

                                <button type="button" class="tab-close" aria-label="Close {{tab.label}}" {{on "click" (fn this.closeTab tab) stopPropagation=true}}>
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            {{/if}}
                        </button>
                    {{/if}}
                {{/each}}
                {{#if this.hasOverflow}}
                    <BasicDropdown @renderInPlace={{false}} @horizontalPosition="right" as |dd|>
                        <dd.Trigger
                            class="tab-item tab-more-trigger {{@tabClass}} {{if this.moreTabIsActive 'tab-item--active'}}"
                            aria-label="More tabs"
                            aria-haspopup="menu"
                            aria-expanded={{if dd.isOpen "true" "false"}}
                            data-tab-navigation-more
                        >
                            <FaIcon @icon="ellipsis-h" @size="sm" />
                        </dd.Trigger>
                        <dd.Content class="tab-overflow-dropdown-content">
                            <div class="next-dd-menu tab-overflow-menu mt-1 mx-0" role="menu" aria-label="More tabs">
                                {{#each this.overflowTabs as |tab|}}
                                    {{#if tab.route}}
                                        {{#if tab.model}}
                                            <LinkTo
                                                @route={{tab.route}}
                                                @query={{or tab.query (hash)}}
                                                @model={{tab.model}}
                                                @activeClass="active"
                                                class="next-dd-item tab-overflow-menu-item {{tab.class}} {{if tab.isDisabled 'disabled'}}"
                                                role="menuitem"
                                                data-tab-id={{tab.route}}
                                                data-disabled={{tab.isDisabled}}
                                                disabled={{tab.isDisabled}}
                                            >
                                                {{#if tab.hasIcon}}
                                                    <span class="tab-overflow-menu-icon {{tab.iconWrapperClass}}">
                                                        {{#if (eq @iconType "component")}}
                                                            {{component tab.icon}}
                                                        {{else}}
                                                            <FaIcon @icon={{tab.icon}} @size={{tab.iconSize}} class={{tab.iconClass}} />
                                                        {{/if}}
                                                    </span>
                                                {{/if}}
                                                <span class="tab-overflow-menu-label">{{tab.label}}</span>
                                                {{#if tab.hasBadge}}
                                                    <span class="tab-badge">{{tab.badgeText}}</span>
                                                {{/if}}
                                            </LinkTo>
                                        {{else}}
                                            <LinkTo
                                                @route={{tab.route}}
                                                @query={{or tab.query (hash)}}
                                                @activeClass="active"
                                                class="next-dd-item tab-overflow-menu-item {{tab.class}} {{if tab.isDisabled 'disabled'}}"
                                                role="menuitem"
                                                data-tab-id={{tab.route}}
                                                data-disabled={{tab.isDisabled}}
                                                disabled={{tab.isDisabled}}
                                            >
                                                {{#if tab.hasIcon}}
                                                    <span class="tab-overflow-menu-icon {{tab.iconWrapperClass}}">
                                                        {{#if (eq @iconType "component")}}
                                                            {{component tab.icon}}
                                                        {{else}}
                                                            <FaIcon @icon={{tab.icon}} @size={{tab.iconSize}} class={{tab.iconClass}} />
                                                        {{/if}}
                                                    </span>
                                                {{/if}}
                                                <span class="tab-overflow-menu-label">{{tab.label}}</span>
                                                {{#if tab.hasBadge}}
                                                    <span class="tab-badge">{{tab.badgeText}}</span>
                                                {{/if}}
                                            </LinkTo>
                                        {{/if}}
                                    {{else}}
                                        <button
                                            type="button"
                                            class="next-dd-item tab-overflow-menu-item {{tab.class}} {{if tab.isActive 'active'}} {{if tab.isDisabled 'disabled'}}"
                                            role="menuitem"
                                            data-tab-id={{tab.id}}
                                            data-active={{tab.isActive}}
                                            data-disabled={{tab.isDisabled}}
                                            disabled={{tab.isDisabled}}
                                            {{on "click" (dropdown-fn dd (fn this.selectTab tab))}}
                                        >
                                            {{#if tab.hasIcon}}
                                                <span class="tab-overflow-menu-icon {{tab.iconWrapperClass}}">
                                                    {{#if (eq @iconType "component")}}
                                                        {{component tab.icon}}
                                                    {{else}}
                                                        <FaIcon @icon={{tab.icon}} @size={{tab.iconSize}} class={{tab.iconClass}} />
                                                    {{/if}}
                                                </span>
                                            {{/if}}
                                            <span class="tab-overflow-menu-label">{{tab.label}}</span>
                                            {{#if tab.hasBadge}}
                                                <span class="tab-badge">{{tab.badgeText}}</span>
                                            {{/if}}
                                        </button>
                                    {{/if}}
                                {{/each}}
                            </div>
                        </dd.Content>
                    </BasicDropdown>
                {{/if}}
            {{/if}}
            {{#if @onAddTab}}
                <button type="button" class="tab-add-button" aria-label="Add new tab" data-tab-navigation-add {{on "click" @onAddTab}}>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                </button>
            {{/if}}
        </div>

        {{#if (has-block "actions")}}
            <div id="tab-navigation-actions" class="tab-navigation-actions {{@tabActionsWrapperClass}}" {{did-insert this.registerTabActions}}>
                {{yield to="actions"}}
            </div>
        {{/if}}

        {{#if @tabs}}
            <div class="tab-overflow-measurer" aria-hidden="true" {{did-insert this.registerTabMeasurer}}>
                {{#each this.enhancedTabs as |tab|}}
                    <div class="tab-item {{@tabClass}} {{tab.class}} {{if tab.isActive 'tab-item--active'}} {{if tab.isDisabled 'tab-item--disabled'}}" data-tab-navigation-measure-item>
                        {{#if tab.hasIcon}}
                            <span class="tab-ico {{tab.iconWrapperClass}}">
                                {{#if (eq @iconType "component")}}
                                    {{component tab.icon}}
                                {{else}}
                                    <FaIcon @icon={{tab.icon}} @size={{tab.iconSize}} class={{tab.iconClass}} />
                                {{/if}}
                            </span>
                        {{/if}}
                        <span class="tab-label">
                            {{tab.label}}
                        </span>
                        {{#if tab.hasBadge}}
                            <span class="tab-badge">
                                {{tab.badgeText}}
                            </span>
                        {{/if}}
                        {{#if tab.isClosable}}
                            <span class="tab-close">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </span>
                        {{/if}}
                    </div>
                {{/each}}
                <div class="tab-item tab-more-trigger {{@tabClass}}" data-tab-navigation-measure-more>
                    <FaIcon @icon="ellipsis-h" @size="sm" />
                </div>
            </div>
        {{/if}}
    </div>

    {{#if this.activeTab}}
        <div class="tab-content {{@contentClass}}" role="tabpanel" id="tabpanel-{{this.activeTab.id}}" aria-labelledby="tab-{{this.activeTab.id}}">
            {{yield this.activeTab}}
        </div>
    {{else if (has-block)}}
        <div class="tab-content {{@contentClass}}" role="tabpanel">
            {{yield this.activeTab}}
        </div>
    {{/if}}
</div>