<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">keyboard_arrow_right</i></button>
		</mat-toolbar>
			
		<form [formGroup]='courseSearchForm' (ngSubmit)="search()" class="add-course-form" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
			<mat-form-field>
				<mat-select placeholder="Term" formControlName="term">
						<mat-option value="0000" selected>All</mat-option>
						<mat-option *ngFor="let term of activeTerms$ | async" [value]="term">{{term | getTermDescription}}</mat-option>
					</mat-select>
			</mat-form-field>

			<mat-form-field>
				<mat-select placeholder="Subject" formControlName="subject" required>
					<mat-option value="all">All</mat-option>
					<mat-option *ngFor="let subject of (subjects$ | async) | keyvalue" [value]="subject.key">
						{{subject.value}}
					</mat-option>
				</mat-select>
			</mat-form-field>

			<mat-form-field>
				<div class="search-input-wrapper">
					<input id="keyword-field" matInput placeholder="Keyword, number" formControlName="search" value="">
					<button id="search-button" mat-icon-button aria-label="Search" matSuffix style="margin-top: -10px;"><i class="material-icons">search</i></button>
				</div>
			</mat-form-field>
		</form>

		<div *ngIf="hasResults || isLoading">
			<div class="search-results-toolbar mat-typography" fxLayout="row" fxLayoutAlign="space-between center" style="padding: 12px 22px; background-color: #EDF1F3; min-height: 60px;">
				<h3 *ngIf="isLoading" style="margin: 0px;">Searching for courses...</h3>
				<h3 *ngIf="hasResults" style="margin: 0px;">{{queriedCourses.length}} result(s)</h3>
				<button *ngIf="hasResults" mat-button (click)="resetSearch()">Reset Search</button>
			</div>
			<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
			
			<div id="course-search-results" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
				<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(degreePlan)">Rename plan</button>
						<button mat-menu-item (click)="onDeletePlanClick(degreePlan)">Delete plan</button>
						<button mat-menu-item (click)="onMakePrimayClick(degreePlan)">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>