<div class="term-container"
    aria-label="List of saved for later courses"
    id="saved-courses"
    isFocusable="true"
    isTabbable="true"
    tabindex="0">
  <div
    class="course-list"
    cdkDropList
    [cdkDropListData]="courses$ | async"
    [cdkDropListConnectedTo]="dropZoneIds$ | async"
    (cdkDropListEntered)="dragEnter()"
    (cdkDropListExited)="dragExit()"
    (cdkDropListDropped)="drop($event)">
    <div
      class="course-wrapper"
      *ngFor="let course of courses$ | async"
      cdkDrag
      [cdkDragDisabled]="mobileView.matches"
      [cdkDragData]="course">
      <div class="course-wrapper-inner">
        <cse-course-item role="button" aria-describedby="saved-courses" [course]="course" type="saved" class="course-favorite"></cse-course-item>
      </div>
    </div>

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