term-container.component.html

<mat-card class="term-container">
  <div class="term-inner">
    <div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
      <h2>{{ termCode | getTermDescription }}</h2>
      <div fxLayout="row" fxLayoutAlign="end center">
        <p class="text-right semi-bold credits">{{ credits$ | async }} Cr</p>
        <button mat-icon-button>
          <ng-container *ngIf="(note$ | async) as note; else newNote">
            <mat-icon
              aria-label="Open dialog with notes in this term"
              color="primary"
              matTooltip="Edit Note"
              (click)="openNotesDialog(note)"
              matTooltipPosition="above">
              insert_drive_file
            </mat-icon>
          </ng-container>
          <ng-template #newNote>
            <mat-icon
              aria-label="Open dialog with notes in this term"
              color="primary"
              matTooltip="Add Note"
              (click)="openNotesDialog()"
              matTooltipPosition="above">
              note_add
            </mat-icon>
          </ng-template>
         </button>
      </div>
    </div>
    <div
      id="term-{{termCode}}"
      cdkDropList
      [cdkDropListData]="(term$ | async).termCode"
      [cdkDropListConnectedTo]="dropZoneIds$ | async"
      (cdkDropListDropped)="drop($event)">

      <!-- Render term note (if it exists) -->
      <ng-container *ngIf="note$ | async as note">
        <div class="note-item" (click)="openNotesDialog(note)">
          <p class="semi-bold">Note</p>
          <p class="note-excerpt">{{ note.note }}</p>
        </div>
      </ng-container>

      <!-- Render list of courses in this term -->
      <div
        class="course-wrapper"
        *ngFor="let course of courses$ | async"
        cdkDrag
        [cdkDragDisabled]="(isPastTerm$ | async) || course.id === null"
        [cdkDragData]="course">
        <div class="course-wrapper-inner">
          <cse-course-item
            type="course"
            [course]="course"
            [isPastTerm]="(isPastTerm$ | async)"
            [isCurrentTerm]="(isCurrentTerm$ | async)"
            [disabled]="(isPastTerm$ | async) || (course.id === null)">
          </cse-course-item>
        </div>
      </div>

      <div class="no-courses" *ngIf="(courses$ | async).length === 0">
        <p>{{ (isPastTerm$ | async) ? 'No Courses Taken' : 'No Courses Planned' }}</p>
      </div>
    </div>
  </div>
  <div class="add-new-wrapper" *ngIf="(isPastTerm$ | async) === false">
    <button
      mat-raised-button
      class="add-course-button"
      (click)="openCourseSearch()">
      + Add Course
    </button>
	</div>
</mat-card>