<div class="term-container">
	<div
		cdkDropList
		id="favoriteCourse-dropZone"
		class="course-list"
		[cdkDropListData]="favoriteCourses"
		[cdkDropListConnectedTo]="favoriteDropZone"
		(cdkDropListDropped)="drop($event)">
		<div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of favoriteCourses" cdkDrag>
			<div class="course-wrapper-inner">
				<cse-course-item [course]="course" [status]="'favorite'" class="course-favorite"></cse-course-item>
			</div>
		</div>
		<p *ngIf="!favoriteCourses || favoriteCourses.length === 0" class="no-courses text-center semi-bold">No Favorite Courses</p>
	</div>
</div>