@if(wappingService && (!forceMobile)){
  <wapp-main-title [title]="wappingService.tile3" fxHide.xs></wapp-main-title>
}
@if(wappingService){
<div class="service-detail-center" 
        [ngClass]="{'force-mobile': forceMobile}"
        [fxLayout]="forceMobile ? 'column' : 'row'"
        [fxLayout.xs]="'column'"
        [fxLayout.sm]="'column'">
    <!--service image-->
    <div [ngClass]="{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}" fxLayout="column">
        <!--tile 1-->
        @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){
          <div class="service-image-title">
            <div class="service-view-tile1-no-html" [innerHTML]="wappingService.tile1"></div>
          </div>
        }

        @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){
          <div class="template-service-image-tile service-card-image-title">
            <div class="service-view-tile1" [innerHTML]="wappingService.tile1"></div>
          </div>
        }
        <!--slideshow-->
        <wapp-carousel [isDevModeActive]="isDevModeActive" [forceMobile]="forceMobile" [images]="wappingServiceImages" [isNoImage]="isNoImage" (onSetImageEvent)="setImage()" [onHoverImageTooltip]="onHoverImageTooltip"></wapp-carousel>
        <!--tile 2-->
        @if(wappingService.tile2){
          <div fxFlex fxLayout="row"
              fxLayoutAlign="center center"
              fxLayoutGap="5px"
              [ngClass]="{'template-service-tile': hasHtml(wappingService.tile2),
                  'service-tile' : !hasHtml(wappingService.tile2)}">
              <div class="service-view-tile2" [innerHtml]="wappingService.tile2"></div>
          </div>
        }
        <!--activate toggle-->
        @if(wappingService.allowSelect && allowSelectSendGiftCard && !isDrawService){
          <mat-slide-toggle class="service-select-toggle" color="accent"
                          [disabled]="disabledToggle"
                          [(ngModel)]="wappingService.active"
                          (change)="selectWappingService()">{{ serviceStatus }}</mat-slide-toggle>
        }
        @if(isDrawService){
          <button mat-flat-button 
                  class="service-select-toggle"
                  color="accent"
                  [disabled]="!canParticipateDraw"
                  (click)="triggerParticipate()">
              <span>{{ wappingServicesTranslations?.participate }}</span>
          </button>
        }
        
    </div>
    <!--service info-->
    <div class="service-info-container" [ngClass]="{'service-info-container-padding': forceMobile}" fxLayout="column">
        <div class="service-tile-detail-container" fxLayout="column">
        <!--tile 3-->
        @if(!forceMobile){
          <div 
              [innerHtml]="wappingService.tile3" fxHide fxShow.xs
              class="service-name mat-title">
          </div>
        }
        @if(forceMobile){
          <div 
              [innerHtml]="wappingService.tile3"
              class="service-name mat-title">
          </div>
        }
        <!--tileDetail 1-->
        <div class="service-tile-detail" fxLayout="row">
            <span [innerHtml]="wappingService.tileDetail1"></span>
        </div>
        </div>
        <!--link-->
        @if(wappingService.titleLinkUrl && wappingService.linkUrl){
          <div class="service-link-container">
            <a class="service-link" href="{{wappingService.linkUrl}}" target="_blank">
                <mat-icon class="service-link-icon" svgIcon="share_square"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>
            </a>
          </div>
        }
    </div>
</div>
}