<ion-content>
  <ion-header class="ion-no-border">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button class="backButton" defaultHref="/app/tabs/settings/tickets-list" color="primary">
        </ion-back-button>
      </ion-buttons>
      <ion-buttons *ngIf="ticketParams.qrcode_type != 'static'" slot="end" class="margin-13">
        <circle-progress [percent]="timerPercent" [radius]="17" [animation]="true" [showUnits]="false"
          [showSubtitle]="false" [showTitle]="false" [animationDuration]="ticketParams.qrcode_time * 1000"
          [outerStrokeColor]="'var(--ion-color-primary)'">
        </circle-progress>
      </ion-buttons>
      <ion-buttons *ngIf="ticketParams.enable_download_button !== 'false' && ticketParams.qrcode_type == 'static'"
        slot="end" class="margin-13">
        <ion-button fill="solid" color="secondary" (click)="downloadTicket()">
          <ion-icon slot="start" name="cloud-download-outline"></ion-icon>
          {{ 'download' | translate }}
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <div id="print-wrapper">
    <div *ngIf="params" class="container-ticket" [ngStyle]="{'width': calculateWidth(90)+'px'}">
      <img height="604" [width]="calculateWidth(90)" [src]="data_ticket.url_ticket_backgroung" class="image-background"
        onerror="if (this.src != 'error.jpg') this.src = '../../assets/img/bg.png';" crossorigin="anonymous">
      <p class="fontOrganettoUltraBold text10 fz-10">{{ ('username_on_ticket' | translate) | uppercase }}:
        <span class="fontOrganettoRegular">
          {{ data_ticket.user }}</span> - ID: <span class="fontOrganettoRegular">{{ data_ticket.document }}</span>
      </p>
      <div class="header-images">
        <img *ngIf="data_ticket.url_organizer" [src]="data_ticket.url_organizer" class="single-header-image"
          crossorigin="anonymous">
        <img [src]="data_ticket.url_team_main" class="single-header-image" crossorigin="anonymous">
        <img [src]="data_ticket.url_tournament" class="single-header-image" crossorigin="anonymous">
      </div>
      <p class="fontOrganettoUltraBold text1 fz-11">{{ data_ticket.tournament | uppercase }}</p>
      <p class="fontOrganettoLight text2 fz-11">{{ data_ticket.date_name | uppercase }}</p>
      <div class="text9" *ngIf="data_ticket.stadium_to_play">
        <p class="fontOrganettoRegular fz-11">{{ ('stadium_to_play' | translate) | uppercase }}: <span
            class="fontOrganettoUltraBold subt6">{{ data_ticket.stadium_to_play }}</span></p>
      </div>
      <p class="fontOrganettoRegular text3 fz-11">{{ ('date_event' | translate) | uppercase }}: <span
          class="fontOrganettoUltraBold subt6">{{ data_ticket.date_event }}</span></p>
      <p class="fontOrganettoBold text4 fz-30">{{ data_ticket.abbr_local | uppercase }} <span
          class="fontOrganettoRegular fz-21">VS.</span> {{ data_ticket.abbr_visit | uppercase }}</p>
      <div class="text5" *ngIf="!params.hideDataSeat">
        <p class="fontOrganettoRegular fz-10">HORA:</p>
        <p class="fontOrganettoRegular fz-10">TRIBUNA:</p>
        <p class="fontOrganettoRegular fz-10">SECTOR:</p>
        <p class="fontOrganettoRegular fz-10">FILA:</p>
        <p class="fontOrganettoRegular fz-10">SILLA</p>
      </div>
      <div class="text6" *ngIf="!params.hideDataSeat">
        <p class="fontOrganettoUltraBold subt1 fz-12">{{ data_ticket.time | uppercase }}</p>
        <p class="fontOrganettoUltraBold subt2 fz-12">{{ data_ticket.tribune | uppercase }}</p>
        <p class="fontOrganettoUltraBold subt3" [class]="classTicketZone">{{ data_ticket.ticketZone | uppercase }}</p>
        <p class="fontOrganettoUltraBold subt4 fz-12 flexBasicOnly">{{ data_ticket.ticketRow | uppercase }}</p>
        <p class="fontOrganettoUltraBold subt5 fz-12 flexBasicOnly">{{ data_ticket.ticketSeat | uppercase }}</p>
      </div>
      <div class="text6-Optional" *ngIf="!params.hideDataSeat && data_ticket.specialTicket !='null'">
        <p class="fontOrganettoUltraBold subt2-optional fz-25">{{ data_ticket.specialTicket | uppercase }}</p>
      </div>
      <div class="text6-flash-title" *ngIf="params.hideDataSeat">
        <p class="fontOrganettoRegular subt1 fz-10-flash">HORA:</p>
        <p class="fontOrganettoRegular subt1 fz-10-flash">TRIBUNA</p>
      </div>
      <div class="text6" *ngIf="params.hideDataSeat">
        <p class="fontOrganettoUltraBold subt1 fz-12-flash">{{ data_ticket.time | uppercase }}</p>
        <p class="fontOrganettoUltraBold subt2 fz-12-flash">{{ data_ticket.tribune | uppercase }}</p>
      </div>
      <div class="text6-Optional" *ngIf="params.hideDataSeat && data_ticket.specialTicket !='null'">
        <p class="fontOrganettoUltraBold subt2-optional fz-25-flash">{{ data_ticket.specialTicket | uppercase }}</p>
      </div>

      <qrcode *ngIf="data_ticket" [qrdata]="data_ticket.code_ticket" [width]="200" class="image-qr"
        [errorCorrectionLevel]="'M'" [margin]="0" [allowEmptyString]="true"
        [style.transform]="'rotate(' + qrRotationAngle + 'deg)'">
      </qrcode>

      <p class="fontOrganettoUltraBold text7 fz-10" *ngIf="ticketParams.qrcode_type == 'static'">
        {{ 'COD' | uppercase
        }}: <span class="fontOrganettoRegular">{{data_ticket.code_ticket }}</span>
      </p>
      <p class="fontOrganettoUltraBold text8 fz-14">{{ ('value' | translate) | uppercase }}: <span
          class="fontOrganettoRegular">{{ data_ticket.price }}</span></p>

      <img height="20" [width]="calculateWidth(85)" [src]="data_ticket.url_ticket_sponsor" class="image_sponsor"
        crossorigin="anonymous">

      <p class="fontOrganettoRegular cufe fz-3" *ngIf="data_ticket.cufe">
        {{ ('cufe' | translate) | uppercase }}: {{ data_ticket.cufe }}
      </p>
    </div>
  </div>
  <div class="content-btn-download">
    <ion-card *ngIf="ticketParams.qrcode_type == 'static'">
      <ion-card-header>
        <ion-card-subtitle class="fz-18">{{ data_ticket.code_ticket | uppercase }}</ion-card-subtitle>
      </ion-card-header>
    </ion-card>

    <ion-card (click)="toggleDetails()" *ngIf="ticketParams.enable_tyc !=='false'">
      <ion-card-header>
        <ion-card-subtitle>{{ 'terms_and_conditions_tickets' | translate }}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content *ngIf="showDetails && !ticketParams.terms" [innerHTML]="txtTerms"></ion-card-content>
    </ion-card>

    <ion-card (click)="toggleInvoice(data_ticket.invoice_link)" *ngIf="data_ticket.invoice_link">
      <ion-card-header>
        <ion-card-subtitle>{{ 'tickets.show_electronic_invoice' | translate }}</ion-card-subtitle>
      </ion-card-header>
    </ion-card>
  </div>
</ion-content>