<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></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"
					[value]="visibleRoadmapId$ | async"
					[disableOptionCentering]="true"
					(selectionChange)="handleDegreePlanChange($event)">
					<mat-option *ngFor="let degreePlan of allDegreePlans$ | async" [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 year of termsByYear$ | async">
					<mat-expansion-panel class="year-container"[expanded]="true">
						<mat-expansion-panel-header>
							<mat-panel-title>
								{{ year.twoDigitYearCode | 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-{{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>