<div class="fill-height p-3">
    <div style="max-width: 1000px">
        <mat-card>
            <mat-card-content>
                <div class="d-flex align-items-center">
                    <div class="mr-3">
                        <button mat-icon-button (click)="toggle()">
                            <mat-icon style="font-size: 36px" [ngClass]="{'text-primary': armed}">power_settings_new</mat-icon>
                        </button>
                    </div>
                    <div>
                        <h1 *ngIf="armed" class="d-inline mb-0">Armed</h1>
                        <h1 *ngIf="!armed" class="d-inline mb-0">Standby</h1>
                    </div>
                </div>
            </mat-card-content>
        </mat-card>
        <mat-card class="mt-3">
            <mat-card-content>
                <h3>Log</h3>
                <mat-divider></mat-divider>
                <div class="pt-2">
                    <div *ngFor="let l of log">
                        <span class="text-muted">{{l.timestamp | date: 'short'}}:</span>
                        <span class="ml-2">{{l.message}}</span>
                    </div>
                </div>
            </mat-card-content>
        </mat-card>
    </div>
</div>
