<ion-header class="header-home" no-border>
  <ion-grid class="header-grid">
    <ion-row justify-content-center>
      <ion-col align-self-center size-lg="7">
        <ion-toolbar class="header" 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">
              <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-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">
  <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">
        <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-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>

