<div class="term-container">
  <div
    id="saved-courses"
    class="course-list"
    cdkDropList
    [cdkDropListData]="courses$ | async"
    [cdkDropListConnectedTo]="dropZoneIds$ | async"
    (cdkDropListDropped)="drop($event)">
    <div class="course-wrapper" *ngFor="let course of courses$ | async" cdkDrag [cdkDragData]="course">
      <div class="course-wrapper-inner">
        <cse-course-item [course]="course" type="saved" class="course-favorite"></cse-course-item>
      </div>
    </div>

    <div *ngIf="(courses$ | async).length === 0" class="no-courses text-center semi-bold">
      <p class="no-courses text-center semi-bold">No courses saved for later</p>
    </div>
  </div>
</div>