<div
  class="course-item {{ disabled ? 'disabled' : '' }} {{ status }}"
  isFocusable="true"
  isTabbable="true"
  tabindex="0"
  (click)="openCourseDetailsDialog()"
  (keyup)="detectEnter($event)">
  <div fxLayout="row" fxLayoutAlign="space-between start">
    <div
      fxLayout="column"
      fxLayoutAlign="space-between start"
      fxFlex="80"
      aria-haspopup="true">
      <div fxLayout="row" fxLayoutAlign="start center">
        <div class="icon-number-wrapper">
          <p cdkFocusRegionStart class="course-number">
            {{ course | courseDescription }}
          </p>
          <span [ngSwitch]="status">
            <i
              *ngSwitchCase="'InProgress'"
              class="material-icons in-progress-icon"
              alt="Course is in progress"
              aria-label="Course is in progress"
              matTooltip="Course is in progress"
              matTooltipPosition="above">
              check_circle
            </i>
            <i
              *ngSwitchCase="'Waitlisted'"
              class="material-icons problem-icon"
              alt="Course is waitlisted"
              aria-label="Course is waitlisted"
              matTooltip="Course is waitlisted"
              matTooltipPosition="above">
              report_problem
            </i>
            <i
              *ngSwitchCase="'NotOfferedInTerm'"
              class="material-icons error-icon"
              alt="Course is not offered in term"
              aria-label="Course is not offered in term"
              matTooltip="Course is not offered in term"
              matTooltipPosition="above">
              error
            </i>
            <i
              *ngSwitchCase="'DoesNotExist'"
              class="material-icons not-offered-icon"
              alt="Course is no longer offered"
              aria-label="Course is no longer offered"
              matTooltip="Course is no longer offered"
              matTooltipPosition="above">
              not_interested
            </i>
          </span>
        </div>
      </div>
      <div fxLayout="row" fxLayoutAlign="start center">
        <p class="course-title">
          {{ course.title }}
        </p>
      </div>
    </div>

    <div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
      <div *ngIf="!disabled" fxLayout="row" fxLayoutAlign="end center">
        <button
          class="course-item-menu-button"
          cseClickStopPropigation
          mat-icon-button
          aria-label="Open course menu"
          [matMenuTriggerFor]="courseMenu"
          (menuOpened)="onMenuOpen()">
          <mat-icon aria-label="Course menu" alt="Course menu" matTooltip="Course menu" matTooltipPosition="above">
            more_horiz
          </mat-icon>
        </button>
        <mat-menu #courseMenu="matMenu" class="course-item-menu" isFocusable="true" isTabbable="true">
          <ng-template matMenuContent>
            <button mat-menu-item (click)="openCourseDetailsDialog()" aria-describedby="course-details-content" attr.aria-label="Open dialog to see {{ course | courseDescription }} course details">
              Course details
            </button>
            <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup" attr.aria-label="Select to move {{ course | courseDescription }} to a different term">
              Move to
            </button>
            <mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
                <ng-template matMenuContent>
                  <button mat-menu-item *ngFor="let term of (droppableTermCodes$ | async)"
                    attr.aria-labelledby="Move {{ course | courseDescription }} course to {{ term | getTermDescription }} term"
                    (click)="onMove(term)">
                    {{ term | getTermDescription }}
                  </button>
              </ng-template>
            </mat-menu>
            <button
              mat-menu-item
              attr.aria-label="Move {{ course | courseDescription }} course to Saved for later"
              *ngIf="type !== 'saved'"
              (click)="onSaveForLater()">
              Save for later
            </button>
            <button
              mat-menu-item
              attr.aria-label="Remove {{ course | courseDescription }} course from my plan"
              *ngIf="type !== 'search'"
              (click)="onRemove()">
              Remove
            </button>
          </ng-template>
        </mat-menu>
      </div>
      <div *ngIf="disabled" fxLayout="row" fxLayoutAlign="end center">
        <p *ngIf="!(showGrades$ | async)">{{ '&nbsp;' }}</p>
        <p *ngIf="showGrades$ | async" attr.aria-label="grade {{ course.grade }}">{{ course.grade || '&nbsp;' }}</p>
      </div>
      <div fxLayout="row" fxLayoutAlign="end center">
        <p *ngIf="type !== 'saved'"
          class="course-credits"
          cdkFocusRegionEnd>
          <ng-container *ngIf="course.credits !== undefined || course.creditRange !== undefined">
            <span attr.aria-label="{{ course.credits ? course.credits : course.creditRange }} credits">{{ course.credits ? course.credits : course.creditRange }} Cr</span>
          </ng-container>
        </p>
      </div>
    </div>
  </div>
</div>