<div class="login">
  <!-- BEGIN LOGO -->
  <div class="logo">
    <a href="index.html">
      <img src="../../../assets/pages/img/logo-big.png" alt="" />
    </a>
  </div>
  <!-- END LOGO -->
  <!-- BEGIN LOGIN -->
  <div class="content">

    <!-- BEGIN LOGIN FORM -->
    <form class="login-form" *ngIf="! showForgotPassword && ! showLoading" [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
      <h3 class="form-title font-green">Sign In</h3>
      <div class="alert alert-danger" *ngIf="errorMessage">
        <span> The username or password is not correct. <a (click)="toggleForgotPassword()">Forgot Password?</a> </span>
        {{ errorMessage }}
      </div>
      <div class="form-group">
        <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
        <label class="control-label visible-ie8 visible-ie9">Username</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" autofocus
               placeholder="Username" name="username"
               [formControl]="loginForm.controls['username']" />
      </div>
      <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Password</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off"
               placeholder="Password" name="password"
               [formControl]="loginForm.controls['password']" />
      </div>
      <div class="form-actions">
        <button type="submit" class="btn green uppercase"
                [disabled]="loginForm.controls['username'].hasError('required') || loginForm.controls['password'].hasError('required')">
          Login
        </button>
        <label class="rememberme check">
          <input type="checkbox" name="remember" value="1" [formControl]="loginForm.controls['remember']" />Remember
        </label>
        <a (click)="toggleForgotPassword()" class="forget-password">Forgot Password?</a>
      </div>
    </form>
    <!-- END LOGIN FORM -->

    <!-- BEGIN FORGOT PASSWORD FORM -->
    <form class="forget-form" *ngIf="showForgotPassword && ! showLoading">
      <h3 class="font-green">Forgot Password ?</h3>
      <p> Enter your username or e-mail address below to reset your password. </p>
      <div class="form-group">
        <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username or Email" name="email" autofocus />
      </div>
      <div class="form-actions">
        <button type="button" (click)="toggleForgotPassword()" class="btn btn-default">Back</button>
        <button (click)="forgotPassword()" class="btn btn-success uppercase pull-right">Submit</button>
      </div>
    </form>
    <!-- END FORGOT PASSWORD FORM -->

    <!-- BEGIN LOADING -->
    <div *ngIf="showLoading" class="loading">
      <h3 class="font-green">Loading</h3>
      <p class="loading-icon"><span class="icon-settings fa-spin"></span></p>
      <p> Please wait... </p>
    </div>
    <!-- END LOADING -->

  </div>
  <div class="copyright"> 2014 © Metronic. Admin Dashboard Template. </div>
</div>
