<div class="term-container">
	<div
		cdkDropList
		id="saved-courses"
		class="course-list"
		[cdkDropListData]="favoriteCourses"
		[cdkDropListConnectedTo]="this.degreePlannerDataSvc.dropZones"
		(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"
						[savedForLater]="true"
						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>