<div class="search-form px-3 py-4 mx-auto my-5">
    <div class="title text-center fs-2 py-3">
        Events Search
    </div>
    <form [formGroup]="searchForm" (ngSubmit)="onSubmit()" ngNativeValidate>
        <div class="my-3">
            <label class="form-label">Keyword<i>*</i></label>
            <input type="text" class="form-control" formControlName="keyword" [matAutocomplete]="auto" matInput required>
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngIf="isAutoFillLoading" class="is-loading"><mat-spinner diameter="20"></mat-spinner></mat-option>
                <ng-container *ngIf="!isAutoFillLoading">
                    <mat-option *ngFor="let autofill of filteredAutoFills" [value]="autofill">
                        {{autofill}}
                        </mat-option>
                </ng-container>
            </mat-autocomplete>
        </div>
        <div class="my-3">
            <div class="row g-2 align-items-center">
                <div class="col-6">
                    <label class="form-label">Distance(miles)</label>
                    <input type="number" class="form-control" formControlName="distance" min="1">
                </div>
                <div class="col-4 ms-3">
                    <label class="form-label">Category<i>*</i></label>
                    <select class="form-select selectpicker show-tick" formControlName="category" #categorySelect>
                        <option class="select-items" value="default" selected>Default</option>
                        <option class="select-items" value="music">Music</option>
                        <option class="select-items" value="sports">Sports</option>
                        <option class="select-items" value="arts_theatre">Arts & Theatre</option>
                        <option class="select-items" value="film">Film</option>
                        <option class="select-items" value="miscellaneous">Miscellaneous</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="my-3">
            <label class="form-label">Location<i>*</i></label>
            <input type="text" class="form-control" formControlName="location" required>
        </div>
        <div class="my-3">
            <input type="checkbox" formControlName="isAuto" (change)="isAutoOnChange()"><label class="form-label ms-2">Auto-detect your location</label>
        </div>
        <div class="my-3 mx-auto" style="width: fit-content;">
            <button type="submit" class="btn btn-danger me-3">SUBMIT</button>
            <button type="button" class="btn btn-primary" (click)="clear()">CLEAR</button>
        </div>
    </form>
</div>