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

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

  <div [ngSwitch]="wallet" *ngIf="coupons && coupons.length">
    <div *ngSwitchCase="'coupons'">
      <ng-container *ngFor="let item of coupons">
        <ion-card *ngIf="validateCoupon(item)" class="h-214">
          <img src="{{cityProvider._urlGallery}}coupons/{{item.coupon_image}}" class="image_wallet" alt="ballot" />
          <div class="promotionalText">
            <ion-label class="promotionalText" [innerHTML]="item.message">
            </ion-label>
          </div>
          <div class="couponSection">
            <ion-item lines="none" class="couponItem">
              <div class="couponContainer">
                <ion-label class="couponLabel">{{ 'COUPON_CODE' | translate }}: {{ item.code_coupon }}</ion-label>
                <ion-button fill="clear" size="small" (click)="getCouponCode(item.code_coupon)" class="copyButton">
                  <ion-icon name="copy-outline"></ion-icon>
                </ion-button>
              </div>
            </ion-item>
          </div>
          <div class="contentTerms" *ngIf="item.link && item.link != ''">
            <span class="terms">
              <span (click)="openTermsSI(item.link)" class="openTerms">{{ 'TERMS_AND_CONDITIONS_2' | translate }}</span>
            </span>
          </div>
          <hr class="lineSeparator">
          <div *ngIf="item.link_redeem" class="redeemButton">
            <ion-button (click)="openLinkRedeem(item.link_redeem)" color="primary" fill="solid" size="small" class="ion-text-end">
              {{ 'REDEEM_COUPON' | translate }}
            </ion-button>
          </div>
        </ion-card>
      </ng-container>
    </div>
  </div>

</ion-content>