<div class="position cell" [stripe]="item.driver?.color">
    {{item.position + 1}}
</div>
<div *ngFor="let field of fields" [ngSwitch]="field" [ngClass]="[field, 'cell']">
    <ng-template ngSwitchCase="number">
        {{item.id + 1}}
    </ng-template>
    <ng-template ngSwitchCase="name">
        {{item.driver?.name}}
    </ng-template>
    <ng-template ngSwitchCase="code">
        {{item.driver?.code}}
    </ng-template>
    <ng-template ngSwitchCase="time">
        <span [ngSwitch]="item.position == 0 ? '' : (items[0].laps - item.laps).toString()">
            <ng-template ngSwitchCase="">
                {{item.time | time:'m:ss.sss'}}
            </ng-template>
            <ng-template ngSwitchCase="0">
                {{(item.time - items[0].time) | time:'+s.sss'}}
            </ng-template>
            <ng-template ngSwitchCase="1">
                +1 Lap
            </ng-template>
            <ng-template ngSwitchDefault>
                +{{items[0].laps - item.laps}} Laps
            </ng-template>
        </span>
    </ng-template>
    <ng-template ngSwitchCase="bestlap">
        <span [ngClass]="{notime: !item.best[0]}">
            {{(item.best[0] | time:'s.sss') || 'NO&thinsp;TIME'}}
        </span>
    </ng-template>
    <ng-template ngSwitchCase="gap">
        {{(item.position && item.best[0] ? item.best[0] - items[0].best[0] : null) | time:'+s.sss'}}
    </ng-template>
    <ng-template ngSwitchCase="int">
        {{(item.position && item.best[0] ? item.best[0] - items[item.position - 1].best[0] : null) | time:'+s.sss'}}
    </ng-template>
    <ng-template ngSwitchCase="lastlap">
        <span [ngClass]="{best: item.last[0] == item.best[0], allbest: item.last[0] == best[0], notime: !item.last[0]}">
            {{(item.last[0] | time:'s.sss') || 'NO&thinsp;TIME'}}
        </span>
    </ng-template>
    <ng-template ngSwitchCase="sector1">
        <span [ngClass]="{sector: item.sector == 1, best: item.last[1] == item.best[1], allbest: item.last[1] == best[1]}">
            {{item.last[1] | time:'s.sss'}}
        </span>
    </ng-template>
    <ng-template ngSwitchCase="sector2">
        <span [ngClass]="{sector: item.sector == 2, best: item.last[2] == item.best[2], allbest: item.last[2] == best[2]}">
            {{item.last[2] | time:'s.sss'}}
        </span>
    </ng-template>
    <ng-template ngSwitchCase="sector3">
        <span [ngClass]="{sector: item.sector == 3, best: item.last[3] == item.best[3], allbest: item.last[3] == best[3]}">
            {{item.last[3] | time:'s.sss'}}
        </span>
    </ng-template>
    <ng-template ngSwitchCase="laps">
        {{item.laps}}
    </ng-template>
    <ng-template ngSwitchCase="pits">
        {{item.pits}}
    </ng-template>
    <ng-template ngSwitchCase="fuel">
        <gauge max="15" [value]="item.fuel">&nbsp;</gauge>
    </ng-template>
    <ng-template ngSwitchCase="status">
        <checkerboard cols="7" rows="5" *ngIf="item.finished"></checkerboard>
        <span *ngIf="!item.finished && item.pit" [ngClass]="item.refuel ? 'inpit' : 'pitenter'">PIT</span>
        <span *ngIf="!item.finished && !item.pit && item.gridpos != null && item.laps && items.length > 2"
            [ngClass]="item.gridpos > item.position ? 'pos-up' : item.gridpos < item.position ? 'pos-dn' : 'pos-eq'">
            {{abs(item.gridpos - item.position)}}
        </span>
    </ng-template>
</div>
