term-container.component.html

<mat-card class="term-container">
	<div class="term-inner">
		<div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
			<h2>{{ courses[0].termCode | getTermDescription }}</h2>
			<div fxLayout="row" fxLayoutAlign="end center">
				<p class="text-right semi-bold credits">{{ getTotalCredits() }} Cr</p>
				<button mat-icon-button>
					<mat-icon aria-label="Open dialog with notes in this term" class="add-note-icon" (click)="openNotesDialog(false, courses[0].termCode)" matTooltip="Add Note" matTooltipPosition="above">note_add</mat-icon>
					<!-- <mat-icon aria-label="Open dialog with notes in this term" class="add-note-icon" (click)="openNotesDialog(false, term.termCode)" matTooltip="Edit Note" matTooltipPosition="above">insert_drive_file</mat-icon> -->
				 </button>
			</div>
		</div>
		<div cdkDropList
			id="term-{{courses[0].termCode}}"
			[cdkDropListData]="courses"
			[cdkDropListConnectedTo]="courses[0].termCode"
			class="course-list"
			(cdkDropListDropped)="drop($event)">
		
			<ng-container *ngFor="let note of notes">
				<div *ngIf="note.termCode == courses[0].termCode" class="note-item" (click)="openNotesDialog(note, note.termCode)" >
					<p class="semi-bold">Note</p>
					<p class="note-excerpt">{{ note.note }}</p>
				</div>
			</ng-container>
			<div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of courses" cdkDrag>
				<div class="course-wrapper-inner">
					<!-- <cse-course-item 
						[course]="course" 
         				[favoriteCourses]="favoriteCourses"
                        [termsByAcademicYear]="termsByAcademicYear"
						[status]="'in-progress'"
					></cse-course-item> -->
					<cse-course-item [course]="course"></cse-course-item>
				</div>
			</div>
		</div>
	</div>
	<div class="add-new-wrapper">
		<button mat-raised-button (click)="openAddSidenav()">+ Add Course</button>
	</div>
</mat-card>