<ion-header>
  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <!-- Shows error message is socket is not connected. -->
  <ion-item no-lines *ngIf="!loginManager.loginAvailable()">
    <ion-label style="color: #ea6153">
      Login service unavailable as cannot connect to server.
    </ion-label>
  </ion-item>

  <!-- Shows a login error message if one exists. -->
  <ion-item no-lines *ngIf="loginErrorMessage">
    <ion-label style="color: #ea6153">
      {{loginErrorMessage}}
    </ion-label>
  </ion-item>

  <form (ngSubmit)="doLogin()" [formGroup]="loginForm">

    <!-- Username input field -->
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text" formControlName="username"></ion-input>
    </ion-item>

    <!-- Invalid username error -->
    <ion-item no-lines *ngIf="!loginForm.controls.username.valid && loginForm.controls.username.dirty">
      <ion-label style="color: #ea6153">
        Invalid username.
      </ion-label>
    </ion-item>

    <!-- Password input field -->
    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>

    <!-- Invalid password error -->
    <ion-item no-lines *ngIf="!loginForm.controls.password.valid && loginForm.controls.password.dirty">
      <ion-label style="color: #ea6153">
        Invalid password
      </ion-label>
    </ion-item>

    <br />

    <!-- Login button -->
    <span>
      <button ion-button type="submit" color="primary" [disabled]="!loginManager.loginAvailable()">Login</button>
    </span>

    <!-- Skip login button -->
    <span *ngIf="!popped">
      <button type="button" ion-button color="dark" (click)="doLeavePage()" clear>Skip</button>
    </span>

  </form>

</ion-content>
