<nav class="editor-nav" [attr.aria-label]="'builder.appName' | translate">
  @for (item of groups(); track item.group.id) {
    <div class="editor-nav-group">
      <div class="editor-nav-group__header">
        <app-icon [name]="item.group.icon" [size]="18" class="editor-nav-group__icon" />
        <span class="editor-nav-group__label">{{ item.group.labelKey | translate }}</span>
        <app-icon [name]="item.statusIcon" [size]="14" [ariaLabel]="item.statusLabelKey | translate" class="editor-nav-group__status editor-nav-group__status--{{ item.status }}" />
      </div>
      <ul class="editor-nav-group__list">
        @for (section of item.sections; track section.id) {
          <li>
            <a
              [routerLink]="['/edit', section.id] | langRoute"
              routerLinkActive="active"
              [ariaCurrentWhenActive]="'page'"
              class="editor-nav-link"
              (click)="onLinkClick()"
            >
              <app-icon [name]="section.statusIcon" [size]="14" [ariaLabel]="section.statusLabelKey | translate" class="editor-nav-link__status editor-nav-link__status--{{ section.status }}" />
              <span class="editor-nav-link__label">{{ section.labelKey | translate }}</span>
              @if (section.issueCount > 0) {
                <span class="editor-nav-badge" [attr.aria-label]="section.issueCount + ' ' + ('builder.title' | translate)">{{ section.issueCount }}</span>
              } @else if (section.modified) {
                <span class="editor-nav-dot" [attr.aria-label]="'builder.unsavedChanges' | translate"></span>
              }
            </a>
          </li>
        }
      </ul>
    </div>
  }
</nav>
