<ion-header [ngClass]="
{
  'home-height': !isTitolo(),
  'subpage-height': isTitolo(),
  'header-home': true, 
  'background-blu': 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="#2b94d1"> 
          <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/icon/2p2-logo-medium.svg">
          </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-toolbar class="menu-toolbar" color="#2b94d1">
      <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">
      <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="consultingService != null && idStrutturaSel == consultingService.id" tappable>
          <div class="div-Consulting background-white" tappable>
            <div tappable class="icon" (click)="selectStruttura('servizi')">
              <img src="assets/img/MenuServizi.png" tappable/>
            </div>
            <div tappable class="section-title title-rossa" (click)="selectStruttura('servizi')">
                {{ 'servizi' | translate }}
            </div>
          </div>
        </ion-row>
        <ion-row class="row-content" 
        *ngIf="consultingService == null || idStrutturaSel != consultingService.id" 
        tappable>
          <div class="div-Consulting background-transparent" tappable>
            <div tappable class="icon" (click)="selectStruttura('servizi')">
              <img src="assets/img/ServiziBianca.svg" tappable/>
            </div>
            <div tappable class="section-title title-bianca" (click)="selectStruttura('servizi')">
                {{ 'servizi' | translate }}
            </div>
          </div>
        </ion-row>

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

        <ion-row class="row-content" *ngIf="mediatoreCreditizio != null && idStrutturaSel == mediatoreCreditizio.id" tappable>
          <div class="div-Consulting background-white" tappable>
            <div tappable class="icon" (click)="selectStruttura('creditizia')">
              <img src="assets/img/MenuCreditizia.png" tappable/>
            </div>
            <div tappable class="section-title title-verde" (click)="selectStruttura('creditizia')">
                {{ 'creditizia' | translate }}
            </div>
          </div>
        </ion-row>
        <ion-row class="row-content" 
        *ngIf="mediatoreCreditizio == null || idStrutturaSel != mediatoreCreditizio.id" 
        tappable>
          <div class="div-Consulting background-transparent" tappable>
            <div tappable class="icon" (click)="selectStruttura('creditizia')">
              <img src="assets/img/CreditiziaBianca.svg" tappable/>
            </div>
            <div tappable class="section-title title-bianca" (click)="selectStruttura('creditizia')">
                {{ 'creditizia' | translate }}
            </div>
          </div>
        </ion-row>
      </div>
    </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">
            <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="consultingService != null && idStrutturaSel == consultingService.id" tappable>
              <div class="div-Consulting background-white" tappable>
                <div tappable class="icon" (click)="selectStruttura('servizi')">
                  <img src="assets/img/MenuServizi.png" tappable/>
                </div>
                <div tappable class="section-title title-rossa" (click)="selectStruttura('servizi')">
                    {{ 'servizi' | translate }}
                </div>
              </div>
            </ion-row>
            <ion-row class="row-content" 
            *ngIf="consultingService == null || idStrutturaSel != consultingService.id" 
            tappable>
              <div class="div-Consulting background-transparent" tappable>
                <div tappable class="icon" (click)="selectStruttura('servizi')">
                  <img src="assets/img/ServiziBianca.svg" tappable/>
                </div>
                <div tappable class="section-title title-bianca" (click)="selectStruttura('servizi')">
                    {{ 'servizi' | translate }}
                </div>
              </div>
            </ion-row>

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

            <ion-row class="row-content" *ngIf="mediatoreCreditizio != null && idStrutturaSel == mediatoreCreditizio.id" tappable>
              <div class="div-Consulting background-white" tappable>
                <div tappable class="icon" (click)="selectStruttura('creditizia')">
                  <img src="assets/img/MenuCreditizia.png" tappable/>
                </div>
                <div tappable class="section-title title-verde" (click)="selectStruttura('creditizia')">
                    {{ 'creditizia' | translate }}
                </div>
              </div>
            </ion-row>
            <ion-row class="row-content" 
            *ngIf="mediatoreCreditizio == null || idStrutturaSel != mediatoreCreditizio.id" 
            tappable>
              <div class="div-Consulting background-transparent" tappable>
                <div tappable class="icon" (click)="selectStruttura('creditizia')">
                  <img src="assets/img/CreditiziaBianca.svg" tappable/>
                </div>
                <div tappable class="section-title title-bianca" (click)="selectStruttura('creditizia')">
                    {{ 'creditizia' | translate }}
                </div>
              </div>
            </ion-row>
          </div>
        </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>

