<ion-content class="chats">
  <div>
    <div>
      <div [ngSwitch]="notifica" ngDefaultControl>
        <span *ngIf="!platform.is('desktop')">
        <div *ngSwitchCase="'lista'">
          <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)="cercaNotifiche()" 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>
            <div class="search-date-smart">
              <ion-row>
                <span class="riga">
                  <ion-checkbox name="privacy" [(ngModel)]="archiviati" class="check2"> </ion-checkbox>
                  <ion-label>{{ 'visualizza_notifiche_archiviate' | translate }}</ion-label>
                </span>
                <ion-button (click)="cercaNotifiche()" 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 *ngIf="!isClienteLoggato">
            <div class="search-date-smart">
              <ion-row>
                <span class="riga">
                  <span class="testo-ricerca">
                    <span class="testo-ricerca-select"><strong>{{ 'cerca' | translate }}</strong> {{ 'cliente' | translate }}</span>
                    <ion-select value="clienteSelezionato" class="cerca-titolo-doc testo-ricerca-select" [(ngModel)]="clienteSelezionato" (ionChange)="cambiaCliente()" interface="popover" [placeholder]="clienteSel ? clienteSel.denominazione : 'Seleziona cliente ...'" title="Seleziona un cliente"> 
                      <ion-select-option value="-1"></ion-select-option>
                      <ion-select-option *ngFor="let cliente of clienti; let i=index;" value="{{cliente.id}}">{{cliente.denominazione}}</ion-select-option>
                    </ion-select>
                  </span>
                </span>
                <ion-button (click)="cercaNotifiche()" 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>
            <div class="search-date-smart">
              <ion-row>
                <span class="riga">
                  <span class="testo-ricerca">
                    <span class="testo-ricerca-select"><strong>{{ 'cerca' | translate }}</strong> {{ 'struttura' | translate }}</span>
                    <ion-select value="strutturaSelezionata" class="cerca-titolo-doc testo-ricerca-select" [(ngModel)]="strutturaSelezionata" (ionChange)="cambiaStruttura()" interface="popover" [placeholder]="strSel ? strSel.denominazione : 'Seleziona struttura ...'" title="Seleziona una struttura"> 
                      <ion-select-option value="-1"></ion-select-option>
                      <ion-select-option *ngFor="let struttura of strutture; let i=index;" value="{{struttura.id}}">{{struttura.denominazione}}</ion-select-option>
                    </ion-select>
                  </span>
                </span>
                <ion-button (click)="cercaNotifiche()" 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>  
          <span id="buttonsNotifiche" style="display:none">
            <ion-row>
              <div class="search-date-smart" *ngIf="!archiviati">
                <ion-row>
                  <span class="riga">
                    <ion-label>{{ 'archivia_notifiche' | translate }}</ion-label>
                  </span>
                  <ion-button (click)="archiviaNotifiche(true)" class="search-arrow" title="{{ 'archivia_notifiche' | translate }}">
                    <ion-icon class="button-icon-documenti-smart ios-icon" slot="icon-only" name="archive" title="{{ 'archivia_notifiche' | translate }}"></ion-icon>
                  </ion-button>
                </ion-row>
              </div>
            </ion-row>
            <ion-row>
              <div class="search-date-smart" *ngIf="archiviati">
                <ion-row>
                  <span class="riga">
                    <ion-label>{{ 'undo_archivio_notifiche' | translate }}</ion-label>
                  </span>
                  <ion-button (click)="archiviaNotifiche(false)" class="search-arrow" title="{{ 'riattiva_notifiche' | translate }}">
                    <ion-icon class="button-icon-documenti-smart ios-icon" slot="icon-only" name="arrow-undo-circle-outline" title="{{ 'riattiva_notifiche' | translate }}"></ion-icon>
                  </ion-button>
                </ion-row>
              </div>
            </ion-row>
          </span>
          <ion-row class="search-date-border-smart">
          </ion-row>            
          <ion-list *ngFor="let notifica of notifiche; trackBy: trackByDoc" class="row-results-smart" (click)="selection?toggleGroup(notifica.id):selectItem(notifica.id)"
            (press)="selectItem(notifica.id)" [ngStyle]="{'background-color': notifica.checked ? '#c3ddec' : '#ffffff'}">
            <ion-checkbox name="privacy" [(ngModel)]="notifica.checked" class="check" (click)="checkSelected(notifica.id)"> </ion-checkbox>          
            <div class="table-row">
              <div class="row-text data2" text-wrap *ngIf="notifica.visualizzata">
                <div text-wrap>{{notifica.titolo}}</div>
                {{notifica.data}}
              </div>
              <div class="row-text data2" text-wrap *ngIf="!notifica.visualizzata">
                <div text-wrap><strong>{{notifica.titolo}}</strong></div>
                {{notifica.data}}
              </div>
              <div class="row-download item-no-border">
                <ion-icon class="button-icon-documenti-smart ios-icon" name="caret-forward-circle-outline" (click)="apriNotifica(notifica.id)" tappable title="{{ 'visualizza_dettagli' | translate }}"></ion-icon>
              </div>                
            </div>              
          </ion-list>
        </div>
      </span>

      <span *ngIf="platform.is('desktop')">
        <div *ngSwitchCase="'lista'">
          <ion-row class="title-row">
            <ion-buttons class="back-button-desktop" (click)="back()" title="{{ 'back_login' | translate }}" *ngIf="!isClienteLoggato">
              <ion-icon name="arrow-back-outline" color="#2b94d1" class="back" tappable></ion-icon>
            </ion-buttons>
            <ion-buttons class="back-button-desktop" (click)="logout()" title="{{'uscita' | translate}}" *ngIf="isClienteLoggato">
              <ion-icon name="exit" color="#2b94d1" class="back" tappable></ion-icon>
            </ion-buttons>
            <div class="pareri-title">
              <ion-title>{{ 'notifiche_titolo' | translate }}</ion-title>
            </div>
          </ion-row>
          <div class="search-date">
            <ion-row>
              <ion-row class="riga-doc">
                <span class="testo-ricerca-select">
                  <strong>{{ 'cerca' | translate }}</strong> {{ 'titolo' | translate }} 
                </span>
                <input type="text" name="calendar" [(ngModel)]="titolo" title="{{ 'ricerca_titolo' | translate }}" class="cerca-titolo-doc" />
                <div style="width: 27.1%; margin-right: 0;">
                <ion-button (click)="cercaNotifiche()" 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>
              <ion-row class="riga-doc" *ngIf="!isClienteLoggato">
                <span class="testo-ricerca-select">
                  <strong>{{ 'cerca' | translate }}</strong> 
                  {{ 'cliente' | translate }}
                </span>
                <ion-select value="clienteSelezionato" class=" testo-ricerca-select cerca-titolo-doc" [(ngModel)]="clienteSelezionato" (ionChange)="cambiaCliente()" interface="popover" [placeholder]="clienteSel ? clienteSel.denominazione : 'Seleziona cliente ...'" title="Seleziona un cliente"> 
                  <ion-select-option value="-1"></ion-select-option>
                  <ion-select-option *ngFor="let cliente of clienti; let i=index;" value="{{cliente.id}}">{{cliente.denominazione}}</ion-select-option>
                </ion-select>
                <div style="width: 25.8%; margin-right: 0;">
                <ion-button (click)="cercaNotifiche()" 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>
              <ion-row class="riga-doc">
                <span class="testo-ricerca-select">
                  <strong>{{ 'cerca' | translate }}</strong> 
                  {{ 'struttura' | translate }} 
                </span>
                <ion-select value="strutturaSelezionata" class="testo-ricerca-select cerca-titolo-doc" [(ngModel)]="strutturaSelezionata" (ionChange)="cambiaStruttura()" interface="popover" [placeholder]="strSel ? strSel.denominazione : 'Seleziona struttura ...'" title="Seleziona una struttura"> 
                  <ion-select-option value="-1"></ion-select-option>
                  <ion-select-option *ngFor="let struttura of strutture; let i=index;" value="{{struttura.id}}">{{struttura.denominazione}}</ion-select-option>
                </ion-select>
                <div style="width: 22.4%; margin-right: 0;">
                <ion-button (click)="cercaNotifiche()" 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 class="riga">
                <ion-checkbox name="privacy" [(ngModel)]="archiviati" class="check"> </ion-checkbox>
                <ion-label class="archivio-text"><span class="text">{{ 'visualizza_notifiche_archiviate' | translate }}</span></ion-label>
                <ion-button (click)="cercaNotifiche()" class="search-arrow" title="{{ 'cerca' | translate }}">
                  <ion-icon class="button-icon-documenti ios-icon" slot="icon-only" name="chevron-forward-circle-outline" title="{{ 'cerca' | translate }}"></ion-icon>
                </ion-button>
              </div>
              <div class="riga" id="buttonsNotifiche" style="display:none">
                <div *ngIf="!archiviati" class="text">
                  {{ 'archivia_notifiche' | translate }}
                  <ion-button (click)="archiviaNotifiche(true)" class="search-arrow" title="{{ 'archivia_notifiche' | translate }}">
                    <ion-icon class="button-icon-documenti" slot="icon-only" name="archive" title="{{ 'archivia_notifiche' | translate }}"></ion-icon></ion-button>
                </div>
                <div *ngIf="archiviati" class="text">
                  {{ 'undo_archivio_notifiche' | translate }}
                  <ion-button (click)="archiviaNotifiche(false)" class="search-arrow" title="{{ 'riattiva_notifiche' | translate }}">
                    <ion-icon class="button-icon-documenti" slot="icon-only" name="undo" title="{{ 'riattiva_notifiche' | translate }}"></ion-icon></ion-button>
                </div>  
              </div>
            </ion-row>
          </div>
          <div class="content-index" *ngFor="let notifica of notifiche; trackBy: trackByDoc">
            <div tappable title="{{ 'visualizza_dettagli' | 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">
                      <ion-row class="title">
                        <div class="checkbox-desktop">
                          <ion-checkbox name="privacy" [(ngModel)]="notifica.checked" class="check" (click)="checkSelected(notifica.id)"> </ion-checkbox>
                        </div>
                        <div class="title" (click)="apriNotifica(notifica.id)" *ngIf="!notifica.visualizzata">
                          <strong>{{notifica.titolo}}</strong>
                        </div>
                        <div class="title" (click)="apriNotifica(notifica.id)" *ngIf="notifica.visualizzata">
                          {{notifica.titolo}}
                        </div>
                      </ion-row>
                      <div class="data" (click)="apriNotifica(notifica.id)">
                        {{notifica.data}}
                      </div>
                    </div>
                  </ion-col>
                  <ion-col (click)="apriNotifica(notifica.id)">
                    <div tappable class="icon3">
                      <img src="assets/img/notificheNero.png" tappable/>
                    </div>
                  </ion-col>
                </ion-row>
              </div>
            </div>
          </div>
        </div>
      </span>

        <div *ngSwitchCase="'dettaglio'">
          <!--<div>
            Titolo:
          </div>
          <div>
            <strong>{{notificaAttiva.titolo}}</strong>
          </div>
          <div>
            Testo:
          </div>
          <div>
            <strong>{{notificaAttiva.contenuto}}</strong>
          </div>-->
          <span *ngIf="platform.is('desktop')">
            <ion-row class="title-row">
              <ion-buttons class="back-button-desktop" (click)="apriLista()" title="{{ 'back_pareri' | translate }}">
                <ion-icon name="arrow-back-outline" color="#232D4B" class="back" tappable></ion-icon>
              </ion-buttons>
              <div class="pareri-title">
                <ion-title>{{notificaAttiva.titolo}}</ion-title>
              </div>
            </ion-row>
          
            <ion-row>
              <div >
                <ion-label>{{notificaAttiva.contenuto}}</ion-label>
              </div>
            </ion-row>
          </span>
          <span *ngIf="!platform.is('desktop')">
            <ion-row class="title-row">
              <ion-buttons class="back-button-desktop" (click)="apriLista()" title="{{ 'back_pareri' | translate }}">
                <ion-icon name="arrow-back-outline" color="#232D4B" class="back" tappable></ion-icon>
              </ion-buttons>
              <div class="pareri-title-smart2">
                <ion-title>{{notificaAttiva.titolo}}</ion-title>
              </div>
            </ion-row>
            <ion-row>
              <div>
                <span class="question-extended item-no-border2" no-lines>
                  <ion-textarea class="notifica-content" readonly>{{notificaAttiva.contenuto}}</ion-textarea >
                  </span>
              </div>
            </ion-row>
          </span>
        </div>

        <div *ngSwitchCase="'documenti'">
          
        </div>

      </div>
    </div>
  </div>
</ion-content>
