<mat-grid-list cols="2" rowHeight="45%">
  <mat-grid-tile colspan="1" rowspan="2">
    <mat-card class="card placeholder">
      <mat-card-title class="card-title">Profile Information</mat-card-title>
      <mat-card-content>
        <form
          class="example-form form"
          name="form"
          (ngSubmit)="f.form.valid && openDialog('updateUser')"
          #f="ngForm"
          novalidate
        >
          <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>Username</mat-label>
            <input
              type="text"
              name="username"
              matInput
              [formControl]="userNameFormControl"
              placeholder="Ex. patrick-bateman"
              [(ngModel)]="form.username"
              #username
            />
            <mat-error *ngIf="userNameFormControl.hasError('required')">
              Username is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>{{ form.email }}</mat-label>
            <input
              type="email"
              matInput
              name="email"
              disabled
              placeholder="Ex. patrickbateman@example.com"
            />
          </mat-form-field>
          <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>Password</mat-label>
            <input
              type="password"
              matInput
              name="password"
              [formControl]="passwordFormControl"
              placeholder="Password"
              minlength="6"
              [(ngModel)]="form.password"
              #password
            />
            <mat-error
              *ngIf="
                passwordFormControl.hasError('minlength') &&
                !passwordFormControl.hasError('required')
              "
            >
              Please enter a valid password
            </mat-error>
            <mat-error *ngIf="passwordFormControl.hasError('required')">
              Password is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>Repeat Password</mat-label>
            <input
              type="password"
              matInput
              [formControl]="passwordRepeatFormControl"
              placeholder="Ex. pat@example.com"
              minlength="6"
              [(ngModel)]="form.passwordRepeat"
              #passwordRepeat
            />
            <mat-error
              *ngIf="
                passwordRepeatFormControl.hasError('minLength') &&
                !passwordRepeatFormControl.hasError('required')
              "
            >
              Please enter a valid password
            </mat-error>
            <mat-error *ngIf="passwordFormControl.hasError('required')">
              Password is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <div class="alert-danger" *ngIf="checkPasswordFailed">
            Password does not match, make sure it is the same!
          </div>
          <br />
          <div class="form-group footer-buttons">
            <button
              class="btn btn-primary btn-block"
              [disabled]="
                passwordRepeatFormControl.hasError('required') ||
                !passwordRepeatFormControl.hasError('minLength') ||
                passwordFormControl.hasError('required') ||
                !passwordFormControl.hasError('minLength') ||
                userNameFormControl.hasError('required')
              "
            >
              Update
            </button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </mat-grid-tile>
  <mat-grid-tile colspan="1" rowspan="2">
    <mat-card class="card placeholder">
      <mat-card-title class="card-title">
        <span>Connect Telegram Account</span>
      </mat-card-title>
      <mat-card-content>
        <form
          name="form"
          (ngSubmit)="f.form.valid && openDialog('addTelegram')"
          #f="ngForm"
          novalidate
          class="backgorund form"
        >
          <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>Telegram UserId</mat-label>
            <input
              type="number"
              matInput
              [formControl]="telegramIdFormControl"
              [(ngModel)]="userId"
              required
              #telegramId
              placeholder="123456789"
            />
            <mat-error *ngIf="telegramIdFormControl.hasError('required')">
              Id is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <div class="form-group footer-buttons">
            <button
              class="btn btn-primary btn-block"
              [disabled]="telegramIdFormControl.hasError('required')"
            >
              Add
            </button>
          </div>
        </form>
        <button class="btn btn-secondary btn-block" (click)="openHelp()">
          Help
        </button>
      </mat-card-content>
    </mat-card>
  </mat-grid-tile>
</mat-grid-list>
