<!--<ion-header class="header" no-border *ngIf="!platform.is('desktop')">
  <ion-grid class="header-subpage">
    <ion-row justify-content-center>
      <ion-col align-self-center size-lg="7">
        <ion-toolbar color="#2b94d1">
          <ion-buttons slot="start" title="{{'uscita' | translate}}" style="visibility: hidden;">
            <ion-icon name="share" color="light" class="exit" tappable></ion-icon>
          </ion-buttons>
          <ion-title class="titolo-sezione-head">{{ 'segreteria_titolo' | translate }}</ion-title>
          <ion-buttons (click)="condividiFatture()" slot="end" title="{{'uscita' | translate}}" id="buttons" style="visibility: hidden;">
            <ion-icon name="share" color="light" class="exit" tappable></ion-icon>
          </ion-buttons>
        </ion-toolbar>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-header>-->

<ion-content overflow-scroll="true" *ngIf="!platform.is('desktop')">
  <!--<div class="contenitore-home">
    <div class="central-doc">
      <div padding>
        <ion-segment [(ngModel)]="segreteria">
          <ion-segment-button value="preventivi" (click)="redirectTo2p2()"> 
            Preventivi e Pagamenti
          </ion-segment-button>
          <ion-segment-button value="fatture">
            Fatture e Progetti
          </ion-segment-button>
          <ion-segment-button value="estratto">
            Estratto conto
          </ion-segment-button>
          <ion-segment-button value="solleciti">
            Solleciti 
          </ion-segment-button>
        </ion-segment>
        
      </div>--> 
      <div [ngSwitch]="segreteria" ngDefaultControl>

        <!--<ion-row class="selection item-no-border" no-margin>
          <ion-label>{{ 'seleziona_struttura' | translate }}</ion-label>
          <ion-select value="clienteSel" [(ngModel)]="idStrutturaSel" (ionChange)="cambiaStruttura()" no-scroll title="{{ 'seleziona_struttura' | translate }}">
            <ion-icon name="arrow-forward"></ion-icon>
            <ion-select-option *ngFor="let struttura of strutture;" value="{{struttura.id}}">{{struttura.denominazione}}</ion-select-option> 
          </ion-select>
        </ion-row>
        <ion-text class="selection-done margin-top" style="padding-left: 5px;">
          {{ 'struttura_sel' | translate }} </ion-text>
        <div class="clr"></div>
        <p class="grigio selection-done" style="padding-left: 5px;"><strong>{{strutturaSel.denominazione}}</strong>
        </p> -->

        <ion-list *ngSwitchCase="'fatture'" ngDefaultControl>
          <!--<ion-grid>
            <ion-row class="search-date">
              <div class="riga">
                <ion-checkbox name="privacy" [(ngModel)]="visualizzaProgetti" class="check2"> </ion-checkbox>
                <ion-label>{{ 'visualizza_progetti' | translate }}</ion-label>
              </div>                
            </ion-row>
            <ion-row class="search-date">
              <div *ngIf="platform.is('desktop')" class="search-date grigio">
                <span class="riga"><strong>{{ 'cerca' | translate }}</strong> {{ 'da' | translate }} <input type="date" name="calendar" [(ngModel)]="date1" title="{{ 'seleziona_data' | translate }}" class="grigio"> {{ 'a' | translate }} <input type="date" name="calendar" [(ngModel)]="date2" title="{{ 'seleziona_data' | translate }}" class="grigio">
                <ion-button (click)="resetDate()" class="search-arrow-red" title="{{ 'reset_documenti' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="close" title="{{ 'cerca_documenti' | translate }}"></ion-icon></ion-button></span>
              </div>
              <ion-row *ngIf="!platform.is('desktop')" class=" search-date grigio">
                <span class="riga">
                  <span class="float-date">
                    <span class="date-text"><strong>{{ 'cerca' | translate }}</strong> {{ 'da' | translate }} </span>
                    <ion-icon class="element-date date-icon" name="calendar" (click)="setDateDa()"></ion-icon>
                    <div class="element-date item-no-border date-text">
                      {{date1}}
                    </div> 
                    <span class="date-text">{{ 'a' | translate }}</span>
                    <ion-icon floating class="element-date date-icon" name="calendar" (click)="setDateA()"></ion-icon> 
                    <div floating class="element-date item-no-border date-text">
                      {{date2}}
                    </div>
                  </span>
                  <ion-button (click)="resetDate()" class="search-arrow-red search-arrow-dev" title="{{ 'reset_documenti' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="close" title="{{ 'cerca_documenti' | translate }}"></ion-icon></ion-button></span>
              </ion-row>
            </ion-row>
            <ion-row class="search-date">
              <div class="riga">
                <input *ngIf="visualizzaProgetti" placeholder="{{ 'cerca_progetto' | translate }}" type="text" name="calendar" [(ngModel)]="nProgNotula" title="{{ 'cerca_progetto' | translate }}" class="cerca-notula">
                <input *ngIf="!visualizzaProgetti" placeholder="{{ 'cerca_notula' | translate }}" type="text" name="calendar" [(ngModel)]="nNotula" title="{{ 'cerca_notula' | translate }}" class="cerca-notula">
                <ion-button (click)="cercaFatture()" class="search-arrow" title="{{ 'cerca' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward" title="{{ 'cerca' | translate }}"></ion-icon></ion-button>
              </div>
            </ion-row>-->
            <!--<ion-row class="search-date" id="buttons" style="display:none"> 
                <div><span class="condividi-text">{{ 'condividi' | translate }}</span>
                <ion-button (click)="condividiFatture()" class="search-arrow" title="{{ 'condividi_fatture' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="share" title="{{ 'condividi_fatture' | translate }}"></ion-icon></ion-button></div>
            </ion-row>-->
            <!--<ion-row class="search-date-border">
            </ion-row>-->
            <ion-row>
              <div class="search-date-smart">
                <ion-row>
                  <span class="riga">
                    <ion-checkbox name="privacy" [(ngModel)]="visualizzaProgetti" class="check2"> </ion-checkbox>
                    <ion-label>{{ 'visualizza_progetti' | translate }}</ion-label>
                  </span>
                </ion-row>
              </div>                
            </ion-row>
            <ion-row>
              <div class="search-date-smart">
                <ion-row>
                  <span class="riga">
                    <span class="float-date">
                      <span class="date-text"><strong>{{ 'cerca' | translate }}</strong> {{ 'da' | translate }} </span>
                      <ion-icon class="element-date date-icon" name="calendar" (click)="setDateDa()"></ion-icon>
                      <div class="element-date item-no-border date-text">
                        {{date1}}
                      </div> 
                      <span class="date-text">{{ 'a' | translate }}</span>
                      <ion-icon floating class="element-date date-icon" name="calendar" (click)="setDateA()"></ion-icon>
                      <div floating class="element-date item-no-border date-text">
                        {{date2}}
                      </div>
                    </span>
                    <ion-button (click)="resetDate()" class="search-arrow-red-desktop" title="{{ 'reset_documenti' | translate }}">
                      <ion-icon class="button-icon" slot="icon-only" name="close" title="{{ 'cerca_documenti' | translate }}"></ion-icon>
                    </ion-button>
                  </span>
                  <ion-button (click)="cercaFatture()" class="search-arrow" title="{{ 'cerca' | translate }}">
                    <ion-icon class="button-icon-documenti-smart ios-icon" slot="icon-only" name="chevron-forward-circle-outline" title="{{ 'cerca_documenti' | translate }}"></ion-icon>
                  </ion-button>
                </ion-row>
              </div>
            </ion-row>
            <!--<ion-row>
              <div class="search-date-smart">
                <ion-row>
                  <span class="riga"><strong>{{ 'cerca' | translate }}</strong> {{ 'titolo' | translate }} <input type="text" name="calendar" [(ngModel)]="titolo" title="{{ 'ricerca_titolo' | translate }}" class="cerca-titolo-doc">
                  </span>
                  <ion-button (click)="cercaFatture()" class="search-arrow" title="{{ 'cerca' | translate }}">
                    <ion-icon class="button-icon-documenti-smart ios-icon" slot="icon-only" name="chevron-forward-circle-outline" title="{{ 'cerca_documenti' | translate }}"></ion-icon>
                  </ion-button>
                </ion-row>
              </div>
            </ion-row>-->
            <ion-row>
              <div class="search-date-smart">
                <ion-row>
                  <span class="riga">
                    <input *ngIf="visualizzaProgetti" placeholder="{{ 'cerca_progetto' | translate }}" type="text" name="calendar" [(ngModel)]="nProgNotula" title="{{ 'cerca_progetto' | translate }}" class="cerca-notula">
                    <input *ngIf="!visualizzaProgetti" placeholder="{{ 'cerca_notula' | translate }}" type="text" name="calendar" [(ngModel)]="nNotula" title="{{ 'cerca_notula' | translate }}" class="cerca-notula">
                  </span>
                  <ion-button (click)="cercaFatture()" class="search-arrow" title="{{ 'cerca' | translate }}">
                    <ion-icon class="button-icon-documenti-smart ios-icon" slot="icon-only" name="chevron-forward-circle-outline" title="{{ 'cerca' | translate }}"></ion-icon>
                  </ion-button>
                </ion-row>
              </div>
            </ion-row>
            <ion-row id="buttons" style="display: none;">
              <div class="search-date-smart">
                <ion-row>
                  <span class="riga">
                    <ion-label>{{ 'condividi_fatture' | translate }}</ion-label>
                  </span>
                  <ion-button (click)="condividiFatture()" class="search-arrow" title="{{'condividi_fatture' | translate}}">
                    <ion-icon class="button-icon-documenti-smart share-button" name="share" title="{{'condividi_fatture' | translate}}" tappable></ion-icon>
                  </ion-button>
                </ion-row>
              </div>
              <!--<ion-buttons (click)="condividiFatture()" title="{{'condividi_fatture' | translate}}">
                <ion-icon name="share" class="button-icon-documenti-smart share-button" tappable></ion-icon>
              </ion-buttons>-->
            </ion-row>
            
            <ion-row class="search-date-border-smart">
            </ion-row>
            <span>
              <ion-list *ngFor="let fattura of fatture; trackBy: trackByDoc" class="list-smart" (click)="selection?toggleGroup(fattura.id):selectItem(fattura.id)"
              (press)="selectItem(fattura.id)" [ngStyle]="{'background-color': fattura.checked ? '#c3ddec' : '#ffffff'}">
                <div class="row-results-smart" *ngIf="(!visualizzaProgetti && fattura.nrNotula != null) || visualizzaProgetti">
                <ion-checkbox name="privacy" [(ngModel)]="fattura.checked" class="check" (click)="checkSelected(fattura.id)" *ngIf="(!visualizzaProgetti && fattura.nrNotula != null) || visualizzaProgetti"> </ion-checkbox>
                 
                <div class="table-row" *ngIf="(!visualizzaProgetti && fattura.nrNotula != null) || visualizzaProgetti">
                  <!--<div class="row-download-special">
                    <div class="group-icon" *ngIf="visualizzaProgetti">
                      <ion-icon name="eye" (click)="getNotula(fattura.id, fattura.nrProgNotula, true);" target="_blank" download tappable></ion-icon>
                    </div>
                    <div class="group-icon">
                     <ion-icon name="eye" *ngIf="!platform.is('desktop') && fattura.nrNotula != null" (click)="getNotula(fattura.id, fattura.nrNotula, false);" target="_blank" download tappable></ion-icon>
                    </div>
                  </div>-->
                   <div class="row-text" *ngIf="visualizzaProgetti">
                    {{ 'text_progetto' | translate }} {{fattura.nrProgNotula}}
                    <div class="detail">
                      <!--{{ 'text_data_progetto_notula' | translate }}--> {{fattura.dataProgNotula}}
                    </div>
                    <!--<div *ngIf="!platform.is('desktop')" class="detail detail-margin">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>
                    <div *ngIf="platform.is('desktop')" class="detail">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>-->
                  </div>
                  <div class="row-download item-no-border" *ngIf="visualizzaProgetti">
                    <ion-icon name="eye" (click)="getNotula(fattura.id, fattura.nrProgNotula, true);" target="_blank" download tappable title="{{ 'vedi_progettonotula' | translate }}"></ion-icon>
                  </div>
                  <div class="row-text" *ngIf="!visualizzaProgetti && fattura.nrNotula != null">
                    {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    <div class="detail">
                      <!--{{ 'text_data_notula' | translate }}--> {{fattura.dataNotula}}
                    </div>
                    <!--<div *ngIf="!platform.is('desktop')" class="detail detail-margin">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>
                    <div *ngIf="platform.is('desktop')" class="detail">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>-->
                  </div>
                  <div class="row-download item-no-border" *ngIf="!visualizzaProgetti && fattura.nrNotula != null">
                    <ion-icon name="eye" (click)="getNotula(fattura.id, fattura.nrNotula, false);" target="_blank" download tappable title="{{ 'vedi_notula' | translate }}"></ion-icon>
                   </div>
                </div>
              </div>
              </ion-list>
            </span>
          
        </ion-list>

        <ion-list *ngSwitchCase="'estratto'" ngDefaultControl>
          <div class="title-infra">
            {{ 'estratto_conto' | translate }}
          </div>                               
        </ion-list>

        <ion-list *ngSwitchCase="'solleciti'" ngDefaultControl>
          <ion-item>
            <h2>{{ 'solleciti' | translate }}</h2>
          </ion-item>
        </ion-list>
        
      </div>
    <!--</div>
  </div>-->
</ion-content>

<ion-footer class="footer-tabs-smart ion-no-border" no-border *ngIf="!platform.is('desktop')">
  <div class="contenitore-home footer">
    <div class="box-footer">
      <ion-tabs class="footer-toolbar">
        <ion-tab-bar class="footer-tabbar-smart" [(ngModel)]="segreteria" ngDefaultControl>
          <ion-tab-button value="preventivi" (click)="redirectTo2p2()">
            <img src="assets/icon/prev-pagam-grigio.svg" class="icon-footer">
            <ion-label>{{ 'preventivi' | translate }}</ion-label>
          </ion-tab-button>
          <ion-tab-button value="fatture" (click)="changeSel('fatture')">
            <img src="assets/icon/fatture-progetti-bianco.svg" id="icon-fatture" class="icon-footer">
            <ion-label id="label-fatture" style="color: white;">{{ 'fatture' | translate }}</ion-label>
          </ion-tab-button>
          <ion-tab-button value="estratto" (click)="downloadEstrattoConto()"> 
            <img src="assets/icon/estratto-conto-grigio.svg" id="icon-estratto" class="icon-footer">
            <ion-label id="label-estratto">{{ 'estratto_conto' | translate }}</ion-label>
          </ion-tab-button>
          <!--<ion-tab-button  value="solleciti" (click)="changeSel('solleciti')">
            <img src="assets/icon/solleciti-grigio.svg" id="icon-solleciti" class="icon-footer">
            <ion-label id="label-solleciti">{{ 'solleciti' | translate }}</ion-label>
          </ion-tab-button>-->
        </ion-tab-bar>
      </ion-tabs>
    </div>
  </div>
</ion-footer>

<ion-content *ngIf="platform.is('desktop')">
  <ion-row class="title-row-segreteria">
    <ion-col>
      <ion-row>
        <ion-buttons class="back-button-desktop" (click)="back()" title="{{ 'back_login' | translate }}">
          <ion-icon name="arrow-back-outline" color="#2b94d1" class="back" tappable></ion-icon>
        </ion-buttons>
        <div class="documenti-title">
          <ion-title>{{ 'segreteria_titolo' | translate }}</ion-title>
        </div>
      </ion-row>
    </ion-col>
    <ion-col>
      <div class="footer-tabs-desktop" no-border>
        <div class="contenitore-home footer">
          <div class="box-footer">
            <ion-tabs class="footer-toolbar">
              <ion-tab-bar class="footer-tabbar" [(ngModel)]="segreteria" ngDefaultControl>
                <ion-tab-button value="preventivi" (click)="redirectTo2p2()">
                  <img src="assets/icon/prev-pagam-grigio.svg" class="icon-footer">
                  <ion-label>{{ 'preventivi' | translate }}</ion-label>
                </ion-tab-button>
                <ion-tab-button value="fatture" (click)="changeSel('fatture')">
                  <img src="assets/icon/fatture-progetti-bianco.svg" id="icon-fatture" class="icon-footer">
                  <ion-label id="label-fatture" style="color: white;">{{ 'fatture' | translate }}</ion-label>
                </ion-tab-button>
                <ion-tab-button value="estratto" (click)="downloadEstrattoConto()"> 
                  <img src="assets/icon/estratto-conto-grigio.svg" id="icon-estratto" class="icon-footer">
                  <ion-label id="label-estratto">{{ 'estratto_conto' | translate }}</ion-label>
                </ion-tab-button>
                <!--<ion-tab-button  value="solleciti" (click)="changeSel('solleciti')">
                  <img src="assets/icon/solleciti-grigio.svg" id="icon-solleciti" class="icon-footer">
                  <ion-label id="label-solleciti">{{ 'solleciti' | translate }}</ion-label>
                </ion-tab-button>-->
              </ion-tab-bar>
            </ion-tabs>
          </div>
        </div>
      </div>
    </ion-col>
  </ion-row>
  <ion-row class="search-date">
    <div class="search-date">
      <ion-row>
        <div class="riga">
          <ion-checkbox name="privacy" [(ngModel)]="visualizzaProgetti" class="check2"> </ion-checkbox>
          <ion-label>{{ 'visualizza_progetti' | translate }}</ion-label>
        </div>
        <div class="riga">
          <strong>{{ 'cerca' | translate }}</strong> 
          {{ 'da' | translate }} 
          <input type="date" name="calendar" [(ngModel)]="date1" title="{{ 'seleziona_data' | translate }}"> 
          {{ 'a' | translate }} 
          <input type="date" name="calendar" [(ngModel)]="date2" title="{{ 'seleziona_data' | translate }}">
          <ion-button (click)="resetDate()" class="search-arrow-red-desktop" title="{{ 'reset_documenti' | translate }}">
            <ion-icon class="button-icon" slot="icon-only" name="close" title="{{ 'cerca_documenti' | translate }}">
            </ion-icon>
          </ion-button>
          <ion-button (click)="cercaFatture()" class="search-arrow" title="{{ 'cerca_documenti' | translate }}">
            <ion-icon class="button-icon-documenti ios-icon" slot="icon-only" name="chevron-forward-circle-outline" title="{{ 'cerca_documenti' | translate }}"></ion-icon>
          </ion-button>
        </div>
        <div class="riga">
          <span *ngIf="visualizzaProgetti">{{ 'cerca_progetto' | translate }}</span>
          <span *ngIf="!visualizzaProgetti">{{ 'cerca_notula' | translate }}</span>
          <input *ngIf="visualizzaProgetti" type="text" name="calendar" [(ngModel)]="nProgNotula" title="{{ 'cerca_progetto' | translate }}" class="cerca-titolo-doc" />
          <input *ngIf="!visualizzaProgetti" type="text" name="calendar" [(ngModel)]="nNotula" title="{{ 'cerca_notula' | translate }}" class="cerca-titolo-doc" />
          <ion-button (click)="cercaFatture()" class="search-arrow" title="{{ 'cerca_documenti' | translate }}">
            <ion-icon class="button-icon-documenti ios-icon" slot="icon-only" name="chevron-forward-circle-outline" title="{{ 'cerca_documenti' | translate }}"></ion-icon>
          </ion-button>
        </div>
        
      </ion-row>
    </div>
  </ion-row>
  <div *ngFor="let fattura of fatture; trackBy: trackByDoc">
    <div class="content-index" *ngIf="(!visualizzaProgetti && fattura.nrNotula != null) || visualizzaProgetti">
      <a *ngIf="visualizzaProgetti" href="{{fattura.urlProgNotula}}" target="_blank" download tappable title="{{ 'scarica_pnotula' | translate }}">
        <div class="struttura-sel documento-box" tappable #lock (mouseover)="lock.isHover = true" (mouseout)="lock.isHover = false">
          <ion-row class="row-box">
            <ion-col>
            <div class="documento-text">
              <div class="title">
                <strong>{{ 'text_progetto' | translate }} {{fattura.nrProgNotula}}</strong>
              </div>
              <div class="data">
                {{fattura.dataProgNotula}}
              </div>
            </div>
            </ion-col>
            <ion-col>
              <div tappable class="icon2">
                <img src="assets/img/documenti.png" tappable/>
                <ion-icon *ngIf="lock.isHover" class="button-icon-download" slot="icon-only" name="download" title="{{ 'scarica_doc' | translate }}"></ion-icon>
              </div>
            </ion-col>
          </ion-row>
        </div>
      </a>
      <a *ngIf="!visualizzaProgetti" href="{{fattura.urlNotula}}" target="_blank" download tappable title="{{ 'scarica_notula' | translate }}">
        <div class="struttura-sel documento-box" tappable #lock (mouseover)="lock.isHover = true" (mouseout)="lock.isHover = false">
          <ion-row class="row-box">
            <ion-col>
            <div class="documento-text">
              <div class="title">
                <strong>{{ 'text_notula' | translate }} {{fattura.nrNotula}}</strong>
              </div>
              <div class="data">
                {{fattura.dataNotula}}
              </div>
            </div>
            </ion-col>
            <ion-col>
              <div tappable class="icon2">
                <img src="assets/img/documenti.png" tappable/>
                <ion-icon *ngIf="lock.isHover" class="button-icon-download" slot="icon-only" name="download" title="{{ 'scarica_doc' | translate }}"></ion-icon>
              </div>
            </ion-col>
          </ion-row>
        </div>
      </a>
    </div>
  </div>
</ion-content>