term-container.component.html

<mat-card class="term-container">
	<div class="term-inner">
		<div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
			<h2>{{ term.termCode | getTermDescription }}</h2>
			<div fxLayout="row" fxLayoutAlign="end center">
				<p class="text-right semi-bold credits">{{ getTotalCredits() }} Cr</p>
				<button mat-icon-button>
					<ng-container *ngIf="term.note as note; else newNote">
						<mat-icon
							aria-label="Open dialog with notes in this term"
							class="add-note-icon"
							(click)="openNotesDialog()"
							matTooltip="Edit Note"
							matTooltipPosition="above">insert_drive_file</mat-icon>
					</ng-container>
					<ng-template #newNote>
						<mat-icon
							aria-label="Open dialog with notes in this term"
							class="add-note-icon"
							(click)="openNotesDialog()"
							matTooltip="Add Note"
							matTooltipPosition="above">note_add</mat-icon>
					</ng-template>
				 </button>
			</div>
		</div>
		<div cdkDropList
			id="term-{{term.termCode}}"
			[cdkDropListData]="term.courses"
			[cdkDropListConnectedTo]="dropZones$ | async"
			class="course-list"
			(cdkDropListDropped)="drop($event)">

			<ng-container *ngIf="term.note as note">
				<div class="note-item" (click)="openNotesDialog()">
					<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 term.courses" cdkDrag>
				<div class="course-wrapper-inner">
					<cse-course-item [course]="course"></cse-course-item>
				</div>
			</div>

			<div class="no-courses" *ngIf="term.courses.length === 0">
				<p>No Courses Taken</p>
			</div>
		</div>
	</div>
	<div class="add-new-wrapper">
		<button mat-raised-button (click)="openAddSidenav()">+ Add Course</button>
	</div>
</mat-card>