<li class="course" [coursesHighlight]="course.creatingDate">
  <div class="row">
    <div class="col-10">
      <div class="media">
        <img class="d-flex mr-3" src="{{ course.thumb }}" alt="{{ course.thumbAlt }}">
        <div class="media-body">
          <h3 class="mt-0">{{ course.title | uppercase }} id#{{ course.id }}</h3>
          <p>{{ course.description }}</p>
          <p>
            <b>Duration:</b> {{ course.duration | coursesDuration }}
            <span *ngIf="course.topRated" ngClass="gold">&#9733;</span> |
            <b>Date:</b> {{ course.creatingDate | date }}</p>
        </div>
      </div>
    </div>
    <div class="col text-right">
      <button type="button" (click)="handleEdit(course.id)" class="btn btn-primary">Edit</button>
      <courses-delete [course]="course"></courses-delete>
    </div>
  </div>
</li>
