@if( race != undefined ) {
    <div class="race-details">
        <div class="details-container">
            <div class="map-title">
                <h1>{{race.mapName}}</h1>
            </div>
            <div class="map-times">
                <p>Author Time: {{race.authorTime}}</p>
                <p>Gold Time: {{race.goldTime}}</p>
                <p>Silver Time: {{race.silverTime}}</p>
                <p>Bronze Time: {{race.bronzeTime}}</p>
            </div>
        </div>
        <img
            src={{race.mapImgUrl}}
            class="img-thumbnail shadow-2-strong"
        />
    </div>

    <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" (click)="onClickDownloadGhost(element)"><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>
}