<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 matTooltip="Plan settings" matTooltipPosition="right"
              >settings</mat-icon
            >
          </button>
          <mat-menu #degreePlanMenu="matMenu">
            <button mat-menu-item (click)="onRenamePlanClick(degreePlan)">
              Rename plan
            </button>
            <button
              mat-menu-item
              (click)="onMakePrimayClick(degreePlan)"
              [disabled]="degreePlan.primary"
            >
              Make primary
            </button>
            <button mat-menu-item (click)="onPrintPlanClick()">
              Print plan
            </button>
            <button mat-menu-item>
              Download PDF
            </button>
            <button
              mat-menu-item
              (click)="onDeletePlanClick(degreePlan)"
              [disabled]="degreePlan.primary"
            >
              Delete plan
            </button>
            <hr />
            <button mat-menu-item (click)="onCreatePlanClick()">
              Add degree plan
            </button>
          </mat-menu>

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