<div
  class="content flex flex-row justify-center"
  style="padding-bottom: 160px">
  <mat-card elevation="5" class="flex-1">
    <mat-card-subtitle>
      <h2>Quartz Manager</h2>
    </mat-card-subtitle>

    <mat-card-title>
      <h2>{{ title }}</h2>
    </mat-card-title>

    <mat-card-content>
      @if (notification) {
      <p [class]="notification.msgType">{{ notification.msgBody }}</p>
      } @if (!submitted) {
      <form [formGroup]="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
        <mat-form-field>
          <input
            matInput
            formControlName="username"
            required
            placeholder="user" />
        </mat-form-field>
        <mat-form-field>
          <input
            matInput
            formControlName="password"
            required
            type="password"
            placeholder="password" />
        </mat-form-field>
        <button
          type="submit"
          [disabled]="!loginForm.form.valid"
          mat-raised-button
          color="primary">
          Login
        </button>
      </form>
      } @if (submitted) {
      <mat-spinner mode="indeterminate"></mat-spinner>
      }
    </mat-card-content>
  </mat-card>
</div>
