<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{'cards.add' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <form #form="ngForm" id="card_form" (ngSubmit)="addcard(form)" method="post">

    <ion-item [class.ng-invalid]="!holder_check">
      <ion-label position="floating">{{'cards.holder_name' | translate}}</ion-label>
      <ion-input ngModel name="holder_name" (ionChange)="holder_checker($event)" [class.ng-invalid]="!holder_check"></ion-input>
    </ion-item>
    <ion-item [class.ng-invalid]="!card_check">
      <ion-label position="floating">{{'cards.card' | translate}}</ion-label>
      <ion-input type="number" ngModel name="card_number" (ionChange)="card_checker($event)" [class.ng-invalid]="!card_check" size="16" placeholder="{{'cards.card_placeholder' | translate}}"></ion-input>
    </ion-item>
    <ion-row>
      <ion-col size="4">
        <ion-item [class.ng-invalid]="!date_check">
          <ion-label position="floating">{{'cards.month' | translate}}</ion-label>
          <ion-input type="number" ngModel name="expiration_month" (ionChange)="month_checker($event)" [class.ng-invalid]="!date_check" size="2" maxlength="2"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size="4">
        <ion-item [class.ng-invalid]="!date_check">
          <ion-label position="floating">{{'cards.year' | translate}}</ion-label>
          <ion-input type="number" ngModel name="expiration_year" (ionChange)="year_checker($event)" [class.ng-invalid]="!date_check" size="2" maxlength="2"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size="4">
        <ion-item [class.ng-invalid]="!cvv_check">
          <ion-label position="floating">CVV</ion-label>
          <ion-input type="password" ngModel name="cvv2" (ionChange)="cvv_checker($event)" [class.ng-invalid]="!cvv_check" size="3" maxlength="4"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>

    <br>
    <ion-button type="submit" expand="full" color="primary">{{'cards.add_2' | translate}}</ion-button>
  </form>
  <br>
  <ion-row class="ion-align-items-center">
    <ion-col size="4">
      <img src="/assets/openpay/openpay_color.png" style="padding:0.25em 0.5em"/>
    </ion-col>
    <ion-col size=8>
      <p>{{'cards.openpay_1' | translate}}</p>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="6">
      <p class="ion-text-center">{{'cards.openpay_2' | translate}}<p>
    </ion-col>
    <ion-col size="6" style="border-left: 1px solid #d0d0d0">
      <p class="ion-text-center">{{'cards.openpay_3' | translate}}<p>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="3">
      <img src="/assets/openpay/visa.png" style="padding:0.1em 1.0em"/>
    </ion-col>
    <ion-col size="3">
      <img src="/assets/openpay/masterCard.png" style="padding:0.25em 1.5em;"/>
    </ion-col>
    <ion-col size="2" style="border-left: 1px solid #d0d0d0">
      <img src="/assets/openpay/citibanamex.png"/>
    </ion-col>
    <ion-col size=2>
      <img src="/assets/openpay/bancoAzteca.png"/>
    </ion-col>
    <ion-col size=2>
      <img src="/assets/openpay/scotiabank.png"/>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="3">
      <img src="/assets/openpay/americanExpress.png" style="padding:0.5em 1.5em"/>
    </ion-col>
    <ion-col size="3">
      <img src="/assets/openpay/carnet.png"/>
    </ion-col>
    <ion-col size="2" style="border-left: 1px solid #d0d0d0">
      <img src="/assets/openpay/inbursa.png"/>
    </ion-col>
    <ion-col size=2>
      <img src="/assets/openpay/santander.png"/>
    </ion-col>
    <ion-col size=2>
      <img src="/assets/openpay/bbva.png"/>
    </ion-col>
  </ion-row>
</ion-content>
