<div id="course-details-content" fxLayout="column">
  <div class="course-details-header" fxLayout="column" fxFlex="100" fxLayoutGap="10px" class="term-selection" *ngIf="mobileView.matches">
    <div class="term-selection" *ngIf="type === 'search' || type === 'saved'" fxLayout="row" fxFlex="100">
      <form [formGroup]="termSelector" (ngSubmit)="addCourseToPlan($event)" style="width:100%;display:flex">
        <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)" style="margin-top:6px;height:60%;margin-left:auto">
          Add to plan
        </button>
      </form>
    </div>
    <div fxLayout="column" fxFlex="100" class="course-detail-title" fxLayoutAlign="end start">
      <h2>
        {{ courseDetails.fullCourseDesignation | titlecase }}
        <div class="course-detail-subtitle">{{ courseDetails.title }}</div>
      </h2>
    </div>
  </div>
  <div fxLayout="row" fxFlex="100" fxLayoutGap="10px" class="course-details-header" *ngIf="!mobileView.matches">
    <div fxFlex="50" class="course-detail-title" fxLayoutAlign="start center">
      <h2>
        {{ courseDetails.fullCourseDesignation | titlecase }}
        <span class="course-detail-subtitle">{{ courseDetails.title }}</span>
      </h2>
    </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 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>