@if (wappingService) {
  <wapp-main-title title="{{wappingService.tile3}}" fxHide.xs></wapp-main-title>
}
@if (wappingService) {
  <div class="service-detail-center"
    fxLayout="row" fxLayout.xs="column" fxLayout.sm="column">
    <!--service image-->
    <div class="service-view" fxLayout="column">
      <!--tile 1-->
      @if (wappingService.tile1) {
        <div class="service-image-title"
          [style.background-color]="wappingService.tile1BackgroundColor"
          [style.color]="wappingService.tile1ForegroundColor"
          fxLayout="row" fxLayoutGap="5px">
          <div>{{wappingService.tile1}}</div>
          @if (wappingService.showTile1Label) {
            <div>{{wappingService.tile1Label}}</div>
          }
        </div>
      }
      <!--slideshow-->
      <wapp-carousel [images]="wappingServiceImages"></wapp-carousel>
      <!--tile 2-->
      @if (wappingService.tile2) {
        <div fxFlex fxLayout="row"
          fxLayoutAlign="center center"
          fxLayoutGap="5px"
          class="service-tile"
          [ngClass]="{'service-tile-border-bottom-radius': !wappingService.tile4}"
          [style.background-color]="wappingService.tile2BackgroundColor"
          [style.color]="wappingService.tile2ForegroundColor"
          >
          <div>{{wappingService.tile2}}</div>
          @if (wappingService.showTile2Label) {
            <div>{{wappingService.tile2Label}}</div>
          }
        </div>
      }
      @if (isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! ) {
        <div class="card-header-status-container sendLabel-container" fxLayout="row" fxLayoutGap="5px">
          <div class="sendLabel"  >
            {{ wappingServicesTranslations.scheduledLabel }}
          </div>
        </div>
      }
      @if (isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent) {
        <div class="card-header-status-container sendLabel-container" fxLayout="row" fxLayoutGap="5px">
          <div class="sendLabel" >
            {{ wappingServicesTranslations.sendLabel }}
          </div>
        </div>
      }
      @if (isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated) {
        <div class="card-header-status-container sendLabel-container" fxLayout="row" fxLayoutGap="5px">
          <div class="sendLabel" >
            {{ wappingServicesTranslations.receivedLabel }}
          </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-->
    @if (wappingService.tile3 || wappingService.tile4) {
      <div class="service-info-container" fxLayout="column">
        <div class="service-description-container">
          <!--tile 3-->
          @if (wappingService.tile3) {
            <div class="service-name mat-title" fxHide fxShow.xs>
              {{wappingService.tile3}}
            </div>
          }
          <!--tile 4-->
          @if (wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated) {
            <div class="service-description" id="serviceDescription">
              {{wappingService.tile4}}
            </div>
          }
          @if (wappingService.enumTypeStatusECardID == ecardStatus.generated) {
            <div class="service-description">
              {{ wappingServicesTranslations.cardGenerated }}
            </div>
          }
          <!--show more-->
          @if (isOverflown()) {
            <div class="service-show-more-container" (click)="openModalShowMoreDescription();">
              <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class="service-show-more-vector" svgIcon="vector_right"></mat-icon>
            </div>
          }
        </div>
        <div class="service-tile-detail-container" fxLayout="column">
          <!--tileDetail 1-->
          @if (wappingService.tileDetail1) {
            <div class="service-tile-detail" fxLayout="row">
              <mat-icon class="service-tile-detail-icon" svgIcon="calendar"></mat-icon>
              <span>{{wappingService.tileDetail1}}</span>
            </div>
          }
          <!--tileDetail 2-->
          @if (wappingService.tileDetail2) {
            <div class="service-tile-detail" fxLayout="row">
              <mat-icon class="service-tile-detail-icon" svgIcon="tickets"></mat-icon>
              <span>{{wappingService.tileDetail2}}</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>
}