<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">
        <span class="pi {{ item.group.icon }} editor-nav-group__icon" aria-hidden="true"></span>
        <span class="editor-nav-group__label">{{ item.group.labelKey | translate }}</span>
        <span class="pi {{ item.statusIcon }} editor-nav-group__status editor-nav-group__status--{{ item.status }}" [attr.aria-label]="item.statusLabelKey | translate"></span>
      </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()"
            >
              <span class="pi {{ section.statusIcon }} editor-nav-link__status editor-nav-link__status--{{ section.status }}" [attr.aria-label]="section.statusLabelKey | translate"></span>
              <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>
