<ion-header [ngClass]="
{
  'home-height': !isTitolo(),
  'subpage-height': isTitolo(),
  'header-home': true, 
  'background-blu': true,
  'ion-no-border': true
}" no-border *ngIf="!platform.is('desktop')">
  <ion-grid class="header-grid">
    <ion-row justify-content-center>
      <ion-col align-self-center size-lg="7">
        <ion-toolbar class="business-toolbar" color="#232D4B"> 
          <ion-buttons (click)="openSideBar()" slot="start" title="{{'apri_menu' | translate}}">
            <ion-icon name="menu" color="light" class="menu-show" tappable></ion-icon>
          </ion-buttons>
          <ion-title class="logo-piccolo titolo-home" (click)="gotoPreview()">
              <img src="assets/img/LogoBianco.png">
          </ion-title>
          <ion-buttons (click)="logout()" slot="end" title="{{'uscita' | translate}}">
            <ion-icon name="exit" color="light" class="exit" tappable></ion-icon>
          </ion-buttons>
        </ion-toolbar>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="isTitolo()">
      <ion-col align-self-center>
        <ion-title class="titolo-sezione-head-smart">{{titoloPagina}}</ion-title>
      </ion-col>
    </ion-row>
  </ion-grid>
  <!--<ion-grid>
    <ion-row justify-content-center>
      <ion-col align-self-center size-lg="7">
        
      </ion-col>
    </ion-row>
  </ion-grid>-->
</ion-header>

<ion-content id="content" *ngIf="!platform.is('desktop')">
  <ion-tabs>
    <!--<ion-tab-bar slot="top"  class="tabbar">
      <ion-tab-button tab="index"  class="tabbutton">
        <ion-icon name="home"></ion-icon>
        <ion-label>Home</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="parere">
        <ion-icon name="chatbubbles"></ion-icon>
        <ion-label>Richiesta Parere</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="documenti">
        <ion-icon src="../../../assets/icon/documentale.svg"></ion-icon>
        <ion-label>Documenti</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="interviste">
        <ion-icon name="mic"></ion-icon>
        <ion-label>Interviste</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="bi">
        <ion-icon src="../../../assets/icon/graph.svg"></ion-icon>
        <ion-label>BI</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="segreteria">
        <ion-icon src="../../../assets/icon/segreteria.svg"></ion-icon>
        <ion-label>Segreteria</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="change-pwd"> 
        <ion-icon name="refresh-circle"></ion-icon>
        <ion-label>Change Password</ion-label>
      </ion-tab-button>
    </ion-tab-bar>-->

  </ion-tabs>
</ion-content>

