<ion-header class="header" no-border>
  <ion-grid class="header-subpage">
    <ion-row justify-content-center>
      <ion-col align-self-center size-lg="7">
        <ion-toolbar>
          <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>
  <div class="contenitore-home">
    <div class="central-doc grigio">
      <ion-grid>
        <ion-row class="search-date">
          <div class="search-date" *ngIf="platform.is('desktop')">
            <span 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" 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 class="search-date" *ngIf="!platform.is('desktop')">
            <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">
          <span 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)="cercaDocumenti()" class="search-arrow" title="{{ 'cerca_documenti' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward" title="{{ 'cerca_documenti' | translate }}"></ion-icon></ion-button></span>
        </ion-row>
        <!--<ion-row class="search-date" id="buttonsDoc" style="display:none"> 
            <div><span class="condividi-text">{{ 'condividi' | translate }}</span>
            <ion-button (click)="condividiDocumenti()" class="search-arrow" title="{{ 'condividi_doc' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="share" title="{{ 'condividi_doc' | translate }}"></ion-icon></ion-button></div>
        </ion-row>-->
        <ion-row class="search-date-border">
        </ion-row>
        <!--<ion-row class="search-date" *ngIf="!platform.is('desktop')">
          <ion-col>
            <ion-grid>
              <ion-row text-center center>
                <ion-label floating class="element-date"><strong>Cerca</strong> da</ion-label>
                <ion-icon floating class="element-date" name="calendar" (click)="setDateDa()"></ion-icon>
                <ion-item floating class="element-date">
                  {{date1}}
                </ion-item>
                <ion-label floating class="element-date">a</ion-label>
                <ion-icon floating class="element-date" name="calendar" (click)="setDateA()"></ion-icon>
                <ion-item floating class="element-date">
                  {{date2}}
                </ion-item>
                <ion-button floating fill="clear" class="search-arrow" (click)="cercaDocumenti()">
                  <ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward"></ion-icon>
                </ion-button>
              </ion-row>
            </ion-grid>
          </ion-col>
          <ion-col></ion-col>
        </ion-row>-->
        <!--<ion-row>
          <ion-col>
            <ion-grid>
              <ion-row text-center center>
                <ion-col>
                  <ion-label floating>Da:</ion-label>
                </ion-col>
                <ion-col>
                  <ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="date1"></ion-datetime>
                </ion-col>
                <ion-col>
                  <ion-label floating>A:</ion-label>
                </ion-col>
                <ion-col>
                  <ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="date2"></ion-datetime> 
                </ion-col>
                <ion-col>
                  <ion-button color="light" (click)="cercaDocumenti()">Cerca</ion-button>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
          <ion-col></ion-col>
        </ion-row>-->
        <span *ngIf="platform.is('desktop')">
          <ion-list *ngFor="let documento of documenti.documenti; trackBy: trackByDoc" class="row-results">
            <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">
                <a href="{{documento.url}}" target="_blank" download tappable title="{{ 'scarica_doc' | translate }}">
                  <ion-icon name="cloud-download" title="{{ 'scarica_doc' | translate }}"></ion-icon>
                </a>
              </div>
            </div>
            <div class="clr"></div>
          </ion-list>
        </span>

        <span *ngIf="!platform.is('desktop')"> 
          <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">
            <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-grid>
    </div>
  </div>
</ion-content>
