<button mat-fab color="primary" (click)="createPackageDialog()">
  <mat-icon>create</mat-icon>
</button>

<div class="mat-elevation-z8 mat-app-background" [hidden]="dataSource.loading$ | async">

<mat-form-field>
  <input matInput type="search" placeholder="Search by name/path" #input>
</mat-form-field>

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
  <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</div>

<table #packagesTable mat-table
matSort [matSortActive]="sortField" [matSortDirection]="sortOrder"
(matSortChange)="sortPackages($event)" matSortDisableClear
 [dataSource]="dataSource" class="mat-elevation-z8 packages-table">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Name">Name</th>
    <td mat-cell *matCellDef="let package">{{package.name}}<br/>{{package.description}}</td>
  </ng-container>

  <ng-container matColumnDef="url">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="URL">URL</th>
    <td mat-cell *matCellDef="let package">{{package.url}}</td>
  </ng-container>

  <ng-container matColumnDef="issues">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Issues">Issues</th>
    <td mat-cell *matCellDef="let package">{{package.issues ? package.issues : 0}}</td>
  </ng-container>

  <ng-container matColumnDef="modules">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Modules">Modules</th>
    <td mat-cell *matCellDef="let package">{{package.modules ? package.modules : 0}}</td>
  </ng-container>

  <ng-container matColumnDef="comments">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Comments">Comments</th>
    <td mat-cell *matCellDef="let package">{{package.comments ? package.comments : 0}}</td>
  </ng-container>

  <ng-container matColumnDef="coverage">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Coverage">Coverage</th>
    <td mat-cell *matCellDef="let package">{{package.coverage ? package.coverage : 0}}</td>
  </ng-container>

  <ng-container matColumnDef="handlers">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Handlers">Handlers</th>
    <td mat-cell *matCellDef="let package">{{package.handlers ? package.handlers : 0}}</td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef>Actions</th>
    <td mat-cell *matCellDef="let package">
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="deletePackageDialog(package);">
          <mat-icon>delete</mat-icon>
          <span>Delete</span>
        </button>
        <button mat-menu-item (click)="updatePackageDialog(package)">
          <mat-icon>edit</mat-icon>
          <span>Edit</span>
        </button>       
      </mat-menu>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let package; columns: displayedColumns;" routerLink="/packages/{{package.id}}"></tr>
</table>

<mat-paginator #paginator [length]="10" [pageSize]="itemsCount" [pageSizeOptions]="[10, 20, 30, 50]" showFirstLastButtons>

</mat-paginator>

</div>