course-details.component.html

<div id="course-details-content">
  <div fxLayout="row">
    <div
      fxLayout="row"
      fxLayout.lt-md="column"
      fxFlex="100"
      fxLayoutGap="10px"
      class="course-details-header">
      <div fxFlex="50" class="course-detail-title" fxLayoutAlign="start center">
        <h3>
          {{ courseDetails.fullCourseDesignation | titlecase }}
          <span class="course-detail-subtitle">{{ courseDetails.title }}</span>
        </h3>
      </div>
      <div
        *ngIf="type === 'search' || type === 'saved'"
        fxFlex="50"
        fxLayout="row"
        fxLayoutAlign="end start">
        <div class="term-selection">
          <form [formGroup]="termSelector" (ngSubmit)="addCourseToPlan($event)">
            <mat-form-field style="margin-right:20px;">
              <mat-select
                placeholder="Term"
                aria-label="Term"
                matInput
                role="listbox"
                formControlName="term"
                cdkFocusInitial>
                <mat-option
                  role="option"
                  *ngFor="let term of (droppableTermCodes$ | async)"
                  [value]="term"
                  >{{ term | getTermDescription }}</mat-option>
              </mat-select>
            </mat-form-field>

            <button
              mat-raised-button
              color="primary"
              mat-dialog-close
              (click)="addCourseToPlan($event)">
              Add to plan
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div
    fxLayout="column"
    fxLayoutAlign="space-around start"
    fxLayoutGap="10px"
    class="course-details-content">
    <p>{{ courseDetails.description }}</p>

    <p *ngIf="courseDetails.enrollmentPrerequisites">
      <span class="semi-bold">Requisites: </span
      >{{ courseDetails.enrollmentPrerequisites }}
    </p>

    <ul class="courseDetails-list">
      <li *ngIf="courseDetails.creditRange">
        <span class="semi-bold">Credits:</span> {{ courseDetails.creditRange }}
      </li>
      <li *ngIf="courseDetails.levels && courseDetails.levels.length > 0">
        <span class="semi-bold">Level: </span>
        <span *ngFor="let levels of courseDetails.levels">
          <span class="list-comma">{{ levels.description }}</span>
        </span>
      </li>
      <li *ngIf="courseDetails.breadths && courseDetails.breadths.length > 0">
        <span class="semi-bold">Breadth: </span>
        <span *ngFor="let breadths of courseDetails.breadths">
          <span class="list-comma">{{ breadths.description }}</span>
        </span>
      </li>
      <li *ngIf="courseDetails.lettersAndScienceCredits">
        <span class="semi-bold">L&amp;S Credit Type:</span>
        {{ courseDetails.lettersAndScienceCredits.description }}
      </li>
      <li *ngIf="courseDetails.honors">
        <span class="semi-bold">Honors: </span>{{ courseDetails.honors }}
      </li>
      <li *ngIf="courseDetails.generalEd">
        <span class="semi-bold">General Education: </span
        >{{ courseDetails.generalEd.description }}
      </li>
      <li *ngIf="courseDetails.ethnicStudies">
        <span class="semi-bold">General Education:</span> Ethnic Studies
      </li>
      <!-- <li *ngIf="courseDetails."><span class="semi-bold">Class Number:</span> {{ courseDetails.generalEd }}</li> -->
    </ul>

    <ul class="courseDetails-list">
      <li *ngIf="courseDetails.lastTaught">
        <span class="semi-bold">Last Taught: </span
        >{{ courseDetails.lastTaught | getTermDescription }}
      </li>
      <li
        *ngIf="
          courseDetails.gradCourseWork ||
          courseDetails.workplaceExperience ||
          courseDetails.foreignLanguage">
        <span class="semi-bold">Course Options:</span>
        <ul class="courseDetails-nested-list">
          <li>
            <span *ngIf="courseDetails.gradCourseWork"
              >50% Graduate Coursework Requirement</span>
            <span *ngIf="courseDetails.workplaceExperience">{{
              courseDetails.workplaceExperience.description
            }}</span>
            <span *ngIf="courseDetails.foreignLanguage">{{
              courseDetails.foreignLanguage.description
            }}</span>
          </li>
        </ul>
      </li>
    </ul>

    <p *ngIf="courseDetails.subject.footnotes">
      <span class="semi-bold">Subject Notes:</span><br />
      <span class="subject-notes">{{ courseDetails.subject.footnotes }}</span>
    </p>
  </div>

  <div class="course-details-footer">
    <p class="semi-bold course-detail-title">
      {{ courseDetails.subject.description | titlecase }} Information:
    </p>
    <div fxLayout="row">
      <div fxLayout="row" fxFlex="100" fxLayoutGap="10px">
        <div
          fxFlex="100"
          fxLayout.lt-sm="column"
          class="mat-dialog-actions"
          fxLayoutAlign="start center"
          fxLayoutAlign.lt-sm="start start">
          <a
            class="md-primary btn-link mat-button"
            target="_blank"
            href="{{ courseDetails.subject.departmentURI }}"
            >Website</a>
          <a
            class="md-primary btn-link mat-button"
            target="_blank"
            href="{{ courseDetails.subject.undergraduateCatalogURI }}"
            >Undergraduate Info</a>
          <a
            class="md-primary btn-link mat-button"
            target="_blank"
            href="{{ courseDetails.subject.graduateCatalogURI }}"
            >Graduate Info</a>
        </div>
      </div>
    </div>
  </div>
</div>