<ion-menu side="start" menu-id="mainmenu" content-id="content" class="menu" *ngIf="!platform.is('desktop')">
  <ion-header no-border class="header ion-no-border">
    <ion-toolbar class="menu-toolbar" color="#232D4B">
      <ion-item class="menu-title item-no-border">{{ 'menu_principale' | translate }}</ion-item>
      <ion-buttons (click)="closeSideMenu()" slot="end" title="Chiudi Menu">
        <ion-icon name="close-circle-outline" color="light" class="exit" tappable></ion-icon>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content class="menu-content label-border">
    <ion-item class="item-border-grey" *ngIf="!isClienteLoggato">
      <ion-label>{{ 'azienda_selezionata' | translate }}</ion-label>
      <ion-select value="clienteSel" [(ngModel)]="clienteSel" (ionChange)="cambiaCliente()" interface="popover" [placeholder]="clienteSelezionato ? clienteSelezionato.denominazione : 'Tap to select..'" title="Seleziona un cliente"> 
        <ion-select-option *ngFor="let cliente of clienti; let i=index;" value="{{cliente.id}}">{{cliente.denominazione}}</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item class="item-border-grey label-border">
      <ion-label>{{ 'lingua_selezionata' | translate }}</ion-label>
      <ion-select value="linguaSel" [(ngModel)]="linguaSel" (ionChange)="cambiaLingua()" interface="popover" title="{{ 'seleziona_lingua' | translate }}"> 
        <ion-select-option *ngFor="let lingua of lingue; let i=index;" value="{{lingua.key}}">{{lingua.value}}</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item (click)="apriPagina('change-password')" tappable class="menu-item">{{ 'menu_change' | translate }}</ion-item>
    <div class="menu-buttons">
      <div *ngIf="showMenuButton">
        <ion-row class="row-content" *ngIf="(consulting != null && idStrutturaSel == consulting.id) || strutturaName == 'consulting'" tappable>
          <div class="div-Consulting background-white" tappable>
            <div tappable class="icon" (click)="selectStruttura('consulting')">
              <img src="assets/img/consulting.png" tappable/>
            </div>
            <div tappable class="section-title title-blu" (click)="selectStruttura('consulting')">
                {{ 'consulting' | translate }}
            </div>
          </div>
        </ion-row>
        <ion-row class="row-content" 
        *ngIf="(consulting == null || idStrutturaSel != consulting.id) && strutturaName != 'consulting'" 
            tappable>
          <div class="div-Consulting background-transparent" tappable>
            <div tappable class="icon" (click)="selectStruttura('consulting')">
              <img src="assets/img/consulting.png" tappable/>
            </div>
            <div tappable class="section-title title-bianca" (click)="selectStruttura('consulting')">
                {{ 'consulting' | translate }}
            </div>
          </div>
        </ion-row>

        <ion-row class="row-content" *ngIf="(training != null && idStrutturaSel == training.id) || strutturaName == 'training'" tappable>
          <div class="div-Consulting background-white" tappable>
            <div tappable class="icon" (click)="selectStruttura('training')">
              <img src="assets/img/training.png" tappable/>
            </div>
            <div tappable class="section-title title-blu" (click)="selectStruttura('training')">
                {{ 'training' | translate }}
            </div>
          </div>
        </ion-row>
        <ion-row class="row-content" 
        *ngIf="(training == null || idStrutturaSel != training.id) && strutturaName != 'training'" 
          tappable>
          <div class="div-Consulting background-transparent" tappable>
            <div tappable class="icon" (click)="selectStruttura('training')">
              <img src="assets/img/training.png" tappable/>
            </div>
            <div tappable class="section-title title-bianca" (click)="selectStruttura('training')">
                {{ 'training' | translate }}
            </div>
          </div>
        </ion-row>

        <ion-row class="row-content" *ngIf="(coaching != null && idStrutturaSel == coaching.id) || strutturaName == 'coaching'" tappable>
          <div class="div-Consulting background-white" tappable>
            <div tappable class="icon" (click)="selectStruttura('coaching')">
              <img src="assets/img/coaching2.png" tappable/>
            </div>
            <div tappable class="section-title title-blu" (click)="selectStruttura('coaching')">
                {{ 'coaching' | translate }}
            </div>
          </div>
        </ion-row>
        <ion-row class="row-content" 
        *ngIf="(coaching == null || idStrutturaSel != coaching.id) && strutturaName != 'coaching'" 
            tappable>
          <div class="div-Consulting background-transparent" tappable>
            <div tappable class="icon" (click)="selectStruttura('coaching')">
              <img src="assets/img/coaching2.png" tappable/>
            </div>
            <div tappable class="section-title title-bianca" (click)="selectStruttura('coaching')">
                {{ 'coaching' | translate }}
            </div>
          </div>
        </ion-row>
      </div>
      <ion-row class="row-content" tappable *ngIf="!isClienteLoggato">
        <div class="div-Consulting background-transparent" tappable>
          <div tappable class="icon2" (click)="selectStruttura('segreteria')">
            <img src="assets/img/segreteriaBianco.png" tappable/>
          </div>
          <div tappable class="section-title title-bianca" (click)="selectStruttura('segreteria')">
            {{ 'segreteria' | translate }}
          </div>
        </div>
      </ion-row>
      <ion-row class="row-content" tappable *ngIf="!isClienteLoggato">
        <div class="div-Consulting background-transparent" tappable>
          <div tappable class="icon2" (click)="selectStruttura('notifiche')">
            <img src="assets/img/campanaBianca.png" tappable/>
          </div>
          <div tappable class="section-title title-bianca" (click)="selectStruttura('notifiche')">
            {{ 'notifiche' | translate }}
          </div>
        </div>
      </ion-row>
    </div>
    <!--<ion-list>
      <div>
        <ion-item (click)="apriPagina('home')" tappable class="menu-item">{{ 'main_page' | translate }}</ion-item>
      </div>
      <div>
        <ion-item (click)="apriPagina('documenti')" tappable class="menu-item">{{ 'menu_documenti' | translate }}</ion-item>
      </div>
      <div>
        <ion-item (click)="apriPagina('interviste')" tappable class="menu-item">{{ 'menu_interviste' | translate }}</ion-item>
      </div>
      <div>
        <ion-item (click)="apriPagina('pareri')" tappable class="menu-item">{{ 'menu_pareri' | translate }}</ion-item>
      </div>
      <div>
        <ion-item (click)="apriPagina('segreteria')" tappable class="menu-item">{{ 'menu_segreteria' | translate }}</ion-item>
      </div>
      <div>
        <ion-item (click)="apriPagina('change-password')" tappable class="menu-item">{{ 'menu_change' | translate }}</ion-item>
      </div>
    </ion-list>-->
  </ion-content>
</ion-menu>

