<header>
	<cse-header></cse-header>
	<cse-navigation></cse-navigation>
</header>
<main>
	<mat-sidenav-container class="example-container" hasBackdrop="false" style="height: 100vh;">
		<mat-sidenav mode="over" position="end" #rightAddCourse id="course-search-sidenav">
			<mat-toolbar color="primary" class="dialog-toolbar">
				<span class="dialog-toolbar-title">Course Search</span>
				<button mat-button class="close-btn" (click)="rightAddCourse.close();"><i class="material-icons">clear</i></button>
			</mat-toolbar>

			<div [formGroup]='coursesForm' class="add-course-form" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
				<mat-form-field>
					<input type="text" placeholder="Term" aria-label="Term" matInput [formControl]="" [matAutocomplete]="term">
					<mat-autocomplete #term="matAutocomplete">
						<mat-option *ngFor="let term of (coursesData$ | async)" [value]="term[0].termCode | getTermDescription">
							{{ term[0].termCode | getTermDescription }}
						</mat-option>
					</mat-autocomplete>
				</mat-form-field>

				<mat-form-field>
					<input matInput placeholder="Subject" [matAutocomplete]="auto" formControlName='coursesInput' required>
					<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
						<mat-option *ngFor="let course of (courses | async)" [value]="course.textSuggest">
							<span>{{ course.textSuggest }} </span>
						</mat-option>
					</mat-autocomplete>
					<mat-error *ngIf="coursesInput.invalid">Please select an existing Subject or 'All'.</mat-error>
				</mat-form-field>
				<mat-form-field class="example-full-width">
					<input matInput placeholder="Keyword, number" value="">
				</mat-form-field>

				<div class="search-results-toolbar mat-typography" fxLayout="row" fxLayoutAlign="space-between center" style="padding: 12px 22px; background-color: #EDF1F3">
					<h3 style="margin: 0px;">15 results</h3>
					<span class="mat-button">Reset Search</span>
				</div>

				<div id="course-search-results" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
					<mat-form-field>
						<mat-select placeholder="Order by">
							<mat-option>Relevance</mat-option>
							<mat-option>Subject</mat-option>
							<mat-option>Catalog Number</mat-option>
						</mat-select>
					</mat-form-field>
					<cse-course-item *ngFor="let course of (courses | async)" (click)="openCourseDetailsDialog(course)">
						<div class="course-item">
							<p class="course-number">{{ course.payload.subject.shortDescription }} {{ course.payload.catalogNumber }}</p>
							<p class="course-title">{{ course.textSuggest }}</p>
						</div>
					</cse-course-item>
				</div>
			</div>
		</mat-sidenav>

		<mat-sidenav-content>
			<router-outlet></router-outlet>
		</mat-sidenav-content>

	</mat-sidenav-container>
</main>