<div>
  <div class="sub-page">
    <h1 translate>Licenses and Bundles</h1>
    <small translate>Check out your active Nano licenses and active recurring licenses here. If you have unclaimed bundle licenses, you can claim them here or copy them for distribution.</small>
    <p *ngIf="isOnApp" translate>Buying license only available in browser environment. On mobile application we will redirect you to our website.</p>

    <ng-template #loadingContent>
      <mat-icon><mat-spinner diameter="20"></mat-spinner></mat-icon>
    </ng-template>

    <ng-container *ngIf="licenses && bundles; else loadingContent">

      <div class="button-row">
        <button *ngIf="!isOnApp" mat-raised-button color="primary" routerLink="/license-buy">
          <mat-icon>shopping_cart</mat-icon><span translate>Buy license</span>
        </button>
        <button *ngIf="isOnApp" mat-raised-button color="primary">
          <mat-icon>shopping_cart</mat-icon><span translate>Buy license</span>
        </button>    

        <button mat-raised-button color="primary" (click)="showRedeemDialog()">
          <mat-icon>how_to_vote</mat-icon><span translate>Redeem license token</span>
        </button>
      </div>
      <div id="nano-manager-link" translate>
        Go to: <a routerLink="/nano-manager" translate>Nano Manager</a>
      </div>

      <ng-container *ngIf="licenses.length > 0">
        <h2 translate>Your Nano licenses</h2>
        <table id="license-table" #licenseTable mat-table [dataSource]="licenses" class="mat-elevation-z8 desktop-table">
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef translate>Key</th>
            <td
              mat-cell
              *matCellDef="let license"
              [ngClass]="{ expired: isExpired(license), revoked: license.revoked }"
            >
              {{ license.id }}
            </td>
          </ng-container>
    
          <ng-container matColumnDef="number">
            <th mat-header-cell *matHeaderCellDef translate>Nano slots</th>
            <td
              mat-cell
              *matCellDef="let license"
              class="center"
              [ngClass]="{ expired: isExpired(license), revoked: license.revoked }"
            >
              {{ license.number }}
            </td>
          </ng-container>

          <ng-container matColumnDef="recurrence">
            <th mat-header-cell *matHeaderCellDef translate>Recurring until</th>
            <td
              mat-cell
              *matCellDef="let license"
              class="center"
            >
              <span *ngIf="license.recurringOrder"><a class="date-link" (click)="openRecurringOrderDetail(license.recurringOrder)">{{ license.recurringOrder.recurring_until * 1000 | date: "medium" }}</a></span>
              <span *ngIf="!license.recurringOrder" translate> - </span>
            </td>
          </ng-container>
    
          <ng-container matColumnDef="expiration">
            <th mat-header-cell *matHeaderCellDef translate>Expires</th>
            <td
              mat-cell
              *matCellDef="let license"
              [ngClass]="{ expired: isExpired(license), revoked: license.revoked }"
            >
              {{ license.expiration * 1000 | date: "medium" }}
            </td>
          </ng-container>
    
          <ng-container matColumnDef="revoked">
            <th mat-header-cell *matHeaderCellDef translate>Valid</th>
            <td mat-cell *matCellDef="let license" class="center">
              <mat-icon color="primary" *ngIf="!license.revoked">check</mat-icon>
              <mat-icon color="primary" *ngIf="license.revoked">close</mat-icon>
            </td>
          </ng-container>
    
          <tr mat-header-row *matHeaderRowDef="licenseColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: licenseColumns"></tr>
        </table>

        <div class="mobile-table">
          <mat-card *ngFor="let license of licenses">
            <mat-card-content [ngClass]="{ expired: isExpired(license), revoked: license.revoked }">
              <div class="title-cell" translate>Key</div><div class="value-cell">{{license.id}}</div>
              <div class="title-cell" translate>Nano slots</div><div class="value-cell">{{license.number}}</div>
              <div class="title-cell" translate>Expires</div><div class="value-cell">{{ license.expiration * 1000 | date: "medium" }}</div>
              <div class="title-cell" translate>Recurring until</div><div class="value-cell">
                <span *ngIf="!license.recurringOrder" translate> - </span>
                <span *ngIf="license.recurringOrder"> <a class="date-link" (click)="openRecurringOrderDetail(license.recurringOrder)">{{ license.recurringOrder.recurring_until * 1000 | date: "medium" }} </a></span>
              </div>
              <div class="title-cell" translate>Valid</div><div class="value-cell"><mat-icon color="primary" *ngIf="!license.revoked">check</mat-icon><mat-icon color="primary" *ngIf="license.revoked">close</mat-icon></div>
            </mat-card-content>
          </mat-card>
        </div>
      </ng-container>

      <ng-container *ngIf="bundles.length > 0">
        <h2 translate>Your Nano bundles</h2>
        <small class="h2-small">The bundles include all of your available licenses, even the ones that are already in use.</small>
  
        <table mat-table [dataSource]="bundles" class="mat-elevation-z8 desktop-table">
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef translate>Key</th>
            <td
              mat-cell
              *matCellDef="let bundle"
              [ngClass]="{ expired: isExpired(bundle), revoked: bundle.revoked }"
            >
              {{ bundle.id }}
            </td>
          </ng-container>
    
          <ng-container matColumnDef="number">
            <th mat-header-cell *matHeaderCellDef translate>License count</th>
            <td
              mat-cell
              *matCellDef="let bundle"
              class="center"
              [ngClass]="{ expired: isExpired(bundle), revoked: bundle.revoked }"
            >
              {{ bundle.number }}
            </td>
          </ng-container>
    
          <ng-container matColumnDef="expiration">
            <th mat-header-cell *matHeaderCellDef translate>Expires</th>
            <td
              mat-cell
              *matCellDef="let bundle"
              [ngClass]="{ expired: isExpired(bundle), revoked: bundle.revoked }"
            >
              {{ bundle.expiration * 1000 | date: "medium" }}
            </td>
          </ng-container>

          <ng-container matColumnDef="months">
            <th mat-header-cell *matHeaderCellDef translate>Length</th>
            <td
              mat-cell
              *matCellDef="let bundle"
              [ngClass]="{ expired: isExpired(bundle), revoked: bundle.revoked }"
            >
              {{ bundle.months }} <span *ngIf="bundle.months == 1" translate>month</span><span *ngIf="bundle.months > 1" translate>months</span>
            </td>
          </ng-container>
    
          <ng-container matColumnDef="revoked">
            <th mat-header-cell *matHeaderCellDef translate>Valid</th>
            <td mat-cell *matCellDef="let bundle" class="center">
              <mat-icon color="primary" *ngIf="!bundle.revoked">check</mat-icon>
              <mat-icon color="primary" *ngIf="bundle.revoked">close</mat-icon>
            </td>
          </ng-container>
    
          <ng-container matColumnDef="action">
            <th mat-header-cell *matHeaderCellDef translate>Show / Download</th>
            <td mat-cell *matCellDef="let bundle" class="center action-buttons">
              <button mat-icon-button (click)="showBundleLicenses(bundle)" [disabled]="bundle.revoked || isExpired(bundle)"><mat-icon>visibility</mat-icon></button>
              <button mat-icon-button (click)="downloadBundleLicenses(bundle)" [disabled]="bundle.revoked || isExpired(bundle)"><mat-icon>file_download</mat-icon></button>
            </td>
          </ng-container>
    
          <tr mat-header-row *matHeaderRowDef="bundleColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: bundleColumns"></tr>
        </table>

        <div class="mobile-table">
          <mat-card *ngFor="let bundle of bundles">
            <mat-card-content [ngClass]="{ expired: isExpired(bundle), revoked: bundle.revoked }">
              <div class="title-cell" translate>Key</div><div class="value-cell">{{bundle.id}}</div>
              <div class="title-cell" translate>License count</div><div class="value-cell">{{bundle.number}}</div>
              <div class="title-cell" translate>Expires</div><div class="value-cell">{{ bundle.expiration * 1000 | date: "medium" }}</div>
              <div class="title-cell" translate>Length</div><div class="value-cell">
                {{ bundle.months }} <span *ngIf="bundle.months == 1" translate>month</span><span *ngIf="bundle.months > 1" translate>months</span>
              </div>
              <div class="title-cell" translate>Valid</div><div class="value-cell"><mat-icon color="primary" *ngIf="!bundle.revoked">check</mat-icon><mat-icon color="primary" *ngIf="bundle.revoked">close</mat-icon></div>
              <div class="title-cell" translate>Show / Download</div>
              <div class="value-cell">
                <button mat-icon-button (click)="showBundleLicenses(bundle)" [disabled]="bundle.revoked || isExpired(bundle)"><mat-icon>visibility</mat-icon></button>
                <button mat-icon-button (click)="downloadBundleLicenses(bundle)" [disabled]="bundle.revoked || isExpired(bundle)"><mat-icon>file_download</mat-icon></button>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
      </ng-container>
    </ng-container>
  </div>
</div>
