<form *ngIf="headerState === 'relative'" id="search-form" [@searchInputTrans]="compFadeState">
	<span  *ngIf="clientWidth >= 640" class="search-page-border">
		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms" name="search-terms" [formControl]="stateCtrl" [mdAutocomplete]="auto" /> 
		<md-autocomplete #auto>
			<md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
			</md-option>
		</md-autocomplete>
		    	
	 	<span class="search-which-border">
			<div class="locate-me">{{ userLocation.city ? userLocation.city : 'Locate Me' }}</div>
			<div class="locate-handle" (click)="loacteMe();" ></div> 
			<img class="img-locate" title="Locate Me" src="locate_20_20.png"/> 
		</span>

	</span>
	<button md-raised-button class="search-submit" (click)="search(myInput.value)">Search</button>
	
	<span *ngIf="clientWidth < 639" class="search-page-border-mobile" >

		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms-mobile" name="search-terms" [formControl]="stateCtrl" [mdAutocomplete]="auto" /> 
	    <md-autocomplete #auto>
			<md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
			</md-option>
		</md-autocomplete>
		<div class="search-which-border-mobile" (click)="loacteMe();">
		    <img class="img-locate-mo" title="Locate Me" src="locate_20_20.png"/> 
		    <span class="locate-me-mo">{{ userLocation.city ? userLocation.city : 'Locate Me' }}</span>
		</div>
		<button md-raised-button class="search-submit-mobile" (click)="search(myInput.value)"  [routerLink]="['/explore']" >Explore ></button>
	</span>
	
</form>
<div *ngIf="headerState === 'fixed'" class="sb-search">
	<form>
		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms-fixed" value="" name="search" id="search"  [formControl]="stateCtrl" [mdAutocomplete]="auto" /> 
		
		<md-autocomplete #auto>
		   <md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
		   </md-option>
	    </md-autocomplete>
			
		<div md-ripple class="location" (click)="loacteMe();">
			<img class="location-img-32" src="location_32_32.svg"/> 
			<span class="location-text">{{ userLocation.address ? userLocation.address : 'Locate Me' }}</span>
		</div>
    	<input class="sb-search-submit" type="submit" (click)="search(myInput.value)">	
				
	</form>
</div>

<div  *ngIf="headerState === 'mobile'" class="sb-search-mobile">
	<form>
		<div class="search-mobile">
		  <md-input-container floatPlaceholder="never" class="search-full-width">
			    <input #myInput type="tel" mdInput placeholder="Search Food, Tour, Events and More..." value="" name="search" id="search" [formControl]="stateCtrl" [mdAutocomplete]="auto">
			    <i mdSuffix class="material-icons mobile-search" (click)="search(myInput.value)">search</i>
		  </md-input-container>
		  	
		  <md-autocomplete #auto>
		   <md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
		   </md-option>
	      </md-autocomplete>

<!-- 		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="back-term-fixed" value="" name="search" id="search" />  -->
		</div>
		<input class="sb-search-submit" type="submit" (click)="search(myInput.value) ">	
	</form>
</div>

