@if( race != undefined ) {
    <mat-grid-list cols="4" rowHeight="100px">
        <mat-grid-tile [colspan]="3" [rowspan]="1"><h1>{{race.mapName}}</h1></mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="2"><img
            src={{race.mapImgUrl}}
            class="img-thumbnail shadow-2-strong"
        /></mat-grid-tile>
        <mat-grid-tile [colspan]="3" [rowspan]="1">Three</mat-grid-tile>
    </mat-grid-list>
    <br/>
    <div>
        <table mat-table [dataSource]="sortedResults" class="mat-elevation-z8">
            <ng-container matColumnDef="position">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
            </ng-container>
            
            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>Name </th>
                <td mat-cell *matCellDef="let element"> {{getRacerName(element.racer)}} </td>
            </ng-container>
            
            <!-- Weight Column -->
            <ng-container matColumnDef="runTime">
                <th mat-header-cell *matHeaderCellDef>Time </th>
                <td mat-cell *matCellDef="let element"> {{formatMilliseconds(element.time)}} </td>
            </ng-container>
    
            <ng-container matColumnDef="ghost">
                <th mat-header-cell *matHeaderCellDef>Ghost</th>
                <td mat-cell *matCellDef="let element"> <button mat-raised-button color="accent"><mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="download"></mat-icon> Ghost</button> </td>
            </ng-container>
            
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
    </div>
}