<ion-content class="nothing" *ngIf="!platform.is('desktop')">
  <!--<div class="contenitore-home">
    <div class="central-home">
        <div tappable class="box tre-box">
          <div tappable class="icon" (click)="apriPagina('documenti')">
            <img src="assets/img/consulto-documenti.svg" (click)="apriPagina('documenti')" tappable/>
          </div>
          <div tappable class="section-title" (click)="apriPagina('documenti')">
              {{ 'documenti' | translate }}
          </div>
        </div>
        <div class="dispari box" tappable>
          <div class="icon" tappable>
            <img src="assets/img/chiedo-parere.svg" (click)="apriPagina('pareri')" tappable/>
          </div>
          <div class="section-title" (click)="apriPagina('pareri')" tappable>
              {{ 'pareri' | translate }}
          </div>
        </div>
        <div class="box" tappable>
          <div class="icon" tappable>
            <img src="assets/img/domande-risposte.svg" (click)="apriPagina('interviste')" tappable/>
          </div>
          <div class="section-title" (click)="apriPagina('interviste')" tappable>
              {{ 'interviste' | translate }}
          </div>
        </div>
        <div class="dispari box un-box" tappable>
          <div class="icon" tappable>
            <img src="assets/img/segreteria.svg" (click)="apriPagina('segreteria')" tappable/>
          </div>
          <div class="section-title" (click)="apriPagina('segreteria')" tappable>
              {{ 'segreteria' | translate }}
          </div>
        </div>
        <!--
          <div class="box" tappable>
            <div class="icon" tappable>
              <img src="../../../assets/img/leggo-news.svg" (click)="apriPagina('news')" tappable/>
            </div>
            <div class="section-title" (click)="apriPagina('news')" tappable>
              Novità
            </div>
          </div>
          
          <div class="box" tappable>
            <div class="icon" tappable>
              <img src="assets/img/verifico-reports.svg" (click)="apriPagina('bi')" tappable/>
            </div>
            <div class="section-title" (click)="apriPagina('bi')" tappable>
              I miei risultati
            </div>
          </div>-->
    <!--</div>
  </div>-->
  <div class="content-index-smart">
    <div 
      [ngClass]="{'struttura-servizio-smart': isServizioSelected(),
      'struttura-immobiliare-smart': isImmobiliareSelected(),
      'struttura-creditizia-smart': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/documentiRosso.png" (click)="apriPagina('documenti')" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/documentiGiallo.png" (click)="apriPagina('documenti')" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/documentiVerde.png" (click)="apriPagina('documenti')" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title" (click)="apriPagina('documenti')">
          {{ 'documenti' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio-smart': isServizioSelected(),
      'struttura-immobiliare-smart': isImmobiliareSelected(),
      'struttura-creditizia-smart': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/segreteriaRosso.png" (click)="apriPagina('segreteria')" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/segreteriaGiallo.png" (click)="apriPagina('segreteria')" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/segreteriaVerde.png" (click)="apriPagina('segreteria')" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title" (click)="apriPagina('segreteria')">
          {{ 'segreteria' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio-smart': isServizioSelected(),
      'struttura-immobiliare-smart': isImmobiliareSelected(),
      'struttura-creditizia-smart': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/notificheRosso.png" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/notificheGiallo.png" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/notificheVerde.png" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title">
          {{ 'notifiche' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio-smart': isServizioSelected(),
      'struttura-immobiliare-smart': isImmobiliareSelected(),
      'struttura-creditizia-smart': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/businessRosso.png" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/businessGiallo.png" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/businessVerde.png" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title">
          {{ 'business' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio-smart': isServizioSelected(),
      'struttura-immobiliare-smart': isImmobiliareSelected(),
      'struttura-creditizia-smart': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/parereRosso.png" (click)="apriPagina('pareri')" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/parereGiallo.png" (click)="apriPagina('pareri')" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/parereVerde.png" (click)="apriPagina('pareri')" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title" (click)="apriPagina('pareri')">
          {{ 'pareri' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio-smart': isServizioSelected(),
      'struttura-immobiliare-smart': isImmobiliareSelected(),
      'struttura-creditizia-smart': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/domandeRosso.png" (click)="apriPagina('interviste')" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/domandeGiallo.png" (click)="apriPagina('interviste')" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/domandeVerde.png" (click)="apriPagina('interviste')" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title" (click)="apriPagina('interviste')">
          {{ 'interviste' | translate }}
      </div>
    </div>
  </div>
</ion-content>

<ion-content *ngIf="platform.is('desktop')">
  <div class="preview-title">
    <ion-title *ngIf="isServizioSelected()">{{ 'servizi' | translate }}</ion-title>
    <ion-title *ngIf="isImmobiliareSelected()">{{ 'immobiliare' | translate }}</ion-title>
    <ion-title *ngIf="isCreditiziaSelected()">{{ 'creditizia' | translate }}</ion-title>
  </div>
  <div class="content-index">
    <div 
      [ngClass]="{'struttura-servizio': isServizioSelected(),
      'struttura-immobiliare': isImmobiliareSelected(),
      'struttura-creditizia': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/documentiRosso.png" (click)="apriPagina('documenti')" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/documentiGiallo.png" (click)="apriPagina('documenti')" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/documentiVerde.png" (click)="apriPagina('documenti')" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title" (click)="apriPagina('documenti')">
          {{ 'documenti' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio': isServizioSelected(),
      'struttura-immobiliare': isImmobiliareSelected(),
      'struttura-creditizia': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/segreteriaRosso.png" (click)="apriPagina('segreteria')" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/segreteriaGiallo.png" (click)="apriPagina('segreteria')" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/segreteriaVerde.png" (click)="apriPagina('segreteria')" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title" (click)="apriPagina('segreteria')">
          {{ 'segreteria' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio': isServizioSelected(),
      'struttura-immobiliare': isImmobiliareSelected(),
      'struttura-creditizia': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/notificheRosso.png" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/notificheGiallo.png" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/notificheVerde.png" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title">
          {{ 'notifiche' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio': isServizioSelected(),
      'struttura-immobiliare': isImmobiliareSelected(),
      'struttura-creditizia': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/businessRosso.png" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/businessGiallo.png" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/businessVerde.png" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title">
          {{ 'business' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio': isServizioSelected(),
      'struttura-immobiliare': isImmobiliareSelected(),
      'struttura-creditizia': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/parereRosso.png" (click)="apriPagina('pareri')" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/parereGiallo.png" (click)="apriPagina('pareri')" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/parereVerde.png" (click)="apriPagina('pareri')" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title" (click)="apriPagina('pareri')">
          {{ 'pareri' | translate }}
      </div>
    </div>
    <div 
      [ngClass]="{'struttura-servizio': isServizioSelected(),
      'struttura-immobiliare': isImmobiliareSelected(),
      'struttura-creditizia': isCreditiziaSelected() }" class="struttura-sel" tappable *ngIf="consultingService != null">
      <div tappable class="icon">
        <img src="assets/img/domandeRosso.png" (click)="apriPagina('interviste')" tappable *ngIf="isServizioSelected()"/>
        <img src="assets/img/domandeGiallo.png" (click)="apriPagina('interviste')" tappable *ngIf="isImmobiliareSelected()"/>
        <img src="assets/img/domandeVerde.png" (click)="apriPagina('interviste')" tappable *ngIf="isCreditiziaSelected()"/>
      </div>
      <div tappable class="section-title" (click)="apriPagina('interviste')">
          {{ 'interviste' | translate }}
      </div>
    </div>
  </div>
</ion-content>
