@if( race != undefined ) {
    <div class="race-details">
        <div class="details-container">
            <div class="map-title">
                <h1>{{race.mapName}}</h1>
                <a mat-fab extended href="{{race.mapURL}}" class="button is-fullwidth is-danger" title="{{race.mapName}}.Map.Gbx" color="primary">
                    <mat-icon>download</mat-icon>
                    Download map
                </a>
            </div>
            <div class="map-times">
                <p>Author Time: {{formatMilliseconds(race.authorTime)}}</p>
                <p>Gold Time: {{formatMilliseconds(race.goldTime)}}</p>
                <p>Silver Time: {{formatMilliseconds(race.silverTime)}}</p>
                <p>Bronze Time: {{formatMilliseconds(race.bronzeTime)}}</p>
            </div>
        </div>
        <img
            src={{race.mapImgUrl}}
            class="img-thumbnail shadow-2-strong"
        />
    </div>
    <br>
    <div class="count-down-timer">
        @if(openToUploads) {
            <h2>Entries Close on: {{currentTime}} </h2>
            <div class="wrapper">
                <div class="description">
                <p>Days</p>
                <p>Hours</p>
                <p>Minutes</p>
                <p>Seconds</p>
                </div>
                <div class="times">
                <p #days></p>
                <p #hours></p>
                <p #minutes></p>
                <p #seconds></p>
                </div>
            </div>
        } 
        @else {
            <h2>Closed for new entries</h2>
        }
        
    </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>
}