<form [formGroup]='courseSearchForm' (ngSubmit)="formSubmit()" class="add-course-form" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">

        <mat-form-field>
          <mat-select placeholder="Term" aria-label="Term" formControlName="term">
            <mat-option value="0000">All</mat-option>
            <mat-option *ngFor="let yearCode of activeTerms$ | async" [value]="yearCode">{{yearCode | getTermDescription}}</mat-option>
          </mat-select>
        </mat-form-field>
  
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Subject" aria-label="Subject" matInput #subjectInput formControlName="subject" [matAutocomplete]="subject">
          <mat-autocomplete autoActiveFirstOption #subject="matAutocomplete">
            <mat-option *ngFor="let subject of filteredSubjects" [value]="subject | titlecase" (onSelectionChange)="subjectChange($event, subjectInput)">{{subject | titlecase}}</mat-option>
          </mat-autocomplete>
        </mat-form-field>
  
        <mat-form-field>
          <div class="search-input-wrapper">
            <input 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">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
            [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>