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

<ion-content>
  <app-skeleton-progress [iscard]="true" *ngIf="!userCards"></app-skeleton-progress>
  <app-empty-component *ngIf="userCards && !userCards.length" [emptySettingsSlide]="emptySettingsSlide">
  </app-empty-component>

  <div *ngIf="userCards && userCards.length">
    <ion-card *ngFor="let item of userCards" class="h-214">
      <canvas #barCanvas id="canvasid_{{item.identification}}" class="imageCard" crossorigin="anonymous"></canvas>
      <ion-fab class="fab_button">
        <ion-fab-button color="light" (click)="optionImage('canvasid_' + item.identification,'share')">
          <ion-icon ios="share-outline" md="share-social-outline"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-card>
  </div>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)" *ngIf="userCards">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="{{ 'all.loading' | translate }}">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>