<div class="fill-height p-3" [style.backgroundColor]="day ? '#88aaff' : '#000e31'" style="overflow-y: scroll">
    <!-- Current Weather -->
    <div class="d-flex flex-column align-items-center">
        <div>
            <h3 class="mb-0 text-center">London, ON</h3>
            <h3>{{weatherService.weather[0].phrase}}</h3>
        </div>
        <div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
            <div class="p-3 text-center">
                <i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
            </div>
            <div class="d-flex">
                <div class="d-flex flex-column mr-3">
                    <div>
                        <h1 class="mb-0">{{weatherService.weather[0].current | round: 1}} °C</h1>
                    </div>
                    <div>
                        Feels Like: {{weatherService.weather[0].feelsLike | round}} °C
                    </div>
                </div>
                <div class="d-flex flex-column">
                    <div>
                        <mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_upward</mat-icon>
                        {{weatherService.weather[0].high | round}} °C
                    </div>
                    <div>
                        <mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_downward</mat-icon>
                        {{weatherService.weather[0].low | round}} °C
                    </div>
                    <div>
                        <i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather[0].pop * 100 | round}}%
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Forecast -->
    <mat-card class="m-3 mx-auto" style="max-width: 450px">
        <div class="d-flex justify-content-center">
            <div *ngFor="let day of weatherService.weather" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
                {{day.date.toString().slice(0, 4).toUpperCase()}}
                <i [class]="'my-2 wi wi-fw ' + day.icon" style="font-size: 2rem"></i>
                <div class="text-center">{{day.high | round}} °C</div>
                <div class="text-center text-muted">{{day.low | round}} °C</div>
            </div>
        </div>
    </mat-card>
    <!-- Sunlight -->
    <mat-card class="m-3 mx-auto" style="max-width: 450px">
        <h5>Sunlight</h5>
        <div class="d-flex justify-content-center">
            <div class="d-flex align-items-center flex-grow-1">
                <i class="wi wi-sunrise mr-1"></i> {{weatherService.weather[0].sunrise | date: 'shortTime'}}
            </div>
            <div class="d-flex align-items-center justify-content-center flex-grow-1">
                <i class="wi wi-fw wi-cloud mr-1"></i> {{weatherService.weather[0].cloudCover * 100 | round}}%
            </div>
            <div class="d-flex align-items-center justify-content-end flex-grow-1">
                <i class="wi wi-sunset mr-1"></i> {{weatherService.weather[0].sunset | date: 'shortTime'}}
            </div>
        </div>
        <canvas id="myCanvas" class="mt-3" style="width: 100%" height="150"></canvas>
    </mat-card>
    <!-- Wind -->
    <mat-card class="m-3 mx-auto" style="max-width: 450px">
        <h5>Wind</h5>
        <div class="d-flex justify-content-center">
            <div class="d-flex align-items-center flex-grow-1">
                <i class="wi wi-fw wi-windy"></i> {{weatherService.weather[0].wind.speed | round}} km/h
            </div>
            <div class="d-flex align-items-center justify-content-center flex-grow-1">
                {{weatherService.weather[0].wind.direction}}°
            </div>
            <div class="d-flex align-items-center justify-content-end flex-grow-1">
                <i class="wi wi-fw wi-strong-wind"></i> {{weatherService.weather[0].wind.gusts | round}} km/h
            </div>
        </div>
        <div class="p-3 text-center">
            <i class="wi wi-wind wi-fw wi-towards-0" [style.transform]="'rotate(' + weatherService.weather[0].wind.direction + 'deg)'" style="color: #5d8cff; font-size: 14rem; height: 14rem; width: 14rem"></i>
        </div>
    </mat-card>
</div>
