<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{'cards.header' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <ion-card *ngFor="let card of cards">
    <ion-item>
      <ion-label>
        <h2 class="ion-text-capitalize">{{ card.brand }}</h2>
        <p>{{card.card_number}}</p>
      </ion-label>
      <ion-button color="danger" (click)="deletecard(card.id)">
        <ion-icon name="trash"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-card>
  <ion-button type="submit" expand="full" color="primary" (click)="newcard()">{{'cards.add' | translate}}</ion-button>
</ion-content>
