<div class="outer">
  <div class="middle">
    <form class="inner" #mForm="ngForm">
      <md-card>
        <md-card-title>
          <img class="e-logo" src="assets/img/logo.png" alt="logo" />
          <h2 class="title-login">{{'recovery.title' | translate}}</h2>
        </md-card-title>
        <md-card-content>
          <md-input-container class="p-full-width">
            <input mdInput required placeholder="{{'recovery.email' | translate}}" name="email" [(ngModel)]="e.email" #email="ngModel"
              id="email">
            <md-error *ngIf="(email.errors && (email.dirty || email.touched))">
              {{'recovery.validate.email' | translate}}
            </md-error>
          </md-input-container>
        </md-card-content>
        <md-card-actions align="center">
          <button type="submit" [disabled]="buttonLoading || (!mForm.form.valid)" md-raised-button class="btnLogin" (click)="sendPassword()"><i *ngIf="buttonLoading" class="fa fa-circle-o-notch fa-spin"></i> {{'recovery.sendPassword' | translate}}</button>
          <button type="button" class="btn btn-link btn-forget" (click)="changePassword()">{{'recovery.received' | translate}}</button>
        </md-card-actions>
      </md-card>
    </form>
  </div>
</div>