<mat-sidenav-container id="plans-container">
	<!-- Menu side nav -->
	<mat-sidenav #rightMenu position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
		<cse-sidenav-menu-item [favoriteDropZone]="getTermDropZone()"></cse-sidenav-menu-item>
	</mat-sidenav>

	<mat-sidenav-content>
		<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" [disableOptionCentering]="true" [(ngModel)]="selectedDegreePlan">
					<mat-option *ngFor="let degreePlan of degreePlans" [value]="degreePlan.roadmapId">
						{{ degreePlan.name }}
					</mat-option>
				</mat-select>
			</mat-form-field>
			<button mat-button class="btn-primary">Check Plan (DARS)</button>
			<button id="menu-toggle-btn" mat-button (click)="rightMenu.toggle()">
				<i *ngIf="rightMenu.opened" class="material-icons">chevron_right</i>
				<i *ngIf="!rightMenu.opened" class="material-icons">chevron_left</i>
			</button>
		</div>

		<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
			<mat-accordion multi="true">
				<ng-container *ngFor="let term of coursesData$ | async">
					<mat-expansion-panel class="year-container"[expanded]="true">
						<mat-expansion-panel-header>
							<mat-panel-title>
								{{ term[0].year | academicYearState }}
							</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-1{{term[0].year}}2"
								fxFlex="33%"
								[termCode]="term[0].termCode"
								[courses]="term[0].courses"></cse-term-container>
							<cse-term-container
								id="term-1{{term[0].year}}4"
								fxFlex="33%"
								[termCode]="term[1].termCode"
								[courses]="term[1].courses"></cse-term-container>
							<cse-term-container
								id="term-1{{term[0].year}}6"
								fxFlex="33%"
								[termCode]="term[2].termCode"
								[courses]="term[2].courses"></cse-term-container>
						</div>
					</mat-expansion-panel>
				</ng-container>
			</mat-accordion>
		</div>
	</mat-sidenav-content>
</mat-sidenav-container>