<div class="fill-height p-3">
    <div style="max-width: 1000px;">
        <div class="d-flex">
            <div class="pr-2 border-right border-white">
                <h1 class="mb-0">{{formatDate(now | async)}}</h1>
            </div>
            <div class="pl-2">
                <h1 class="mb-0">{{now | async | date: 'shortTime'}}</h1>
            </div>
        </div>
        <mat-card class="mt-3 w-100 hover" routerLink="/battery">
            <mat-card-content>
                <battery-widget></battery-widget>
            </mat-card-content>
        </mat-card>
        <mat-card class="mt-3 w-100 hover" routerLink="/weather">
            <mat-card-content>
                <weather-widget class="mx-auto"></weather-widget>
            </mat-card-content>
        </mat-card>
    </div>
</div>
