favorites-container.component.html

<div class="term-container">
	<div 
		id="saved-courses"
		class="course-list"
		cdkDropList
		[cdkDropListConnectedTo]="dropZones$ | async"
		class="course-list"
		(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"
					[savedForLater]="true"
					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>