@if (moves.length === 0) {
  <div class="empty">No annotated moves yet.</div>
} @else {
  <div class="move-grid" role="list">
    @for (pair of pairs; track $index) {
      <div class="mv-num" role="presentation">{{ $index + 1 }}</div>

      <div
        class="mv"
        [class.active]="isWhiteActive($index)"
        [class]="qualityClass(pair.white)"
        role="listitem"
        tabindex="0"
        (click)="selectWhite($index)"
        (keydown.enter)="selectWhite($index)"
      >
        <span class="mv-san">{{ pair.white?.san ?? '' }}</span>
        @if (qualityLabel(pair.white)) {
          <span class="mv-badge" [class]="qualityClass(pair.white)">{{
            qualityLabel(pair.white)
          }}</span>
        }
      </div>

      <div
        class="mv"
        [class.active]="isBlackActive($index)"
        [class.mv-empty]="!pair.black"
        [class]="qualityClass(pair.black)"
        role="listitem"
        [attr.tabindex]="pair.black ? 0 : null"
        (click)="selectBlack($index, pair.black)"
        (keydown.enter)="selectBlack($index, pair.black)"
      >
        @if (pair.black) {
          <span class="mv-san">{{ pair.black.san }}</span>
          @if (qualityLabel(pair.black)) {
            <span class="mv-badge" [class]="qualityClass(pair.black)">{{
              qualityLabel(pair.black)
            }}</span>
          }
        } @else {
          <span class="mv-san mv-placeholder">…</span>
        }
      </div>
    }
  </div>
}