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

<ion-segment (ionChange)="segmentChanged($event)" [value]="type_segment" *ngIf="tickets || symbolicTickets">
  <ion-segment-button value="presencial">
    <ion-label>{{ 'tickets.segment_1' | translate }}</ion-label>
  </ion-segment-button>
  <ion-segment-button value="simbolic">
    <ion-label>{{ 'tickets.segment_2' | translate }}</ion-label>
  </ion-segment-button>
</ion-segment>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <app-skeleton-progress [iscard]="true" *ngIf="type_segment == 'presencial' && !tickets"></app-skeleton-progress>
  <app-empty-component *ngIf="type_segment == 'presencial' && tickets && !tickets.length"
    [emptySettingsSlide]="emptySettingsSlide"></app-empty-component>

  <app-skeleton-progress [iscard]="true" *ngIf="type_segment == 'simbolic' && !symbolicTickets"></app-skeleton-progress>
  <app-empty-component *ngIf="type_segment == 'simbolic' && symbolicTickets && !symbolicTickets.length"
    [emptySettingsSlide]="emptySettingsSlideSimbolic"></app-empty-component>

  <div [ngSwitch]="type_segment">
    <div *ngSwitchCase="'presencial'">
      <div *ngIf="tickets && tickets.length">
        <app-card-ticket *ngFor="let ticket of tickets" [ticket]="ticket" [main_id]="ticket.ticket_main_id"
          [params]="params" [ticketParams]="ticketParams">
        </app-card-ticket>
      </div>
    </div>

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

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