<app-grid>
    <mat-card>
        <h1>Hello {{account.username}}!</h1>
        <h2>Welcome to the admin panel</h2>
    </mat-card>
    <mat-card class="wide-2">
        <h3>Change password</h3>
        <form [formGroup]="passwordForm">
            <mat-form-field class="full-width">
                <mat-label>New password</mat-label>
                <mat-error>this field must not be empty</mat-error>
                <input matInput type="password" formControlName="password">
            </mat-form-field>
            <mat-form-field class="full-width">
                <mat-label>Retype new password</mat-label>
                <mat-error>this field must not be empty</mat-error>
                <input matInput type="password" formControlName="password_repeat">
            </mat-form-field>
            <div class="mat-error" *ngIf="passwordError">
                please type your new password the same way twice.
            </div>
            <button mat-raised-button color="primary" (click)="onPasswordSubmit()">Change password</button>
        </form>
    </mat-card>
    <mat-card>
        <h3>Post status</h3>
        <form [formGroup]="statusForm">
            <mat-form-field class="full-width">
                <mat-label>status</mat-label>
                <mat-error>this field must not be empty</mat-error>
                <textarea matInput formControlName="status"></textarea>
            </mat-form-field>
            <mat-form-field class="full-width">
                <mat-label>Time</mat-label>
                <mat-select formControlName="time" [value]="60">
                    <mat-option *ngFor="let time of timeOptions" [value]="time.value">
                        {{time.viewValue}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <button mat-raised-button color="primary" (click)="onStatusSubmit()">Post Status</button>
        </form>
    </mat-card>
</app-grid>