<ion-header>
  <ion-toolbar>
    <ion-title>Documenti</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid justify-content-center align-items-center>
      <ion-row *ngIf="platform.is('desktop')">
          <ion-col>
            <ion-grid>
              <ion-row text-center center>
                <ion-col>
                  <ion-label floating>Da:</ion-label>
                </ion-col>
                <ion-col>
                  <input type="date" name="calendar" [(ngModel)]="date1">
                </ion-col>
                <ion-col>
                  <ion-label floating>A:</ion-label>
                </ion-col>
                <ion-col>
                  <input type="date" name="calendar" [(ngModel)]="date2">
                </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-row *ngIf="!platform.is('desktop')">
      <ion-col>
        <ion-grid>
          <ion-row text-center center>
            <ion-col>
              <ion-label floating>Da:</ion-label>
            </ion-col>
            <ion-col>
              <ion-icon name="calendar" (click)="setDateDa()"></ion-icon>
            </ion-col>
            <ion-col>
              {{date1}}
            </ion-col>
            <ion-col>
              <ion-label floating>A:</ion-label>
            </ion-col>
            <ion-col>
                <ion-icon name="calendar" (click)="setDateA()"></ion-icon>
            </ion-col>
            <ion-col>
              {{date2}}
            </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-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-row class="row header" text-center>
      <ion-col class="col">
          <h3>Titolo</h3>
      </ion-col>
      <ion-col class="col">
          <h3>Tipo</h3>
      </ion-col>
      <ion-col class="col">
          <h3>Data</h3>
      </ion-col>
      <ion-col class="col">
          <h3>Download</h3>
      </ion-col>
    </ion-row>
    <ion-row *ngFor="let documento of documenti.documenti; trackBy: trackByDoc" text-center center class="row">
      <ion-col class="col">
        <p>{{documento.titolo}}</p>
      </ion-col>
      <ion-col class="col">
        <p>{{documento.tipo}}</p>
      </ion-col>
      <ion-col class="col">
        <p>{{documento.data}}</p>
      </ion-col>
      <ion-col class="col"> 
        <a *ngIf="platform.is('desktop')" href="{{documento.url}}" target="_blank" download>Clicca per scaricare il documento</a>
        <a *ngIf="!platform.is('desktop')" (click)="getDocumento(documento.idDocumento, documento.nomeFile);" target="_blank" download>Clicca per scaricare il documento</a>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
