<mat-sidenav-container [hasBackdrop]="mobileView.matches">
  <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">
      <mat-sidenav-content
        id="degree-plan-wrapper"
        role="region"
        cdkFocusRegionStart
        [ngClass]="{ isLoadingPlan: isLoadingPlan$ | async }"
        *ngIf="(degreePlan$ | async) as degreePlan">

        <cse-alert-container
          [alerts]="alerts$ | async"
          (dismiss)="onDismissAlert($event)">
        </cse-alert-container>

        <div
          fxLayout="row"
          fxLayoutGap="20px"
          fxLayoutAlign="start center"
          style="margin: 24px 0px 24px 24px;">
          <mat-form-field class="degree-plans-form-field" floatLabel="always">
            <mat-label>Degree Plans</mat-label>
            <mat-select
              id="maincontent"
              attr.aria-label="Degree plans list - {{ degreePlan.name }} selected"
              [disabled]="isLoadingPlan$ | async"
              placeholder="Degree Plans list"
              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"
                  aria-label="Primary plan selected"
                  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
                  id="primary-plan-star"
                  class="primary-star"
                  *ngIf="degreePlan.primary"
                  aria-label="Primary plan"
                  alt="Primary degree plan star"
                  matTooltip="Primary plan"
                  matTooltipPosition="above"
                  >star_rate</mat-icon>
                  <span *ngIf="degreePlan.primary" aria-labelledby="primary-plan-star"></span>
                <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"
              matTooltip="Plan settings"
              matTooltipPosition="above"
              >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>
            <a mat-menu-item target="_blank" href="/api/degreeplanpdf?roadmapId={{ degreePlan.roadmapId }}&hideGrades={{ !(showGrades$ | async) }}">Create 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>
        </div>

        <div
          id="year-wrapper"
          fxLayout="column"
          fxLayoutGap="20px"
          fxLayoutAlign="start stretch"
          style="margin:24px 24px 72px 24px">
          <div id="year-mask" *ngIf="(isLoadingPlan$ | async)"></div>
          <div id="plan-controls">
            <div id="grades-toggle-wrapper">
                <mat-slide-toggle
                  color="primary"
                  labelPosition="before"
                  [checked]="showGrades$"
                  (change)="changeGradeVisibility($event)">
                  Show Grades
                </mat-slide-toggle>
            </div>

            <div class="expand-collapse">
              <button mat-button color="primary" (click)="toggleAllYears(true)" aria-label="Expand All Years">Expand All</button>
              <span>|</span>
              <button mat-button color="primary" (click)="toggleAllYears(false)" aria-label="Collapse All Years">Collapse All</button>
            </div>
          </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>
        <!-- Menu side nav -->
      <mat-sidenav position="end" role="region" cdkFocusRegionEnd (closedStart)="closeSidenav()"
        [mode]="mobileView.matches ? 'over' : 'side'"
        [disableClose]="!mobileView.matches"
        [opened]="(isSidenavOpen$ | async) || !mobileView.matches">
        <cse-sidenav-menu-item></cse-sidenav-menu-item>
        <p class="version-number">v{{ version }}</p>
      </mat-sidenav>
    </mat-sidenav-container>
  </mat-sidenav-content>
  <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 aria-label="Close course search sidenav" class="close-btn" (click)="closeCourseSearch()">
        <i class="material-icons" alt="Close course search sidenav" matTooltip="Close sidenav" matTooltipPosition="above">close</i>
      </button>
    </mat-toolbar>
    <cse-course-search></cse-course-search>
  </mat-sidenav>
</mat-sidenav-container>