<!--<ion-header class="header-subpage" no-border *ngIf="!platform.is('desktop')">
    <ion-toolbar color="#232D4B">
      <ion-title class="titolo-sezione-head">{{ 'interviste_titolo' | translate }}</ion-title>
    </ion-toolbar>
  </ion-header>-->


<ion-content class="chats">
  <!--<ion-menu side="start" menu-id="topics">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Topics</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button expand="block" (click)="createNewTopics()">Crea nuovo Topic</ion-button>
      <ion-list *ngFor="let topic of topics; trackBy: trackByDoc">
        <ion-item (click)="apriTopic(topic.idRichiesta)">{{topic.titolo}}</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>-->

  <div>
    <div>
      <div [ngSwitch]="intervista" ngDefaultControl>
        <span *ngIf="!platform.is('desktop')">
          <div *ngSwitchCase="'lista'">
              
            <ion-row>
              <div class="search-date-smart">
                <ion-row>
                  <span class="riga riga2">
                    <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>
					  <ion-button (click)="resetDate()" class="search-arrow-red-desktop" title="{{ 'reset_documenti' | translate }}">
                        <ion-icon class="button-icon" slot="icon-only" name="close" title="{{ 'reset_documenti' | translate }}"></ion-icon>
                      </ion-button>
                    </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="{{ 'reset_documenti' | translate }}"></ion-icon>
                    </ion-button>-->
                  </span>
                  <ion-button (click)="caricaRichieste()" 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-button (click)="caricaRichieste()" 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)="caricaRichieste()" 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-button (click)="caricaRichieste()" 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 class="testo-ricerca2 testo-ricerca3">{{ 'visualizza_archiviati' | translate }}</ion-label>
                  </span>
                  <ion-button (click)="caricaRichieste()" 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-button (click)="caricaRichieste()" 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="buttonsInterviste" style="display:none">
              <ion-row>
                <div class="search-date-smart" *ngIf="!archiviati">
                  <ion-row>
                    <span class="riga">
                      <ion-label class="testo-ricerca2 testo-ricerca3">{{ 'archivia_interviste' | translate }}</ion-label>
                    </span>
                    <ion-button (click)="archiviaInterviste(true)" class="search-arrow" title="{{ 'archivia_interviste' | translate }}">
                      <ion-icon class="button-icon-documenti-smart ios-icon" slot="icon-only" name="archive" title="{{ 'archivia_interviste' | translate }}"></ion-icon>
                    </ion-button>
                    <!--<ion-button (click)="archiviaInterviste(true)" class="search-arrow" title="{{ 'archivia_interviste' | translate }}">
                      <ion-icon class="button-icon-documenti-smart ios-icon" slot="icon-only" name="archive" title="{{ 'archivia_interviste' | 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 class="testo-ricerca2 testo-ricerca3">{{ 'undo_archivio_interviste' | translate }}</ion-label>
                    </span>
                    <ion-button (click)="archiviaInterviste(false)" class="search-arrow" title="{{ 'riattiva_pareri' | translate }}">
                      <ion-icon class="button-icon-documenti-smart ios-icon" slot="icon-only" name="arrow-undo-outline" title="{{ 'riattiva_pareri' | translate }}"></ion-icon>
                    </ion-button>
                  </ion-row>
                </div>
              </ion-row>
            </span>
            <!--<ion-row class="date-div">
              <div class="search-date float-date riga">
                <ion-checkbox name="privacy" [(ngModel)]="archiviati" class="check"> </ion-checkbox>
                <ion-label class="archivio-text"><span class="text">{{ 'visualizza_archiviati' | translate }}</span></ion-label>
                <ion-button (click)="caricaRichieste()" 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 class="clr"></div>
  
                <span class="item-no-border riga" id="buttonsInterviste" style="display:none">
                  <div *ngIf="!archiviati" class="text">
                    {{ 'archivia_interviste' | translate }}
                    <ion-button (click)="archiviaInterviste(true)" class="search-arrow" title="{{ 'archivia_interviste' | translate }}"><ion-icon class="button-icon-archivia" slot="icon-only" name="archive" title="{{ 'archivia_interviste' | translate }}"></ion-icon></ion-button>
                  </div>
                  <div *ngIf="archiviati" class="text">
                    {{ 'undo_archivio_interviste' | translate }}
                    <ion-button (click)="archiviaInterviste(false)" class="search-arrow" title="{{ 'riattiva_interviste' | translate }}"><ion-icon class="button-icon-archivia" slot="icon-only" name="undo" title="{{ 'riattiva_interviste' | translate }}"></ion-icon></ion-button>
                  </div>                
                </span>
              </div>
            </ion-row>-->
            <ion-row class="search-date-border-smart">
            </ion-row>
            <ion-list *ngFor="let topic of topics; trackBy: trackByDoc" class="row-results-smart" (click)="selection?toggleGroup(topic.idRichiesta):selectItem(topic.idRichiesta)"
            (press)="selectItem(topic.idRichiesta)" [ngStyle]="{'background-color': topic.checked ? '#c3ddec' : '#ffffff'}">
              <ion-checkbox name="privacy" [(ngModel)]="topic.checked" class="check" (click)="checkSelected(topic.idRichiesta)"> </ion-checkbox>          
              <div class="table-row">

                  <!--<div class="row-download-special">
                      <div class="group-icon3" >
                        <ion-icon name="refresh-circle" (click)="loadTopics('after')" tappable title="{{ 'aggiorna' | translate }}"></ion-icon>
                        <ion-label>{{ 'refresh' | translate }}</ion-label>
                      </div>
                      <div class="group-icon3">
                        <ion-icon name="arrow-round-forward" (click)="apriTopic(topic.idRichiesta)" tappable title="{{ 'visualizza_dettagli' | translate }}"></ion-icon>
                        <ion-label>{{ 'apri' | translate }}</ion-label>
                      </div>                            
                    </div>-->

                <div class="row-text data" text-wrap>
                  <div text-wrap>{{topic.titolo}}</div>
                  {{topic.data}}
                </div>
                <div class="row-download item-no-border">
                  <ion-icon class="button-icon-documenti-smart2 ios-icon" name="caret-forward-circle-outline" (click)="apriTopic(topic.idRichiesta)" 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 }}">
                <ion-icon name="arrow-back-circle-outline" color="#232D4B" class="back" tappable></ion-icon>
              </ion-buttons>
              <div class="pareri-title">
                <ion-title>{{ 'interviste_titolo' | translate }}</ion-title>
              </div>
            </ion-row>
            <div class="search-date">
              <ion-row>
                <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)="caricaRichieste()" class="search-arrow" title="{{ 'cerca' | 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">
                  <strong>{{ 'cerca' | translate }}</strong> 
                  {{ 'titolo' | translate }} 
                  <input type="text" name="calendar" [(ngModel)]="titolo" title="{{ 'ricerca_titolo' | translate }}" class="cerca-titolo-doc" />
                  <ion-button (click)="caricaRichieste()" class="search-arrow" title="{{ 'cerca' | 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">
                  <ion-checkbox name="privacy" [(ngModel)]="archiviati" class="check"> </ion-checkbox>
                  <ion-label class="archivio-text"><span class="text">{{ 'visualizza_archiviati' | translate }}</span></ion-label>
                  <ion-button (click)="caricaRichieste()" 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 riga2" id="buttonsInterviste" style="display:none">
                  <div *ngIf="!archiviati" class="text">
                    {{ 'archivia_interviste' | translate }}
                    <ion-button (click)="archiviaInterviste(true)" class="search-arrow" title="{{ 'archivia_interviste' | translate }}">
                      <ion-icon class="button-icon-documenti" slot="icon-only" name="archive" title="{{ 'archivia_interviste' | translate }}"></ion-icon></ion-button>
                  </div>
                  <div *ngIf="archiviati" class="text">
                    {{ 'undo_archivio_interviste' | translate }}
                    <ion-button (click)="archiviaInterviste(false)" class="search-arrow" title="{{ 'riattiva_interviste' | translate }}">
                      <ion-icon class="button-icon-documenti" slot="icon-only" name="undo" title="{{ 'riattiva_interviste' | translate }}"></ion-icon></ion-button>
                  </div>  
                </div>
              </ion-row>
            </div>
            <div class="content-index" *ngFor="let topic of topics; trackBy: trackByDoc">
              <div tappable title="{{ 'visualizza_dettagli' | translate }}">
                <div class="struttura-sel2 documento-box" tappable>
                  <ion-row class="row-box">
                    <ion-col>
                      <div class="documento-text">
                        <ion-row class="title">
                          <div class="checkbox-desktop">
                            <ion-checkbox name="privacy" [(ngModel)]="topic.checked" class="check" (click)="checkSelected(topic.idRichiesta)"> </ion-checkbox>
                          </div>
                          <div class="title" (click)="apriTopic(topic.idRichiesta)">
                            <strong>{{topic.titolo}}</strong>
                          </div>
                        </ion-row>
                        <div class="data" (click)="apriTopic(topic.idRichiesta)">
                          {{topic.data}}
                        </div>
                      </div>
                    </ion-col>
                    <ion-col (click)="apriTopic(topic.idRichiesta)">
                      <div tappable class="icon2">
                        <img src="assets/img/domandeNero.png" tappable/>
                      </div>
                    </ion-col>
                  </ion-row>
                </div>
              </div>
            </div>
              <span class="row-results" *ngIf="!platform.is('desktop')">
                  <ion-list *ngFor="let topic of topics; trackBy: trackByDoc" class="row-results" (click)="selection?toggleGroup(topic.idRichiesta):selectItem(topic.idRichiesta)"
                  (press)="selectItem(topic.idRichiesta)" [ngStyle]="{'background-color': topic.checked ? '#c3ddec' : '#ffffff'}">
                    <ion-checkbox name="privacy" [(ngModel)]="topic.checked" class="check" (click)="checkSelected(topic.idRichiesta)"> </ion-checkbox>          
                    <div class="table-row">

                        <div class="row-download-special">
                            <div class="group-icon3" >
                              <ion-icon name="refresh-circle" (click)="loadTopics('after')" tappable title="{{ 'aggiorna' | translate }}"></ion-icon>
                              <ion-label>{{ 'refresh' | translate }}</ion-label>
                            </div>
                            <div class="group-icon3">
                              <ion-icon name="arrow-round-forward" (click)="apriTopic(topic.idRichiesta)" tappable title="{{ 'visualizza_dettagli' | translate }}"></ion-icon>
                              <ion-label>{{ 'apri' | translate }}</ion-label>
                            </div>                            
                          </div>

                      <div class="row-text data" text-wrap>
                        {{topic.data}}
                        <div text-wrap>{{topic.titolo}}</div>
                      </div>
                     
                      
                    </div>           
                  </ion-list>
              </span>
            </div>
        </span>

          <div *ngSwitchCase="'dettaglio'">
            <ion-grid>
              <ion-row class="title-row">
                <ion-buttons class="back-button-desktop" (click)="apriLista()" title="{{ 'back_interviste' | translate }}">
                  <ion-icon name="arrow-back-circle-outline" color="#232D4B" class="back" tappable></ion-icon>
                </ion-buttons>
                <div class="pareri-title">
                  <ion-title>{{topicAttivo.titolo}}</ion-title>
                </div>
              </ion-row>
              <ion-row class="search-date">
                <div *ngIf="platform.is('desktop')" class="grigio 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)="caricaTopic()" class="search-arrow" title="{{ 'cerca_interventi' | translate }}">
                    <ion-icon class="button-icon-documenti ios-icon" slot="icon-only" name="chevron-forward-circle-outline" title="{{ 'cerca_interventi' | translate }}"></ion-icon>
                  </ion-button>
                </div>
              </ion-row>
              <div class="from-me-desktop" *ngIf="topicAttivo.testo != null">
                <div class="io">io - {{topicAttivo.data}}</div>
                <p>{{topicAttivo.testo}}</p>
              </div>
              <div class="clr"></div>
              <div *ngFor="let intervento of topicAttivo.interventi;">
                <div class="from-me" *ngIf="intervento.utente == null">
                  <div class="io">{{ 'io' | translate }} - {{intervento.data}}</div>
                  <p>{{intervento.testo}}</p>
                </div>
                <div class="from-them-desktop" *ngIf="intervento.utente != null">
                  <div class="operatore">{{intervento.utente}} - {{intervento.data}}</div>
                  <p>{{intervento.testo}}</p>
                </div>	
                <div class="clr"></div>
              </div>
            </ion-grid>
          </div>

          <div *ngSwitchCase="'new'">
            <ion-row class="title-row">
              <ion-buttons class="back-button-desktop" (click)="apriLista()" title="{{ 'back_interviste' | translate }}">
                <ion-icon name="arrow-back-circle-outline" color="#232D4B" class="back" tappable></ion-icon>
              </ion-buttons>
              <div class="pareri-title">
                <ion-title>{{ 'nuova_domanda' | translate }}</ion-title>
              </div>
            </ion-row>
            <form class="parere-form" #form="ngForm" (ngSubmit)="saveNewTopic(form)">
              <div>
                <ion-item class="title-question">
                  <ion-input class="item-no-border" name="title" type="text" placeholder="{{ 'inserire_titolo' | translate }}" ngModel required></ion-input>
                </ion-item>
              </div>
              <div>
                <ion-item class="question-extended item-no-border">
                  <ion-textarea name="question" placeholder="{{ 'inserire_domanda' | translate }}" ngModel required></ion-textarea>
                </ion-item>
              </div>
              <ion-row>
                <div class="send">
                  <ion-button type="submit" size="large" [disabled]="form.invalid" expand="block" color="#fcc73d" class="form-button">{{ 'invia' | translate }}</ion-button>
                </div>
                <div class="undo">
                  <ion-button color="#515151" size="large" expand="block" (click)="apriLista()" class="form-button">{{ 'annulla' | translate }}</ion-button>
                </div>
              </ion-row>
            </form>
          </div>
      </div>
    </div>
  </div>
</ion-content>

<ion-footer class="footer-parere ion-no-border" no-border *ngIf="bottoneVisibile" id="footer-interviste">
  <form #form="ngForm" *ngIf="formInserisciIntervento">
    <ion-grid>
      <ion-row>
        
          <ion-col size="10">
            <ion-input class="input-intervento" id= "message" type="text" placeholder="{{ 'digita_msg' | translate }}" name="message" [(ngModel)]="message"></ion-input> 
          </ion-col>
          <ion-col size="2">
            <ion-icon class="button-icon-documenti" name="chevron-forward-circle-outline" (click)="aggiungiIntervento(form)" tappable title="{{ 'inserisci_intervento' | translate }}" [style.color]="'#EEA248'"></ion-icon>
          </ion-col>
          
      </ion-row>
    </ion-grid>
  </form>
  <div class="foo-button" center>
    <div class="round-btn-desktop">
      <a (click)="apriEdit()" tappable title="{{ 'inserisci_argomento' | translate }}">
        <ion-icon name="add" [style.color]="'#FFFFFF'"></ion-icon>
      </a>
    </div>
  </div>
</ion-footer>
