@if (wappingServiceReady) {
  <mat-card class="service-card" (click)="cardOnClick(wappingService)">
    <div fxLayout="column" fxLayoutAlign="center center">
      @if (wappingService.tile1) {
        <div class="service-card-image-title"
          [style.background-color]="wappingService.tile1BackgroundColor"
          [style.color]="wappingService.tile1ForegroundColor"
          fxLayout="row" fxLayoutGap="5px">
          <!--tile1-->
          <div>{{wappingService.tile1}}</div>
          @if (wappingService.showTile1Label) {
            <div>{{wappingService.tile1Label}}</div>
          }
        </div>
      }
      <div class="service-card-image">
        <img mat-card-image [src]="wappingService.imageUrl">
      </div>
    </div>
    <mat-card-header fxLayout="column">
      <div fxLayout="row">
        <!--tile2-->
        <div class="card-header-benefits" fxLayout="row" fxLayoutGap="5px">
          <div>{{wappingService.tile2}}</div>
          @if (wappingService.showTile2Label) {
            <div>{{wappingService.tile2Label}}</div>
          }
        </div>
        <div fxFlex></div>
        <!--status-->
        @if (wappingService.allowSelect && allowSelectSendGiftCard) {
          <div class="card-header-status-container" fxLayout="row" fxLayoutGap="5px">
            @if (!wappingService.allowSelect && wappingService.type != 6) {
              <div class="card-header-status">
                <mat-icon class="card-header-status-icon" svgIcon="activated"></mat-icon>
                <div class="status">{{ wappingTranslations.activedService }}</div>
              </div>
            }
            @if (wappingService.active) {
              <div class="card-header-status">
                <mat-icon class="card-header-status-icon" svgIcon="activated"></mat-icon>
                <span class="status">{{ wappingTranslations.activedService }}</span>
              </div>
            }
            @if (!wappingService.active) {
              <div class="card-header-status">
                <mat-icon class="card-header-status-icon" svgIcon="deactivated"></mat-icon>
                <span class="status">{{ wappingTranslations.disabledService }}</span>
              </div>
            }
          </div>
        }
        @if (!allowSelectSendGiftCard) {
          <div class="card-header-status-container" fxLayout="row" fxLayoutGap="5px">
            @if (wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) {
              <div class="card-header-status">
                <div class="sendLabel"  >
                  {{ wappingTranslations.scheduledLabel }}
                </div>
              </div>
            }
            @if (wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) {
              <div class="card-header-status">
                <div class="sendLabel" >
                  {{ wappingTranslations.sendLabel }}
                </div>
              </div>
            }
          </div>
        }
      </div>
      <!--tile3-->
      <div class="card-header-description">
        {{wappingService.tile3}}
      </div>
      <!--tile4-->
      @if (wappingService.enumTypeStatusECardID != ecardStatus.generated) {
        <div class="card-header-detail">
          {{wappingService.tile4}}
        </div>
      }
      @if (wappingService.enumTypeStatusECardID == ecardStatus.generated) {
        <div class="card-header-detail">
          {{ wappingTranslations.cardGenerated }}
        </div>
      }
    </mat-card-header>
  </mat-card>
}