

<mat-card *ngFor="let course of courses" class="course-card mat-elevation-z10">

    <mat-card-header>

        <mat-card-title>{{course.description}}</mat-card-title>

    </mat-card-header>

    <img mat-card-image [src]="course.iconUrl">

    <mat-card-content>
        <p>{{course.longDescription}}</p>
    </mat-card-content>

    <mat-card-actions class="course-actions">

        <button mat-raised-button color="primary" [routerLink]="['/courses', course.url]">
            VIEW
        </button>

      <button mat-mini-fab color="accent">
        <mat-icon class="add-course-btn" (click)="editCourse(course)">edit</mat-icon>
      </button>

      <button mat-mini-fab color="warn">
        <mat-icon class="add-course-btn" (click)="onDeleteCourse(course)">delete</mat-icon>
      </button>

    </mat-card-actions>

</mat-card>
