<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-8 col-md-4">
      {{'LOGIN' | translate}}
      <form #form="ngForm" (ngSubmit)="login(form.valid, form.value)" [ngFormOptions]="{updateOn: 'blur'}" novalidate>

        <div class="form-group">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="fa fa-envelope"></i>
              </span>
            </div>
            <input type="text" class="form-control" ngModel name="email" #email="ngModel" id="inputEmail" placeholder="{{'EMAIL' | translate}}"
              pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" required>
          </div>
          <p class="text-danger" *ngIf="(form.submitted && email.invalid) || (email.invalid && (email.dirty || email.touched))">
            <span *ngIf="email.errors.pattern">
              Please enter valid email address.
            </span>
            <span *ngIf="email.errors.required">
              Email is required.
            </span>
          </p>

        </div>

        <div class="form-group">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="fa fa-key"></i>
              </span>
            </div>
            <input #password="ngModel" type="password" class="form-control" id="password" placeholder="{{'PASSWORD' | translate}}" name="password"
              ngModel minlength="8" required>
          </div>
          <p class="text-danger" *ngIf="(form.submitted && password.invalid) || (password.invalid && (password.dirty || password.touched))">
            <span *ngIf="password.errors.minlength">
              Password must be at least 8 characters.
            </span>
            <span *ngIf="password.errors.required">
              Password is required.
            </span>
          </p>
        </div>

        <button type="submit" class="btn btn-primary">{{'LOGIN' | translate}}</button>
      </form>
    </div>
  </div>
</div>