<ion-header>
  <ion-toolbar>
    <ion-menu-button slot="start">
      <ion-icon name="menu"></ion-icon>
    </ion-menu-button>
    <ion-title> {{'Download'| translate }} </ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" routerLink="/search" routerDirection="forward">
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
      <ion-button fill="clear" routerLink="/cart" routerDirection="forward">
        <ion-icon name="basket"></ion-icon>
        <ion-badge color="secondary">{{shared.cartTotalItems()}}</ion-badge>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid *ngIf="downloads.length==0 && !httpLoading">
    <ion-row class="ion-align-items-center">
      <ion-col size="12">
        <h3 class="ion-text-center">
          <ion-icon name="download"></ion-icon>
        </h3>
        <h4 class="ion-text-center">{{'Your Download List is Empty'|translate}}</h4>
        <h5 class="ion-text-center">{{'continue shopping'|translate}}</h5>
        <p class="ion-text-center">
          <ion-button routerLink="/products/0/0/newest" routerDirection="forward">
            {{'Explore'|translate}}
          </ion-button>
        </p>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-card *ngFor="let down of downloads">
    <ion-card-content>
      <ion-row>
        <ion-col size="6">
          {{'Product'|translate}}
        </ion-col>
        <ion-col class="ion-text-right" size="6">
          {{down.product_name}}
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col size="6">
          {{'Downloads remaining'|translate}}
        </ion-col>
        <ion-col class="ion-text-right" size="6" *ngIf="down.downloads_remaining!='unlimited'">
          {{down.downloads_remaining}}
        </ion-col>
        <ion-col class="ion-text-right" size="6" *ngIf="down.downloads_remaining=='unlimited'">
          &infin;
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col size="6">
          {{'Expires'|translate}}
        </ion-col>
        <ion-col class="ion-text-right" size="6" *ngIf="down.access_expires == 'never'">
          {{down.access_expires|translate}}
        </ion-col>
        <ion-col class="ion-text-right" size="6" *ngIf="down.access_expires != 'never'">
          {{down.access_expires|date}}
        </ion-col>
      </ion-row>
      <ion-button expand="full" color="secondary" (click)="downloadFile(down)">
        {{down.download_name}}
        <ion-icon name="download" slot="end"></ion-icon>
      </ion-button>
    </ion-card-content>
  </ion-card>
  <ion-infinite-scroll #infinite (ionInfinite)="getDownloads()">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>