<div class="course-item {{status}} {{disabled ? 'disabled' : ''}}">

  <div fxLayout="row" fxLayoutAlign="space-between start">
    <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="80" (click)="openCourseDetailsDialog(course)">
      <div fxLayout="row" fxLayoutAlign="start center">
        <div class="icon-number-wrapper">
          <p class="course-number">
            {{ course.subject }} {{course.catalogNumber}}
          </p>
          <div [ngSwitch]="status">
            <i *ngSwitchCase="'in-progress'" class="material-icons in-progress-icon">check_circle</i>
            <i *ngSwitchCase="'waitlist'" class="material-icons problem-icon">report_problem</i>
            <i *ngSwitchCase="'incomplete'" class="material-icons error-icon">error</i>
          </div>
        </div>
      </div>
      <div fxLayout="row" fxLayoutAlign="start center">
        <p class="course-title">{{course.title}}</p>
      </div>
    </div>

    <div *ngIf="!disabled" fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
      <div fxLayout="row" fxLayoutAlign="end center">
        <mat-icon [matMenuTriggerFor]="courseMenu" (menuOpened)="onMenuOpen()" aria-label="Course menu" matTooltip="Course Menu" matTooltipPosition="right"
          class="material-icons">more_horiz</mat-icon>
        <mat-menu #courseMenu="matMenu" class="course-item-menu">
          <button mat-menu-item (click)="openCourseDetailsDialog(course)">Course Details</button>
          <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup">Move</button>
          <mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
            <button mat-menu-item (click)="moveToSavedForLater(course)" *ngIf="type != 'saved'" class="saved-for-later-list">Saved for later</button>
            <button mat-menu-item *ngFor="let term of visibleTerms" (click)="(type == 'saved') ? addToTerm(course, term) : switchTerm(course, term)">{{ term | getTermDescription }}</button>
          </mat-menu>
          <button mat-menu-item (click)="openRemoveConfirmationDialog()">Remove</button>
        </mat-menu>
      </div>
      <div fxLayout="row" fxLayoutAlign="end center">
        <p class="course-credits">{{ course.credits ? course.credits : course.creditRange }} Cr</p>
      </div>
    </div>
  </div>
</div>