<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-back-button slot="start" defaultHref="/welcome"></ion-back-button>
    <ion-title class="ion-text-center">{{ 'SIGNUP_TITLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <img src="../../assets/img/city.png" class="imageLogin" alt="image_login" />

  <form #formSignup="ngForm" (ngSubmit)="doSignup(formSignup)">
    <ion-list>
      <ion-item class="ion-margin-top inputBorderRadius" lines="none">
        <ion-input type="text" placeholder="{{ 'NAME' | translate }} {{ 'REQUIRED_SYMBOL' | translate }}" ngModel
          (ngModelChange)="utilsService.omitSpecialChar('name',formSignup, $event)"
          (change)="clearSpecialChars($event.target)" (input)="avoidSpecialChars($event)"
          (keypress)="avoidSpecialChars($event)" (paste)="onPaste($event)" name="name" #name="ngModel" required
          minlength="3" maxlength="191" class="ion-text-center"></ion-input>
      </ion-item>

      <div *ngIf="name.invalid && (name.dirty || name.touched) || statusInvalidName && name.invalid"
        class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidName || name.errors?.required">{{ 'NAME_REQUIRED' | translate }}</div>
      </div>

      <ion-item class="ion-margin-top inputBorderRadius" lines="none">
        <ion-input type="text" placeholder="{{ 'LAST_NAME' | translate }} {{ 'REQUIRED_SYMBOL' | translate }}" ngModel
          (ngModelChange)="utilsService.omitSpecialChar('lastName',formSignup, $event)"
          (change)="clearSpecialChars($event.target)" (input)="avoidSpecialChars($event)"
          (keypress)="avoidSpecialChars($event)" (paste)="onPaste($event)" name="lastName" #lastName="ngModel" required
          minlength="3" maxlength="191" class="ion-text-center"></ion-input>
      </ion-item>

      <div *ngIf="lastName.invalid && (lastName.dirty || lastName.touched) || statusInvalidLastName && lastName.invalid"
        class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidLastName || lastName.errors?.required">{{ 'LAST_NAME_REQUIRED' | translate }}</div>
      </div>

      <ion-item class="ion-margin-top inputBorderRadius" lines="none">
        <ion-input type="email" placeholder="{{ 'EMAIL' | translate }} {{ 'REQUIRED_SYMBOL' | translate }}" ngModel
          (change)="clearSpecialChars($event.target)" (input)="avoidSpecialChars($event)"
          (keypress)="avoidSpecialChars($event)" (paste)="onPaste($event)" name="email" #email="ngModel" required
          (ngModelChange)="matchingEmails($event, confirmEmail.value)" maxlength="191"
          pattern="[A-Za-z0-9._%+-]{2,}@[a-zA-Z]{2,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})"
          class="ion-text-center"></ion-input>
      </ion-item>

      <div *ngIf="email.invalid && (email.dirty || email.touched) || statusInvalidEmail && email.invalid"
        class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidEmail || email.errors?.required">{{ 'EMAIL_REQUIRED' | translate }}</div>
      </div>

      <div *ngIf="email.dirty || email.touched" class="ion-text-center inputRequired">
        <div *ngIf="statusFormatEmail">{{ 'EMAIL_FORMAT' | translate }}</div>
      </div>

      <ion-item class="ion-margin-top inputBorderRadius" lines="none">
        <ion-input type="email" placeholder="{{ 'CONFIRM_EMAIL' | translate }} {{ 'REQUIRED_SYMBOL' | translate }}"
          ngModel (change)="clearSpecialChars($event.target)" (input)="avoidSpecialChars($event)"
          (keypress)="avoidSpecialChars($event)" (paste)="onPaste($event)" name="confirmEmail" #confirmEmail="ngModel"
          required (ngModelChange)="matchingEmails(email.value, $event)" maxlength="191"
          pattern="[A-Za-z0-9._%+-]{2,}@[a-zA-Z]{2,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})"
          class="ion-text-center" onPaste="return false" onCopy="return false" onCut="return false"
          onDrag="return false" onDrop="return false" autocomplete="new-confirm-email"></ion-input>
      </ion-item>

      <div *ngIf="confirmEmail.dirty || confirmEmail.touched || statusInvalidConfirmEmail"
        class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidConfirmEmail">{{ 'MISMATCHED_EMAIL' | translate }}</div>
      </div>

      <ion-item class="ion-margin-top inputBorderRadius" lines="none">
        <ion-input type="tel" placeholder="{{ 'CELL_PHONE' | translate }} ({{ 'OPTIONAL' | translate }})" ngModel
          (change)="clearSpecialChars($event.target)" (input)="avoidSpecialChars($event)"
          (keypress)="avoidSpecialChars($event)" (paste)="onPaste($event)" name="cellPhone" #cellPhone="ngModel"
          maxlength="10" pattern="[0-9]{7,10}" class="ion-text-center"></ion-input>
      </ion-item>

      <div
        *ngIf="cellPhone.invalid && (cellPhone.dirty || cellPhone.touched) || statusInvalidCellPhone && cellPhone.invalid"
        class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidCellPhone || cellPhone.errors?.required">{{ 'CELL_PHONE_REQUIRED' | translate }}</div>
      </div>

      <!-- <ion-item class="ion-margin-top inputBorderRadius" lines="none">
        <ion-input
          type="tel"
          placeholder="{{ 'IDENTIFICATION_CARD' | translate }}"
          ngModel
          name="document"
          #document="ngModel"
          maxlength="191"
          class="ion-text-center"
        ></ion-input>
      </ion-item> -->

      <ion-item class="ion-margin-vertical inputBorderRadius" lines="none">
        <app-show-hide-password>
          <ion-input type="password" placeholder="{{ 'PASSWORD' | translate }} {{ 'REQUIRED_SYMBOL' | translate }}"
            ngModel name="password" #password="ngModel" required maxlength="191" class="ion-text-center"></ion-input>
        </app-show-hide-password>
      </ion-item>

      <div *ngIf="password.invalid && (password.dirty || password.touched) || statusInvalidPassword && password.invalid"
        class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidPassword || password.errors?.required">{{ 'PASSWORD_REQUIRED' | translate }}</div>
      </div>

      <ion-item class="ion-margin-vertical inputBorderRadius" lines="none">
        <app-show-hide-password>
          <ion-input type="password"
            placeholder="{{ 'CONFIRM_PASSWORD' | translate }} {{ 'REQUIRED_SYMBOL' | translate }}" ngModel
            name="confirmPassword" #confirmPassword="ngModel" required
            (ngModelChange)="matchingPasswords(password.value, $event)" maxlength="191" class="ion-text-center"
            onPaste="return false" onCopy="return false" onCut="return false" onDrag="return false"
            onDrop="return false" autocomplete=off></ion-input>
        </app-show-hide-password>
      </ion-item>

      <div *ngIf="confirmPassword.dirty || confirmPassword.touched || statusInvalidConfirmPassword"
        class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidConfirmPassword">{{ 'MISMATCHED_PASSWORD' | translate }}</div>
      </div>

      <div class="ion-margin p-r">
        <ion-checkbox color="primary" checked="false" (ionChange)="changeAdultAuthorization($event)"></ion-checkbox>
        <span class="text_terms">{{ 'ADULT_AUTHORIZATION' | translate }}</span>
      </div>
      <div *ngIf="statusInvalidAdultAuthorization" class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidAdultAuthorization">{{ 'ADULT_AUTHORIZATION_REQUIRED' | translate }}</div>
      </div>

      <div class="ion-margin p-r">
        <ion-checkbox color="primary" checked="false" (ionChange)="changeStatusTerms($event)"></ion-checkbox>
        <span class="text_terms">{{ 'TERMS_AND_CONDITIONS_1' | translate }}
          <span (click)="openTermsSI()" class="openTerms">{{ 'TERMS_AND_CONDITIONS_2' | translate }}</span>{{
          'REQUIRED_SYMBOL' | translate }}</span>
      </div>
      <div *ngIf="statusInvalidTerms" class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidTerms">{{ 'TERMS_REQUIRED' | translate }}</div>
      </div>

      <div class="ion-margin p-r" *ngIf="dataPolicyUrl">
        <ion-checkbox color="primary" checked="false" (ionChange)="changeStatusDataPolicy($event)"></ion-checkbox>
        <span class="text_terms">{{ 'DATA_POLICY_PREFIX' | translate }}
          <span (click)="openDataPolicy()" class="openTerms">{{ 'DATA_POLICY' | translate }}</span>{{ 'REQUIRED_SYMBOL'
          | translate }}</span>
      </div>
      <div *ngIf="statusInvalidDataPolicy" class="ion-text-center inputRequired">
        <div *ngIf="statusInvalidDataPolicy">{{ 'DATA_POLICY_REQUIRED' | translate }}</div>
      </div>

      <ion-button type="submit" color="primary" size="large" shape="round" expand="block" class="ion-margin-top bold">
        {{ 'SIGNUP_BUTTON' | translate }}</ion-button>
    </ion-list>
  </form>
</ion-content>