<mat-sidenav-container hasBackdrop="false">
  <mat-sidenav
    #addMenu
    position="end"
    mode="over"
    role="region"
    [opened]="isCourseSearchOpen$ | async"
    (closedStart)="closeCourseSearch()">
    <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"
          alt="Close course search sidenav icon"
          matTooltip="Close sidenav"
          matTooltipPosition="above"
          >keyboard_arrow_right</i>
      </button>
    </mat-toolbar>

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

  <mat-sidenav-content role="main">
    <mat-progress-bar
      id="loading-plan-progress"
      mode="indeterminate"
      *ngIf="(isLoadingPlan$ | async)"
    ></mat-progress-bar>
    <mat-sidenav-container id="plans-container" ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar">
      <!-- Menu side nav -->
      <mat-sidenav
        #rightMenu
        position="end"
        role="region"
        cdkFocusRegionEnd
        [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"
        role="region"
        cdkFocusRegionStart
        [ngClass]="{ isLoadingPlan: isLoadingPlan$ | async }"
        *ngIf="(degreePlan$ | async) as degreePlan">
        <div
          fxLayout="row"
          fxLayoutGap="20px"
          fxLayoutAlign="start center"
          style="margin: 24px 0px 24px 24px;">
          <mat-form-field>
            <mat-select
              aria-label="Degree plans list"
              [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"
                  alt="Primary degree plan star icon"
                  matTooltip="Primary plan"
                  matTooltipPosition="above"
                  >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"
                  alt="Primary degree plan star icon"
                  matTooltip="Primary plan"
                  matTooltipPosition="above"
                  >star_rate</mat-icon>
                <span class="plan-name">{{ degreePlan.name }}</span>
              </mat-option>
            </mat-select>
          </mat-form-field>

          <button
            mat-icon-button
            aria-label="Degree plan settings"
            [matMenuTriggerFor]="degreePlanMenu"
            [disabled]="isLoadingPlan$ | async">
            <mat-icon
              aria-label="Degree plan settings"
              alt="Degree plan settings icon"
              matTooltip="Plan settings"
              matTooltipPosition="right"
              >settings</mat-icon>
          </button>
          <mat-menu #degreePlanMenu="matMenu">
            <button mat-menu-item (click)="onAddAcademicYear()">
              Add academic year
            </button>
            <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>
            <a mat-menu-item target="_blank" href="/api/degreeplanpdf?roadmapId={{ degreePlan.roadmapId }}">Download PDF</a>
            <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()"
            fxHide.lt-md="true"
            aria-label="Toggle sidenav menu">
            <i
              *ngIf="rightMenu.opened"
              class="material-icons"
              alt="Close sidenav icon"
              matTooltip="Close sidenav menu"
              matTooltipPosition="above"
              >chevron_right</i>
            <i
              *ngIf="!rightMenu.opened"
              class="material-icons"
              alt="Open sidenav icon"
              matTooltip="Open sidenav menu"
              matTooltipPosition="above"
              >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">
            <cse-year-container
              *ngFor="let yearCode of yearCodes$ | async; trackBy: trackYearCodes"
              [yearCode]="yearCode">
            </cse-year-container>
          </mat-accordion>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container> </mat-sidenav-content>
  </mat-sidenav-container>