<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>
		<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>
						<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)" [disabled]="degreePlan.primary">Delete plan</button>
        <button mat-menu-item (click)="onMakePrimayClick(degreePlan)" [disabled]="degreePlan.primary">Make primary</button>
        <hr>
        <button mat-menu-item (click)="onPrintPlanClick(degreePlan)">Print plan</button>
				<button mat-menu-item (click)="onSharePlanClick(degreePlan)">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>