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

<ion-content class="ion-padding">
  <div *ngIf="!creditCardUser.length">
    <img src="../../assets/img/card_add.png" class="cardAdd" />
    <ion-label class="ion-text-center">
      <p class="text1Verify">{{ 'TEXT1_ADD_CARD' | translate }}</p>
      <p>{{ 'TEXT2_ADD_CARD' | translate }}</p>
    </ion-label>
  </div>

  <div *ngIf="creditCardUser.length">
    <ion-list *ngFor="let card of creditCardUser">
      <ion-item-sliding #item>
        <ion-item>
          <img src="../../assets/img/creditCardLogo/{{card.card_type}}.png" slot="start" class="cardLogo" />
          <img src="../../assets/img/verify.png" *ngIf="card.verified" class="cardVerify" />
          <ion-label>
            <h2 (click)="selectDefaultCard(card.id)">{{card.name_cc}}</h2>
            <p (click)="selectDefaultCard(card.id)">{{card.obfuscated_number}}</p>
            <p *ngIf="!card.verified" slot="end" class="textVerify" (click)="verifyCard(card.id)">Verificar</p>
            <ion-icon *ngIf="card.current" name="ios-checkmark-circle-outline" slot="end"></ion-icon>
          </ion-label>
        </ion-item>
        <ion-item-options side="right">
          <button ion-button color="danger" (click)="deleteCreditCard(item,card.id)">
            <ion-icon name="ios-trash-outline" class="iconDelete"></ion-icon>
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  </div>
  <ion-button type="submit" color="primary" shape="round" expand="block" fill="solid" class="marginTop10" (click)="addNewCard()"
    >{{ 'BUTTON_NEW_CARD' | translate }}</ion-button
  >
</ion-content>