open-learning-exchange/planet

<div class="action-buttons" *ngIf="editable">
  <button mat-raised-button color="primary" i18n (click)="openAddReportDialog()">Add Report</button>
  <button mat-raised-button color="primary" i18n (click)="exportReports()">Export as CSV</button>
</div>
<mat-grid-list [cols]="columns" gutterSize="0.5rem" rowHeight="22rem" id="report-grid">
  <mat-grid-tile *ngFor="let report of reports" (click)="openReportDialog(report)">
    <mat-card>
      <mat-card-header>
        <mat-card-title i18n>Financial Report</mat-card-title>
        <mat-card-subtitle>{{ report.startDate | date : 'mediumDate' : '+0000' }} - {{ report.endDate | date : 'mediumDate' : '+0000' }}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <planet-teams-reports-detail [report]="report"></planet-teams-reports-detail>
      </mat-card-content>
      <mat-card-footer class="action-buttons margin-lr-10">
        <ng-container *ngIf="editable">
          <button mat-icon-button (click)="$event.stopPropagation(); openDeleteReportDialog(report)"><mat-icon>delete</mat-icon></button>
          <button mat-icon-button (click)="$event.stopPropagation(); openAddReportDialog(report)"><mat-icon>edit</mat-icon></button>
        </ng-container>
        <button mat-button i18n>View Report</button>
      </mat-card-footer>
    </mat-card>
  </mat-grid-tile>
</mat-grid-list>