<mat-sidenav-container hasBackdrop="false">

	<mat-sidenav #addMenu position="end" mode="over" [opened]="isCourseSearchOpen$ | async">
		<mat-toolbar color="primary" class="dialog-toolbar">
			<span class="dialog-toolbar-title">Course Search</span>
			<button mat-button class="close-btn" (click)="closeCourseSearch();"><i class="material-icons">clear</i></button>
		</mat-toolbar>
	
		<div [formGroup]='courseSearchForm' 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" formControlName='coursesInput' required>
				<!-- <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>

			<button mat-button (click)="search()">Search <i class="material-icons">search</i></button>

			<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>

				<div
					cdkDropList
					id="queried-courses-list"
					[cdkDropListData]="queriedCourses"
					[cdkDropListConnectedTo]="dropZones$ | async">
					<div 
					class="course-wrapper" 
					cdkDrag
					[cdkDragData]="course" 
					*ngFor="let course of this.queriedCourses">
						<div class="course-wrapper-inner">
							<cse-course-item [course]="course" type="course"></cse-course-item>
						</div>
					</div>
				</div>
			</div>
		</div>
	</mat-sidenav>


	<mat-sidenav-content>
			<mat-sidenav-container id="plans-container" *ngIf="(visibleDegreePlan$ | async) as degreePlan">
					<!-- Menu side nav -->
					<mat-sidenav #rightMenu position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
						<cse-sidenav-menu-item></cse-sidenav-menu-item>
					</mat-sidenav>
				
					<mat-sidenav-content id="degree-plan-wrapper">
						<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px" fxLayoutAlign="start center" style="margin: 24px 0px 24px 24px;">
							<mat-form-field>
								<mat-select
									placeholder="Degree Plans"
									class="degree-plan-selector"
									[value]="visibleRoadmapId$ | async"
									[disableOptionCentering]="true"
									(selectionChange)="handleDegreePlanChange($event)">
				
									<!-- Render the name of the currently visible degree plan. -->
									<mat-select-trigger *ngIf="(visibleDegreePlan$ | async) as degreePlan">
										<mat-icon class="primary-star" *ngIf="degreePlan.primary">star_rate</mat-icon>
										<span class="plan-name">{{degreePlan.name}}</span>
									</mat-select-trigger>
				
									<!-- Show all degree plans in the dropdown list and ddd a star next to the user's primary plan. -->
									<mat-option *ngFor="let degreePlan of (allDegreePlans$ | async)" [value]="degreePlan.roadmapId">
										<mat-icon class="primary-star" *ngIf="degreePlan.primary">star_rate</mat-icon>
										<span class="plan-name">{{degreePlan.name}}</span>
									</mat-option>
								</mat-select>
							</mat-form-field>
				
							<button mat-icon-button [matMenuTriggerFor]="degreePlanMenu">
								<mat-icon>settings</mat-icon>
							</button>
							<mat-menu #degreePlanMenu="matMenu">
						<button mat-menu-item (click)="onCreatePlanClick()">Create new plan</button>
						<button mat-menu-item (click)="onRenamePlanClick()">Rename plan</button>
						<button mat-menu-item (click)="onDeletePlanClick()">Delete plan</button>
						<button mat-menu-item (click)="onMakePrimayClick()">Make primary</button>
						<hr>
						<button mat-menu-item (click)="onPrintPlanClick()">Print plan</button>
								<button mat-menu-item (click)="onSharePlanClick()">Share plan</button>
							</mat-menu>
						</div>
				
						<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
							<mat-accordion multi="true" *ngIf="(firstActiveTermCode$ | async) as cutoffTermCode">
								<ng-container *ngFor="let year of termsByYear$ | async">
									<mat-expansion-panel class="year-container" [expanded]="year.expandedState"  (opened)="handleAcademicYearToggle(year)" (closed)="handleAcademicYearToggle(year)">
										<mat-expansion-panel-header>
											<mat-panel-title>
												{{ year.twoDigitYearCode | academicYearState:cutoffTermCode }}
											</mat-panel-title>
										</mat-expansion-panel-header>
										<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" class="term-container-wrapper">
											<cse-term-container
												id="term-{{year.fall.termCode}}"
												fxFlex="33%"
												[term]="year.fall"></cse-term-container>
											<cse-term-container
												id="term-{{year.spring.termCode}}"
												fxFlex="33%"
												[term]="year.spring"></cse-term-container>
											<cse-term-container
												id="term-{{year.summer.termCode}}"
												fxFlex="33%"
												[term]="year.summer"></cse-term-container>
										</div>
									</mat-expansion-panel>
								</ng-container>
							</mat-accordion>
						</div>
					</mat-sidenav-content>
				</mat-sidenav-container>
	</mat-sidenav-content>
</mat-sidenav-container>