<!--<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 (click)="condividiDocumenti()" 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">{{ 'titolo_documenti' | translate }}</ion-title>
          <ion-buttons (click)="condividiDocumenti()" slot="end" title="{{'uscita' | translate}}" id="buttonsDoc" 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 *ngIf="!platform.is('desktop')">
  <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="{{ 'reset_documenti' | translate }}"></ion-icon>
          </ion-button>
        </span>
        <ion-button (click)="cercaDocumenti()" class="search-arrow" title="{{ 'cerca_documenti' | 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)="cercaDocumenti()" class="search-arrow" title="{{ 'cerca_documenti' | 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>-->
      <ion-row>
        <ion-row class="riga"><span><strong>{{ 'cerca' | translate }}</strong> {{ 'titolo' | translate }}</span>
        <!--<input type="text" name="calendar" [(ngModel)]="titolo" title="{{ 'ricerca_titolo' | translate }}" class="cerca-titolo-doc" />-->
        <ion-select (ionChange)="cercaDocumenti()" value="titolo" [(ngModel)]="titolo" interface="popover" title="{{ 'ricerca_titolo' | translate }}" class="cerca-titolo-doc"> 
          <ion-select-option value=""></ion-select-option>
          <ion-select-option *ngFor="let tit of titoli; let i=index;" value="{{tit}}">{{tit}}</ion-select-option>
        </ion-select>
      </ion-row>
        <ion-button (click)="cercaDocumenti()" class="search-arrow" title="{{ 'cerca_documenti' | 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 id="buttonsDoc" style="display: none;">
    <div class="search-date-smart">
      <ion-row>
        <span class="riga">
          <ion-label>{{ 'condividi_doc' | translate }}</ion-label>
        </span>
        <ion-button (click)="condividiDocumenti()" class="search-arrow" title="{{'condividi_doc' | translate}}">
          <ion-icon class="button-icon-documenti-smart share-button" name="share" title="{{'condividi_doc' | translate}}" tappable></ion-icon>
        </ion-button>
      </ion-row>
    </div>
    <!--<ion-buttons (click)="condividiDocumenti()" title="{{'condividi_doc' | 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 documento of documenti.documenti; trackBy: trackByDoc" tappable text-wrap (click)="selection?toggleGroup(documento.idDocumento):selectItem(documento.idDocumento)"
    (press)="selectItem(documento.idDocumento)" [ngStyle]="{'background-color': documento.checked ? '#c3ddec' : '#ffffff'}" class="row-results-smart">
      <ion-checkbox name="privacy" [(ngModel)]="documento.checked" class="check" (click)="checkSelected(documento.idDocumento)"> </ion-checkbox>
      <div class="table-row">
        <div class="row-text">
          <strong>{{documento.titolo}}</strong>
          <div class="detail">
            {{documento.data}}
          </div>
        </div>
        <div class="row-download item-no-border">
          <ion-icon name="eye" (click)="getDocumento(documento.idDocumento, documento.nomeFile);" target="_blank" download tappable title="{{ 'vedi_documento' | translate }}"></ion-icon>
        </div>
      </div>
      <div class="clr"></div>
    </ion-list>
  </span>
</ion-content>

<ion-content *ngIf="platform.is('desktop')">
  <ion-row class="title-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>{{ 'titolo_documenti' | translate }}</ion-title>
      </div>
  </ion-row>
  <ion-row class="search-date">
    <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)="cercaDocumenti()" 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 class="riga-doc">
          <strong>{{ 'cerca' | translate }}</strong> 
          {{ 'titolo' | translate }} 
          <!--<input type="text" name="calendar" [(ngModel)]="titolo" title="{{ 'ricerca_titolo' | translate }}" class="cerca-titolo-doc" />-->
          <ion-select (ionChange)="cercaDocumenti()" value="titolo" [(ngModel)]="titolo" interface="popover" title="{{ 'ricerca_titolo' | translate }}" class="cerca-titolo-doc"> 
            <ion-select-option value=""></ion-select-option>
            <ion-select-option *ngFor="let tit of titoli; let i=index;" value="{{tit}}">{{tit}}</ion-select-option>
          </ion-select>
          <div style="width: 28.7%; margin-right: 0;">
          <ion-button (click)="cercaDocumenti()" 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>
    </div>
  </ion-row>
  <div class="content-index" *ngFor="let documento of documenti.documenti; trackBy: trackByDoc">
    <a href="{{documento.url}}" target="_blank" download tappable title="{{ 'scarica_doc' | 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>{{documento.titolo}}</strong>
            </div>
            <div class="data">
              {{documento.data}}
            </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>
</ion-content>