<div class="course-item {{status}} {{disabled ? 'disabled' : ''}}">

	<div fxLayout="row" fxLayoutAlign="space-between start">
		<div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="80" (click)="openCourseDetailsDialog(course)">
			<div fxLayout="row" fxLayoutAlign="start center">
				<div class="icon-number-wrapper">
					<p class="course-number">
						{{ subjects[course.subjectCode] }} {{course.catalogNumber}}
					</p>
					<div [ngSwitch]="status">
						<i *ngSwitchCase="'complete'" class="material-icons complete-icon">check_circle</i>
						<i *ngSwitchCase="'in-progress'" class="material-icons in-progress-icon">check_circle</i>
						<i *ngSwitchCase="'waitlist'" class="material-icons problem-icon">report_problem</i>
						<i *ngSwitchCase="'incomplete'" class="material-icons error-icon">error</i>
					</div>
				</div>
			</div>
			<div fxLayout="row" fxLayoutAlign="start center">
				<p class="course-title">{{course.title}}</p>
			</div>
		</div>

		<div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
			<div fxLayout="row" fxLayoutAlign="end center">
				<mat-icon [matMenuTriggerFor]="courseMenu" aria-label="Course menu" matTooltip="Course Menu" matTooltipPosition="right" class="material-icons">more_horiz</mat-icon>
				<mat-menu #courseMenu="matMenu" class="course-item-menu">
					<button mat-menu-item (click)="openCourseDetailsDialog(course)">Course Details</button>
					<button mat-menu-item [matMenuTriggerFor]="academicYearsGroup">Move</button>
						<mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
							<!-- <button mat-menu-item (click)="moveToFavorites(course)" *ngIf="!savedForLater" class="favorites-list">Saved for later</button>
							<button mat-menu-item *ngFor="let termCode of termCodes" (click)="savedForLater ? addToTerm(termCode) : switchTerm(termCode)">{{ termCode | getTermDescription }}</button> -->
						</mat-menu>
					<button *ngIf="!disabled" mat-menu-item (click)="openRemoveConfirmationDialog()">Remove</button>
				</mat-menu>
			</div>
			<div fxLayout="row" fxLayoutAlign="end center">
				<p class="course-credits">{{ course.credits !== undefined ? course.credits : "--" }} Cr</p>
			</div>
		</div>
	</div>
</div>