<ion-header class="ion-no-border">
  <ion-toolbar class="ion-text-center">
    <ion-back-button defaultHref="/app/tabs/settings/cards" slot="start"></ion-back-button>
    <ion-title>{{ 'BUTTON_NEW_CARD' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <form #formAddCard="ngForm" (ngSubmit)="saveCard(formAddCard)">
    <ion-list>
      <ion-grid>
        <ion-row>
          <ion-col size="2">
            <img src="../../assets/img/creditCardLogo/{{typeImage}}" class="marginTop20" />
          </ion-col>
          <ion-col size="10">
            <ion-label class="textTittle marginLeft55">{{ 'NUMBER_CARD' | translate }}</ion-label>
            <ion-item class="inputBorderRadius marginTop0" lines="none">
              <ion-input
                type="tel"
                maxlength="19"
                placeholder="{{ 'NUMBER_CARD_PLACEHOLDER' | translate }}"
                [(ngModel)]="numberCardAdd"
                name="numberCard"
                #numberCard="ngModel"
                required
                (ngModelChange)="formatCardNumber($event)"
              ></ion-input>
              <ion-button type="submit" color="primary" expand="block" fill="clear" (click)="cardScanning()"
                ><ion-icon name="camera-outline"> </ion-icon>
              </ion-button>
            </ion-item>

            <div
              *ngIf="numberCard.invalid && (numberCard.dirty || numberCard.touched) || statusInvalidNumberCard"
              class="inputRequired ion-text-center"
            >
              <div *ngIf="statusInvalidNumberCard || numberCard.errors.required">{{ 'NUMBER_CARD_REQUIRED' | translate}}</div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>

      <ion-grid>
        <ion-row>
          <ion-col col-6>
            <ion-label class="textTittle">{{ 'DATE_CARD' | translate }}</ion-label>
            <ion-item class="inputBorderRadius marginTop0" lines="none">
              <ion-input
                type="tel"
                maxlength="5"
                placeholder="{{ 'DATE_CARD_PLACEHOLDER' | translate }}"
                [(ngModel)]="dateAdd"
                #date="ngModel"
                required
                name="date"
                (keyup)="formatCardDate($event);"
              ></ion-input>
            </ion-item>

            <div *ngIf="date.invalid && (date.dirty || date.touched) || statusInvalidDate" class="inputRequired ion-text-center">
              <div *ngIf="statusInvalidDate || date.errors.required">{{ 'DATE_CARD_REQUIRED' | translate}}</div>
            </div>
          </ion-col>

          <ion-col col-6>
            <ion-label class="textTittle">{{ 'CVC_CARD' | translate }}</ion-label>
            <ion-item class="inputBorderRadius marginTop0" lines="none">
              <ion-input
                type="tel"
                maxlength="4"
                placeholder="{{ 'CVC_CARD_PLACEHOLDER' | translate }}"
                [(ngModel)]="cvcAdd"
                #cvc="ngModel"
                required
                name="cvc"
                (keyup)="formatCardCvv($event);"
              ></ion-input>
            </ion-item>

            <div *ngIf="cvc.invalid && (cvc.dirty || cvc.touched) || statusInvalidCVC" class="inputRequired ion-text-center">
              <div *ngIf="statusInvalidCVC || cvc.errors.required">{{ 'CVC_CARD_REQUIRED' | translate}}</div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>

      <ion-grid>
        <ion-row>
          <ion-col col-12>
            <ion-label class="textTittle">{{ 'NAME_CARD' | translate }}</ion-label>
            <ion-item class="inputBorderRadius marginTop0" lines="none">
              <ion-input
                type="text"
                placeholder="{{ 'NAME_CARD_PLACEHOLDER' | translate }}"
                [(ngModel)]="nameAdd"
                #name="ngModel"
                required
                name="name"
              ></ion-input>
            </ion-item>

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

      <ion-label>
        <p class="text1Verify ion-text-center">{{ 'TEXT1_VERIFY_CARD' | translate }}</p>
        <p class="ion-text-center">{{ 'TEXT2_VERIFY_CARD' | translate }}</p>
        <p class="textTittle ion-text-center">{{ 'TEXT3_VERIFY_CARD' | translate }}</p>
      </ion-label>

      <ion-button type="submit" color="primary" shape="round" expand="block" fill="solid" class="marginTop10"
        >{{ 'ADD_CARD_BUTTON' | translate }}</ion-button
      >
    </ion-list>
  </form>
</ion-content>