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

    <cse-course-search></cse-course-search>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-progress-bar id="loading-plan-progress" mode="indeterminate" *ngIf="isLoadingPlan$ | async"></mat-progress-bar>
    <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 id="degree-plan-wrapper" [ngClass]="{ isLoadingPlan: (isLoadingPlan$ | async) }" *ngIf="(degreePlan$ | async) as degreePlan">
        <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px" fxLayoutAlign="start center" style="margin: 24px 0px 24px 24px;">
          <mat-form-field>
            <mat-select
              [disabled]="isLoadingPlan$ | async"
              placeholder="Degree Plans"
              class="degree-plan-selector"
              [value]="degreePlan.roadmapId"
              [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" [disabled]="isLoadingPlan$ | async">
            <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()">Print plan</button>
            <button mat-menu-item (click)="onSharePlanClick()">Share plan</button>
          </mat-menu>
        </div>

        <div id="year-wrapper" fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
          <div id="year-mask" *ngIf="isLoadingPlan$ | async"></div>
          <mat-accordion multi="true">
            <ng-container *ngFor="let yearCode of (yearCodes$ | async)">
              <cse-year-container [yearCode]="yearCode"></cse-year-container>
            </ng-container>
          </mat-accordion>
        </div>

      </mat-sidenav-content>
    </mat-sidenav-container>
  </mat-sidenav-content>
</mat-sidenav-container>