<ng-template #enrolled>
  <div class="course-list-wrapper">
    <div class="course-list">
      <div class="course-list-inner">
        <ng-container *ngIf="enrolledCourses.length === 0">
          <p *ngIf="(term$ | async).era === 'past'" class="no-courses">
            No courses taken
          </p>
          <p *ngIf="(term$ | async).era === 'active'" class="no-courses">
            Not enrolled in any courses
          </p>
        </ng-container>

        <cse-course-item
          *ngFor="let course of enrolledCourses"
          type="course"
          [disabled]="true"
          [course]="course"
          [era]="(term$ | async).era"
        >
        </cse-course-item>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #planned>
  <div class="course-list-wrapper">
    <div
      class="course-list"
      cdkDropList
      id="term-{{ termCode }}"
      [cdkDropListData]="(term$ | async).termCode"
      [cdkDropListConnectedTo]="dropZoneIds$ | async"
      (cdkDropListDropped)="drop($event)"
      (cdkDropListEntered)="dragEnter($event)"
      (cdkDropListExited)="dragExit($event)"
    >
      <div class="course-list-inner term-body">
        <ng-container
          *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver"
        >
          <p *ngIf="(term$ | async).era === 'active'" class="no-courses">
            No Courses in cart
          </p>
          <p *ngIf="(term$ | async).era === 'future'" class="no-courses">
            No courses planned
          </p>
          <p *ngIf="(term$ | async).era === 'past'" class="no-courses">
            No courses planned
          </p>
        </ng-container>
        <div
          cdkDrag
          [cdkDragData]="course"
          [cdkDragDisabled]="mobileView.matches"
          class="course-wrapper"
          *ngFor="let course of plannedCourses"
        >
          <cse-course-item
            type="course"
            [course]="course"
            [era]="(term$ | async).era"
          >
          </cse-course-item>
        </div>
      </div>
    </div>

    <!-- Add course -->
    <div class="add-new-wrapper" *ngIf="(term$ | async).era !== 'past'">
      <button
        mat-raised-button
        class="add-course-button"
        (click)="openCourseSearch()"
      >
        + Add Course
      </button>
    </div>
  </div>
</ng-template>

<mat-card
  class="term-container"
  [ngClass]="{ 'no-scrolling': mobileView.matches }"
  role="region"
  cdkFocusInitial
>
  <div class="term-inner">
    <div
      fxLayout="row"
      class="term-header"
      fxLayoutAlign="space-between center"
    >
      <h2 tabindex="0">{{ termCode | getTermDescription }}</h2>
      <div fxLayout="row" fxLayoutAlign="space-between center">
        <p class="text-right semi-bold credits">
          <span *ngIf="visibleCredits === 'planned'">
            {{ plannedCredits }} Cr
          </span>
          <span *ngIf="visibleCredits === 'enrolled'">
            {{ enrolledCredits }} Cr
          </span>
        </p>
        <ng-container *ngIf="(note$ | async) as note; else newNote">
          <button
            mat-icon-button
            aria-label="Open dialog to edit note in this term"
            [disabled]="note.isLoaded === false"
            (click)="openNotesDialog(note)"
          >
            <mat-icon
              aria-label="Open dialog to edit note in this term"
              alt="Edit note"
              color="primary"
              matTooltip="Edit note"
              matTooltipPosition="above"
            >
              insert_drive_file
            </mat-icon>
          </button>
        </ng-container>
        <ng-template #newNote>
          <button
            mat-icon-button
            (click)="openNotesDialog()"
            aria-label="Open dialog to add note in this term"
          >
            <mat-icon
              aria-label="Open dialog to add note in this term"
              alt="Add note"
              color="primary"
              matTooltip="Add note"
              matTooltipPosition="above"
            >
              note_add
            </mat-icon>
          </button>
        </ng-template>
      </div>
    </div>

    <!-- Render term note (if it exists) -->
    <ng-container *ngIf="(note$ | async) as note">
      <ng-container *ngIf="note.isLoaded; else noteIsLoading">
        <div class="note-item" (click)="openNotesDialog(note)">
          <p class="semi-bold">Note</p>
          <p class="note-excerpt">{{ note.text }}</p>
        </div>
      </ng-container>
      <ng-template #noteIsLoading>
        <div class="note-item note-item-loading">
          <p class="semi-bold">Note</p>
          <p class="note-excerpt">{{ note.text }}</p>
          <mat-progress-spinner
            mode="indeterminate"
            diameter="24"
          ></mat-progress-spinner>
        </div>
      </ng-template>
    </ng-container>
  </div>

  <!-- If this term is an active term -->
  <ng-container *ngIf="(term$ | async).era === 'active'">
    <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="1">
      <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'">
        <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
      </mat-tab>
      <mat-tab [label]="'Cart (' + plannedCourses.length + ')'">
        <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
      </mat-tab>
    </mat-tab-group>
  </ng-container>

  <!-- If this term is a past term -->
  <ng-container *ngIf="(term$ | async).era === 'past'">
    <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
      <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'">
        <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
      </mat-tab>
      <mat-tab [label]="'Cart (' + plannedCourses.length + ')'">
        <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
      </mat-tab>
    </mat-tab-group>
  </ng-container>

  <!-- If this term is a future term -->
  <ng-container *ngIf="(term$ | async).era === 'future'">
    <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
  </ng-container>
</mat-card>