@if(wappingServiceReady){
<mat-card class="service-card" (click)="isDevModeActive ? setImage() : cardOnClick(wappingService)" [pTooltip]="onHoverImageTooltip" tooltipPosition="top">
  <div class="service-card-header" fxLayout="column" fxLayoutAlign="center center">
    <!-- @if(wappingService.tile1 && wappingService.tile1 != ''){
      <div class="service-card-image-title"
          fxLayout="row" fxLayoutGap="5px">
        tile1
        <div [ngClass]="{'tile-no-html': !hasHtml(wappingService.tile1)}" class="service-card-tile1"
          [innerHtml]="wappingService.tile1"></div>
      </div>
    } -->
    @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){
      <div class="service-image-title">
        <div class="tile-no-html" 
            [innerHtml]="wappingService.tile1"></div>
      </div>
    }
    @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){
      <div class="service-card-image-title service-card-image-title-html">
        <div class="service-card-tile1"
          [innerHtml]="wappingService.tile1"></div>
      </div>
    }
    <div class="service-card-image">
      <img mat-card-image  
        [ngClass]="{'default-image' : isNoImage}" 
        [src]="getImage()">
    </div>
  </div>
  <mat-card-header fxLayout="column">
    <div fxLayout="row" class="card-header">
      <div class="card-header-benefits" fxLayout="row" fxLayoutGap="5px">
        <div class="service-card-tile2" [innerHTML]="wappingService.tile2"></div>
      </div>
      <div fxflex="" style="flex: 1 1 0%; box-sizing: border-box;"></div>
      <!--status-->
      @if(wappingService.allowSelect && allowSelectSendGiftCard){
        <div class="card-header-status-container" fxLayout="row" fxLayoutGap="5px">
          @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>
      }
    </div>
    <!--tile3-->
    @if(wappingService.tile3){
      <div class="card-header-description">
          <div [innerHtml]="wappingService.tile3"></div>
      </div>
    }
  </mat-card-header>
</mat-card>
}