<ion-header class="header-subpage" no-border>
  <ion-toolbar>
    <ion-title class="titolo-sezione-head">i miei documenti</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="contenitore-home">
    <div class="central-doc">
      <ion-grid>
        <ion-row *ngIf="platform.is('desktop')">
          <ion-col class="block-date">              
            <ion-label floating class="element-date"><strong>Cerca</strong> da</ion-label>                
            <input floating class="input-date element-date" type="date" name="calendar" [(ngModel)]="date1">                
            <ion-label floating class="element-date">a</ion-label>                
            <input floating class="element-date input-date" type="date" name="calendar" [(ngModel)]="date2">                
            <ion-button floating fill="clear" class="button-date element-date" (click)="cercaDocumenti()">
                <ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward"></ion-icon>
            </ion-button>
          </ion-col>
        </ion-row>
        <ion-row *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="button-date element-date" (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>-->
        <ion-list *ngFor="let documento of documenti.documenti; trackBy: trackByDoc" class="row-results">
          <div class="table-row">
            <div class="row-text">
              {{documento.titolo}}
              <div class="detail">
                {{documento.data}} - Tipo: {{documento.tipo}}
              </div>
            </div>
            <ion-item class="row-download item-no-border">
              <a *ngIf="platform.is('desktop')" href="{{documento.url}}" target="_blank" download tappable>
                <ion-icon name="cloud-download"></ion-icon>
              </a>
              <!--<a *ngIf="platform.is('desktop')" href="{{documento.url}}" target="_blank" download>Clicca per scaricare il documento</a>-->
              <ion-icon name="cloud-download" *ngIf="!platform.is('desktop')" (click)="getDocumento(documento.idDocumento, documento.nomeFile);" target="_blank" download tappable>Clicca per scaricare il documento</ion-icon>
            </ion-item>
          </div>
        </ion-list>
      </ion-grid>
    </div>
  </div>
</ion-content>
