<div id="sidenav-container" fxLayout="column" fxLayout.sm="column">
  <mat-expansion-panel id="course-keys-container" expanded="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <h3>Course Key</h3>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-list id="course-key-list" role="list">
      <mat-list-item role="listitem">
        <i
          class="material-icons in-progress-icon"
          alt="Course in progress icon"
          matTooltip="Course in progress"
          matTooltipPosition="left"
          >check_circle</i>
        Course is currently in progress
      </mat-list-item>
      <mat-list-item role="listitem">
        <i
          class="material-icons problem-icon"
          alt="Course is waitlisted icon"
          matTooltip="Course is waitlisted"
          matTooltipPosition="left">report_problem</i>
        Course is waitlisted
      </mat-list-item>
      <mat-list-item role="listitem">
        <i
          class="material-icons cancel-icon"
          alt="Course is incomplete icon"
          matTooltip="Course is incomplete"
          matTooltipPosition="left">cancel</i>
        Course is incomplete
      </mat-list-item>
      <mat-list-item role="listitem">
        <i
          class="material-icons error-icon"
          alt="Course not offered in term icon"
          matTooltip="Course not offered in term"
          matTooltipPosition="left">error</i>
        Course not offered in term
      </mat-list-item>
      <mat-list-item>
        <i
          class="material-icons not-offered-icon"
          alt="Course no loger offered icon"
          matTooltip="Course no loger offered"
          matTooltipPosition="left">remove</i>
        Course no longer offered
      </mat-list-item>
    </mat-list>
  </mat-expansion-panel>
  <mat-expansion-panel id="course-keys-container" expanded="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <h3>Saved for later</h3>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <cse-saved-for-later-container></cse-saved-for-later-container>
  </mat-expansion-panel>

  <mat-expansion-panel id="menu-items-container" expanded="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <h3>Menu</h3>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <div>
      <button mat-button class="sidenav-link-btn" (click)="print()">
        <i
          class="material-icons"
          alt="Print plan icon"
          matTooltip="Print plan"
          matTooltipPosition="left">print</i>
        Print
      </button>
      <a
        target="_blank"
        href="/api/degreeplanpdf?roadmapId={{ planId }}"
        mat-button
        class="sidenav-link-btn">
        <svg
          alt="Download PDF icon"
          matTooltip="Download PDF"
          matTooltipPosition="left"
          class="material-icons"
          style="width:24px;height:24px"
          viewBox="0 0 24 24">
          <path fill="#0479a8" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
        </svg>
        Download PDF
      </a>
      <button mat-button class="sidenav-link-btn" (click)="onCreatePlanClick()">
        <i
          class="material-icons"
          alt="Add degree plan icon"
          matTooltip="Add degree plan"
          matTooltipPosition="left"
          >add_box</i>
        Add Degree Plan
      </button>
      <button mat-button class="sidenav-link-btn" (click)="onAddAcademicYear()">
        <svg
          alt="Add Academic Year icon"
          matTooltip="Add academic year"
          matTooltipPosition="left"
          class="material-icons"
          style="width:24px;height:24px"
          viewBox="0 0 24 24">
          <path
            fill="#0479a8"
            d="M19,19V7H5V19H19M16,1H18V3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1M11,9H13V12H16V14H13V17H11V14H8V12H11V9Z"/>
        </svg>
        Add Academic Year
      </button>
    </div>
  </mat-expansion-panel>
</div>