course-details-dialog.component.html

<mat-toolbar color="primary" class="dialog-toolbar">
	<span class="dialog-toolbar-title">Course Details</span>
	<button mat-button mat-dialog-close class="close-btn"><i class="material-icons">clear</i></button>
</mat-toolbar>

<mat-dialog-content id="course-details-content" class="mat-typography dialog-with-toolbar ">

	<div fxLayout="row">
		<div fxLayout="row" fxLayout.lt-md="column" fxFlex="100" fxLayoutGap="10px" class="course-details-header">
			<div fxFlex="50" class="course-detail-title" fxLayoutAlign="start center">
				<h3>{{ courseDetails.fullCourseDesignation | titlecase }}<span class="course-detail-subtitle">{{ courseDetails.title }}</span></h3>
			</div>
			<div fxFlex="50" fxLayout="row" fxLayoutAlign="end start" >
				<mat-dialog-actions>
					<button mat-button class="btn-secondary" mat-dialog-close>Delete</button>
					<button mat-raised-button class="btn-primary mat-button">See Sections</button>
				</mat-dialog-actions>
			</div>
		</div>
	</div>

	<div fxLayout="column" fxLayoutAlign="space-around start" fxLayoutGap="10px" class="course-details-content">
		<p>{{ courseDetails.description }}</p>
		<p *ngIf="courseDetails.advisoryPrerequisites && courseDetails.advisoryPrerequisites.length > 0"><span class="semi-bold">Requisites:</span>{{ courseDetails.advisoryPrerequisites }}</p>
		
		<ul class="courseDetails-list">
			<li *ngIf="courseDetails.creditRange"><span class="semi-bold">Credits:</span> {{ courseDetails.creditRange }}</li>
			<li *ngIf="courseDetails.levels && courseDetails.levels.length > 0"><span class="semi-bold">Level: </span>
				<span *ngFor="let levels of courseDetails.levels">
					<span class="list-comma">{{ levels.description }}</span>
				</span>
			</li>
			<li *ngIf="courseDetails.breadths && courseDetails.breadths.length > 0"><span class="semi-bold">Breadth: </span>
				<span *ngFor="let breadths of courseDetails.breadths">
					<span class="list-comma">{{ breadths.description }}</span>
				</span>
			</li>
			<li *ngIf="courseDetails.lettersAndScienceCredits"><span class="semi-bold">L&amp;S Credit Type:</span>
				{{ courseDetails.lettersAndScienceCredits.description }}
			</li>
		</ul>

		<ul class="courseDetails-list">
			<li *ngIf="courseDetails.lastTaught"><span class="semi-bold">Last Taught:</span> {{ courseDetails.lastTaught | getTermDescription }}</li>
			<li *ngIf="(courseDetails.gradCourseWork || courseDetails.workplaceExperience || courseDetails.foreignLanguage)" ><span class="semi-bold">Course Options:</span>
				<ul class="courseDetails-nested-list">
					<li>
						<span *ngIf="courseDetails.gradCourseWork">50% Graduate Coursework Requirement</span>
						<span *ngIf="courseDetails.workplaceExperience">{{ courseDetails.workplaceExperience.description }}</span>
						<span *ngIf="courseDetails.foreignLanguage">{{ courseDetails.foreignLanguage.description }}</span>
					</li>
				</ul>
			</li>
		</ul>

		<p class="semi-bold">Subject Notes:</p>
		<p>{{ courseDetails.subject.footnotes }}</p>

	</div>

	<div class="course-details-footer">
		<p class="semi-bold">{{ courseDetails.fullCourseDesignation | titlecase }} Information:</p>
		<div fxLayout="row">
			<div fxLayout="row" fxFlex="100" fxLayoutGap="10px">
				<div fxFlex="100" class="course-detail-title" fxLayoutAlign="start center">
					<a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.departmentURI }}">Website</a>
					<a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.undergraduateCatalogURI }}">Undergraduate Info</a>
					<a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.graduateCatalogURI }}">Graduate Info</a>
				</div>
			</div>
		</div>
	</div>

</mat-dialog-content>