<form
  [formGroup]="courseSearchForm"
  (ngSubmit)="formSubmit()"
  class="add-course-form"
  fxLayout="column"
  fxLayoutAlign="space-around none"
  style="padding: 12px 22px;">
  <mat-form-field>
    <mat-label>Term</mat-label>
    <mat-select placeholder="Term" aria-label="Term" [disableOptionCentering]="true" formControlName="term">
      <mat-option value="0000">All courses</mat-option>
      <mat-option
        *ngFor="let termCode of constants.activeTermCodes()"
        [value]="termCode.toString()"
        >{{ termCode | getTermDescription }}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-hint align="end" *ngIf="courseSearchForm?.get('subject')?.invalid">
      Please select an existing subject or &lsquo;All&rsquo;
    </mat-hint>

    <input
      type="text"
      placeholder="Subject"
      aria-label="Subject"
      matInput
      #subjectInput
      (focus)="clearSubject()"
      formControlName="subject"
      [matAutocomplete]="subject"/>
    <mat-autocomplete
      autoActiveFirstOption
      #subject="matAutocomplete"
      (optionSelected)="subjectChange($event, subjectInput)">
      <mat-option
        *ngFor="let subject of filteredSubjects"
        [value]="subject | titlecase"
        >{{ subject | titlecase }}</mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <mat-form-field>
    <div class="search-input-wrapper">
      <input
        cdkFocusInitial
        id="keyword-field"
        matInput
        placeholder="Keyword, number"
        formControlName="search"
        value=""/>
      <button
        id="search-button"
        mat-icon-button
        aria-label="Search"
        matSuffix
        style="margin-top: -10px;">
        <i class="material-icons" alt="Search courses">search</i>
      </button>
    </div>
  </mat-form-field>
</form>
<div *ngIf="hasResults || isLoading">
  <div
    class="search-results-toolbar mat-typography"
    fxLayout="row"
    fxLayoutAlign="space-between center"
    style="padding: 12px 22px; background-color: #EDF1F3; min-height: 60px;">
    <h3 *ngIf="isLoading" style="margin: 0px;">Searching for courses...</h3>
    <h3 *ngIf="hasResults" style="margin: 0px;">
      {{ queriedCourses.length }} result(s)
    </h3>
    <button *ngIf="hasResults" mat-button (click)="resetSearchForm()">
      Reset Search
    </button>
  </div>
  <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>

  <div
    id="course-search-results"
    fxLayout="column"
    fxLayoutAlign="space-around none"
    style="margin-top: 20px; padding: 12px 22px;">
    <div
      *ngIf="hasResults && queriedCourses.length === 0"
      class="mat-typography"
      style="text-align: center;">
      <img
        style="width: 50%;"
        src="../../assets/img/bucky-sad.svg"
        alt="No results found"/>
      <h3>No search results found.</h3>
    </div>

    <div
      cdkDropList
      id="queried-courses-list"
      [cdkDropListData]="queriedCourses"
      [cdkDropListConnectedTo]="dropZoneIds$ | async">
      <div
        class="course-wrapper"
        cdkDrag
        [cdkDragDisabled]="mobileView.matches"
        [cdkDragData]="course"
        *ngFor="let course of queriedCourses">
        <div class="course-wrapper-inner">
          <cse-course-item [course]="course" type="search"></cse-course-item>
        </div>
      </div>
    </div>
  </div>
</div>