<table class="table table-bordered ng-808" cellspacing="0">
  <tr>
    <th class="name-head">Name</th>
    <th class="steps-head">Steps</th>
    <th *ngFor="#step of headerSteps" class="seek-cell" (click)="drumMachine.seekToAndPlay($index)">{{ step }}</th>
  </tr>
  <tr *ngFor="#track of eventTracks; #i = index" ng-class="lastClass($last)">
    <td class="part-label" (click)="triggerPart(i, levelFromMouseEvent($event))">
      {{ track.name }}
      <buffer-oscilloscope width="128" height="50" ></buffer-oscilloscope>
    </td>
    <td>
      <select class="form-control" [(ngModel)]="track.length">
        <option *ngFor="#steps of [2, 4, 8, 16, 32]" [value]="steps">{{ steps }}</option>
      </select>
    </td>
    <td *ngFor="#event of track.events; #eventIndex = index" class="event-cell {{ eventCellClass(track, event, eventIndex) }}" (click)="toggleLevel(i, event, $event)"><span></span></td>
  </tr>
</table>