<div id="layout" *ngIf="platform.is('desktop')" class="layout">
  <ion-grid>
    <ion-row class="layout-row">
      <ion-col class="menu menu-desktop" size-md="2" size-lg="2" size-xs="2" align-self-center>
        <div class="logo-grande2" (click)="gotoPreview()" tappable>
          <img src="assets/icon/2p2-logo-medium.svg" />
        </div>
        <div class="menu-content label-border">
          <ion-item class="item-border-grey" *ngIf="!isClienteLoggato">
            <ion-label>{{ 'azienda_selezionata' | translate }}</ion-label>
            <ion-select value="clienteSel" [(ngModel)]="clienteSel" (ionChange)="cambiaCliente()" interface="popover" [placeholder]="clienteSelezionato ? clienteSelezionato.denominazione : 'Tap to select..'" title="Seleziona un cliente"> 
              <ion-select-option *ngFor="let cliente of clienti; let i=index;" value="{{cliente.id}}">{{cliente.denominazione}}</ion-select-option>
            </ion-select>
          </ion-item>
          <ion-item class="item-border-grey label-border">
            <ion-label>{{ 'lingua_selezionata' | translate }}</ion-label>
            <ion-select value="linguaSel" [(ngModel)]="linguaSel" (ionChange)="cambiaLingua()" interface="popover" title="{{ 'seleziona_lingua' | translate }}"> 
              <ion-select-option *ngFor="let lingua of lingue; let i=index;" value="{{lingua.key}}">{{lingua.value}}</ion-select-option>
            </ion-select>
          </ion-item>
        </div>
        <div>
          <ion-item (click)="apriPagina('change-password')" tappable class="menu-item">{{ 'menu_change' | translate }}</ion-item>
        </div>
        <div class="menu-buttons">
          <div *ngIf="showMenuButton">
            <ion-row class="row-content" 
              *ngIf="(consulting != null && idStrutturaSel == consulting.id) || strutturaName == 'consulting'" 
              tappable><div class="div-Consulting background-white" tappable>
                <div tappable class="icon" (click)="selectStruttura('consulting')">
                  <img src="assets/img/consulting.png" tappable/>
                </div>
                <div tappable class="section-title title-blu" (click)="selectStruttura('consulting')">
                    {{ 'consulting' | translate }}
                </div>
              </div>
            </ion-row>
            <ion-row class="row-content" 
            *ngIf="(consulting == null || idStrutturaSel != consulting.id) && strutturaName != 'consulting'" 
            tappable>
              <div class="div-Consulting background-transparent" tappable>
                <div tappable class="icon" (click)="selectStruttura('consulting')">
                  <img src="assets/img/consulting.svg" tappable/>
                </div>
                <div tappable class="section-title title-bianca" (click)="selectStruttura('consulting')">
                    {{ 'consulting' | translate }}
                </div>
              </div>
            </ion-row>

            <ion-row class="row-content" 
              *ngIf="(training != null && idStrutturaSel == training.id) || strutturaName == 'training'" 
              tappable><div class="div-Consulting background-white" tappable>
                <div tappable class="icon" (click)="selectStruttura('training')">
                  <img src="assets/img/training.png" tappable/>
                </div>
                <div tappable class="section-title title-blu" (click)="selectStruttura('training')">
                    {{ 'training' | translate }}
                </div>
              </div>
            </ion-row>
            <ion-row class="row-content" 
            *ngIf="(training == null || idStrutturaSel != training.id) && strutturaName != 'training'" 
            tappable>
              <div class="div-Consulting background-transparent" tappable>
                <div tappable class="icon" (click)="selectStruttura('training')">
                  <img src="assets/img/training.svg" tappable/>
                </div>
                <div tappable class="section-title title-bianca" (click)="selectStruttura('training')">
                    {{ 'training' | translate }}
                </div>
              </div>
            </ion-row>

            <ion-row class="row-content" 
            *ngIf="(coaching != null && idStrutturaSel == coaching.id) || strutturaName == 'coaching'" 
            tappable>
              <div class="div-Consulting background-white" tappable>
                <div tappable class="icon" (click)="selectStruttura('coaching')">
                  <img src="assets/img/coaching2.png" tappable/>
                </div>
                <div tappable class="section-title title-blu" (click)="selectStruttura('coaching')">
                    {{ 'coaching' | translate }}
                </div>
              </div>
            </ion-row>
            <ion-row class="row-content" 
            *ngIf="(coaching == null || idStrutturaSel != coaching.id) && strutturaName != 'coaching'" 
            tappable>
              <div class="div-Consulting background-transparent" tappable>
                <div tappable class="icon" (click)="selectStruttura('coaching')">
                  <img src="assets/img/coaching2.svg" tappable/>
                </div>
                <div tappable class="section-title title-bianca" (click)="selectStruttura('coaching')">
                    {{ 'coaching' | translate }}
                </div>
              </div>
            </ion-row>
          </div>
          <ion-row class="row-content" tappable *ngIf="!isClienteLoggato">
            <div class="div-Consulting background-transparent" tappable>
              <div tappable class="icon2" (click)="selectStruttura('notifiche')">
                <img src="assets/img/campanaBianca.png" tappable/>
              </div>
              <div tappable class="section-title2 title-bianca" (click)="selectStruttura('notifiche')">
                {{ 'notifiche' | translate }}
              </div>
            </div>
          </ion-row>
        </div>
        <ion-row>
          <ion-buttons (click)="logout()" title="{{'uscita' | translate}}" class="logout-button">
            <ion-icon name="exit" color="light" class="exit" tappable></ion-icon>
          </ion-buttons>
        </ion-row>
      </ion-col>
      <ion-col class="content-col" size-md="10" size-lg="10" size-xs="10">
        <ion-content id="content">
          <ion-tabs>

          </ion-tabs>
        </ion-content>
      </ion-col>
    </ion-row>
  </ion-grid>
</div>

