<div class="content-border padded">
  <div class="container centered">
    <form class="row" (ngSubmit)="onSubmit()">
      <div class="col-12 py-2">
        <h1>Login</h1>
      </div>

      <div class="col-12 py-2">
        <mat-form-field appearance="outline" color="accent">
          <mat-label>Username</mat-label>
          <input
            matInput
            type="text"
            [formControl]="model.username"
            name="username"
            autocorrect="off"
            autocapitalize="none"
            required
          />
          <mat-error *ngIf="model.username.errors">
            {{ model.usernameError }}
          </mat-error>
        </mat-form-field>
      </div>

      <div class="col-12 py-2">
        <mat-form-field appearance="outline" color="accent">
          <mat-label>Password</mat-label>
          <input
            matInput
            type="password"
            [formControl]="model.password"
            name="password"
            required
          />
          <mat-error *ngIf="model.password.errors">
            {{ model.passwordError }}
          </mat-error>
        </mat-form-field>
      </div>

      <div class="col-12 py-2">
        <button mat-raised-button color="accent" class="mx-2" type="submit">
          LOGIN
        </button>
        <button
          *ngIf="showRegister"
          mat-raised-button
          color="primary"
          class="mx-2"
          (click)="onRegister()"
          type="button"
        >
          REGISTER
        </button>
      </div>
    </form>
  </div>
</div>
