<nav class="sheet-tabs tabs{{#unless horizontalTabs}} vertical{{/unless}}" aria-roledescription="{{localize "SHEETS.FormNavLabel"}}">
  {{! Search input }}
  {{#if showSearch}}
    <div class="nav-search">
      <input type="search" name="navSearch" placeholder="{{localize searchPlaceholder}}"
        aria-label="{{localize searchLabel}}">
      <i class="fas fa-search" inert></i>
    </div>
  {{/if}}

  {{! Ungrouped tabs }}
  {{#each ungroupedTabs as |tab|}}
    <a data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}" {{#if tab.cssClass}}class="{{tab.cssClass}}"
      {{/if}} {{#if tab.color}}style="--group-color: {{tab.color}}" {{/if}} data-tooltip
      aria-label="{{#if tab.tooltip}}{{tab.tooltip}}{{else}}{{localize tab.label}}{{/if}}">
      {{#if tab.label}}<span>{{localize tab.label}}</span>{{/if}}
      {{#if tab.icon}}<i class="{{tab.icon}}" inert></i>{{/if}}
    </a>
  {{/each}}

  {{! Grouped tabs }}
  {{#each tabGroups as |group|}}
    <div class="tab-group {{group.id}}" data-group-id="{{group.id}}" style="--group-color: {{group.color}}">
      <div class="tab-group-header" data-tooltip aria-label="{{localize group.tooltip}}" data-tooltip-direction="LEFT">
        {{localize group.label}}
      </div>
      {{#each group.tabs as |tab|}}
        <a data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}"
          {{#if tab.cssClass}}class="{{tab.cssClass}}" {{/if}} data-tooltip
          aria-label="{{#if tab.tooltip}}{{tab.tooltip}}{{else}}{{localize tab.label}}{{/if}}">
          {{#if tab.label}}<span>{{localize tab.label}}</span>{{/if}}
          {{#if tab.icon}}<i class="{{tab.icon}}" inert></i>{{/if}}
        </a>
      {{/each}}
    </div>
  {{/each}}
</nav>
