<ion-header no-border>
  <ion-grid>
    <ion-row color="primary" justify-content-center>
      <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
        <ion-toolbar class="business-toolbar">
          <ion-buttons (click)="back()" slot="start" title="{{ 'back_login' | translate }}">
            <ion-icon name="arrow-round-back" color="#2b94d1" class="back" tappable></ion-icon>
            <!--<ion-icon name="arrow-dropleft-circle" color="#2b94d1" class="back"></ion-icon>-->
          </ion-buttons>
          <ion-title class="logo-piccolo">
              <img src="assets/icon/2p2-logo-color.svg">
          </ion-title>
        </ion-toolbar>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-header>
  
  <ion-content>
    <form #form="ngForm" (ngSubmit)="reset(form)" [formGroup]="matching_email_group">
      <ion-grid>
        <ion-row color="primary" justify-content-center>
          <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
            <div text-center>
              <h3>{{ 'reset_pwd' | translate }}</h3>
            </div>
            <div padding>
              <ion-item>
                <ion-input formControlName="email" type="email" placeholder="{{ 'email' | translate }}" ngModel required></ion-input>
              </ion-item>
            </div>
            <div padding>
              <ion-button size="large" type="submit" [disabled]="form.invalid" expand="block">{{ 'reset_pwd' | translate }}</ion-button>
            </div>
          </ion-col>
        </ion-row>
        <ion-row color="primary" justify-content-center>
          <div class="validation-errors" justify-content-center>
            <ng-container *ngFor="let validation of validation_messages.email">
              <div class="error-message" *ngIf="matching_email_group.get('email').hasError(validation.type) && (matching_email_group.get('email').dirty 
              || matching_email_group.get('email').touched)">
                {{ validation.message }}
              </div>
            </ng-container>
          </div>
        </ion-row>
      </ion-grid>
    </form>
  </ion-content>