<ion-header>
  <ion-toolbar>
    <ion-back-button defaultHref="/app/tabs/home" slot="start"></ion-back-button>
    <ion-title class="ion-text-center">{{ 'tickets.matches' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <app-empty-component *ngIf="matchEvents && !matchEvents.length" [emptySettingsSlide]="emptySettingsSlide">
  </app-empty-component>
  <ion-grid *ngIf="matchEvents && matchEvents.length">
    <ion-row>
      <ion-card *ngFor="let matchEvent of matchEvents">
        <ion-card-header>
          <ion-card-title>{{ matchEvent.season.name }}</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          <ion-grid>
            <ion-row>
              <ion-col col-5>
                <img class="teamLogo" [src]="cityProvider._urlGallery + 'teams/' + homeProvider._teamData.logo"
                  onerror="if (this.src != 'error.jpg') this.src = '../../assets/img/teamEmpty.png';" />
                <ion-label>{{ homeProvider._teamData.name ?? 'Team1' }}</ion-label>
              </ion-col>
              <ion-col col-2 style="max-width: 40px; justify-content: center;">
                <h1>VS</h1>
              </ion-col>
              <ion-col col-5>
                <img class="teamLogo" [src]="cityProvider._urlGallery + 'teams/' + matchEvent.team.logo"
                  onerror="if (this.src != 'error.jpg') this.src = '../../assets/img/teamEmpty.png';" />
                <ion-label>{{ matchEvent.team.name ?? 'Team2' }}</ion-label>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-content>


        

        <div class="btn_buy">
          <h4 *ngIf="matchEvent.stadium_to_play">{{ matchEvent.stadium_to_play }}</h4>
          <h4>{{ matchEvent.date_name }}, {{ matchEvent.event_start }}</h4>

          <div class="ion-margin p-r" style="height:10%; border-top:none;">
            <ion-checkbox color="primary" checked="false" (ionChange)="changeStatusTerms($event)"></ion-checkbox>
            <span class="text_terms">{{ 'TERMS_AND_CONDITIONS_1' | translate }}
              <span (click)="openTermsSI()" class="openTerms">{{ 'TERMS_AND_CONDITIONS_2' | translate }}</span>{{
              'REQUIRED_SYMBOL' | translate }}</span>
          </div>

          <ion-button type="submit" color="primary" shape="round" expand="block" fill="solid" class="ion-margin"
            (click)="buyTickets(matchEvent)" [disabled]="matchEvent.invalidEvent || !statusTerms">
            {{ ticketParams.ticket_button ? ticketParams.ticket_button : 'tickets.buy_tickets' | translate }}
          </ion-button>
          <ion-button type="submit" color="primary" shape="round" expand="block" fill="solid" class="ion-margin"
            (click)="buySubscribers(matchEvent)" [disabled]="matchEvent.invalidEvent || !statusTerms"
            *ngIf="matchEvent.subscriberSales">
            {{ ticketParams.subscriber_button ? ticketParams.subscriber_button : 'tickets.exclusive_subscriptions' |
            translate }}
          </ion-button>
        </div>
        <ion-row class="card-footer" *ngIf="matchEvent.invalidEvent">
          <ion-col>
            <h3 class="card-alert">{{ 'tickets.event_without_prices' | translate }}</h3>
          </ion-col>
        </ion-row>
      </ion-card>
    </ion-row>
  </ion-grid>

</ion-content>