Bridge-Multi/src-angular/app/components/browse/search-bar/search-bar.component.html

<div id="searchMenu" class="ui bottom attached borderless menu">
	<div class="item">
		<div class="ui icon input" [class.loading]="isLoading()">
			<input #searchBox type="text" placeholder=" Search..." (keyup.enter)="onSearch(searchBox.value)" />
			<i
				#searchIcon
				id="searchIcon"
				class="link icon"
				[ngClass]="isError ? 'red exclamation triangle' : 'search'"
				data-content="Failed to connect to the Bridge database"
				data-position="bottom right"></i>
		</div>
	</div>

	<div id="quantityDropdownItem" [class.hidden]="!showAdvanced" class="item">
		<div #quantityDropdown class="ui compact selection dropdown">
			<input name="quantityMatch" type="hidden" />
			<i class="dropdown icon"></i>
			<div class="text"><b>all</b> words match</div>
			<div class="menu">
				<div id="dropdownItem" class="active selected item" data-value="all"><b>all</b> words match</div>
				<div id="dropdownItem" class="item" data-value="any"><b>any</b> words match</div>
			</div>
		</div>
	</div>

	<div id="similarityDropdownItem" [class.hidden]="!showAdvanced" class="item">
		<div #similarityDropdown class="ui compact selection dropdown">
			<input name="similarityMatch" type="hidden" value="similar" />
			<i class="dropdown icon"></i>
			<div class="text"><b>similar</b> words match</div>
			<div class="menu">
				<div id="dropdownItem" class="active selected item" data-value="similar"><b>similar</b> words match</div>
				<div id="dropdownItem" class="item" data-value="exact"><b>exact</b> words match</div>
			</div>
		</div>
	</div>

	<div class="item right">
		<button class="mini ui right labeled icon button" (click)="onAdvancedSearchClick()">
			Advanced Search
			<i class="angle double icon" [ngClass]="showAdvanced ? 'up' : 'down'"></i>
		</button>
	</div>
</div>

<div id="advancedSearchForm" [class.collapsed]="!showAdvanced" class="ui horizontal segments">
	<div class="ui secondary segment">
		<div class="grouped fields">
			<h5 class="ui dividing header">Search for</h5>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="name" [(ngModel)]="searchSettings.fields.name" />
					<label>Name</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="artist" [(ngModel)]="searchSettings.fields.artist" />
					<label>Artist</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="album" [(ngModel)]="searchSettings.fields.album" />
					<label>Album</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="genre" [(ngModel)]="searchSettings.fields.genre" />
					<label>Genre</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="year" [(ngModel)]="searchSettings.fields.year" />
					<label>Year</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="charter" [(ngModel)]="searchSettings.fields.charter" />
					<label>Charter</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="tag" [(ngModel)]="searchSettings.fields.tag" />
					<label>Tag</label>
				</div>
			</div>
		</div>
	</div>
	<div class="ui secondary segment">
		<div class="grouped fields">
			<h5 class="ui dividing header">Must include</h5>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="sections" [(ngModel)]="searchSettings.tags.sections" />
					<label>Sections</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="starpower" [(ngModel)]="searchSettings.tags['star power']" />
					<label>Star Power</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="forcing" [(ngModel)]="searchSettings.tags.forcing" />
					<label>Forcing</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="taps" [(ngModel)]="searchSettings.tags.taps" />
					<label>Taps</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="lyrics" [(ngModel)]="searchSettings.tags.lyrics" />
					<label>Lyrics</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="videobackground" [(ngModel)]="searchSettings.tags.video" />
					<label>Video Background</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="stems" [(ngModel)]="searchSettings.tags.stems" />
					<label>Audio Stems</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="solosections" [(ngModel)]="searchSettings.tags['solo sections']" />
					<label>Solo Sections</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="opennotes" [(ngModel)]="searchSettings.tags['open notes']" />
					<label>Open Notes</label>
				</div>
			</div>
		</div>
	</div>
	<div class="ui secondary segment">
		<div class="grouped fields">
			<h5 class="ui dividing header">Instruments</h5>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="guitar" [(ngModel)]="searchSettings.instruments.guitar" />
					<label>Guitar</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="bass" [(ngModel)]="searchSettings.instruments.bass" />
					<label>Bass</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="rhythm" [(ngModel)]="searchSettings.instruments.rhythm" />
					<label>Rhythm</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="keys" [(ngModel)]="searchSettings.instruments.keys" />
					<label>Keys</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="drums" [(ngModel)]="searchSettings.instruments.drums" />
					<label>Drums</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="guitarghl" [(ngModel)]="searchSettings.instruments.guitarghl" />
					<label>GHL Guitar</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="bassghl" [(ngModel)]="searchSettings.instruments.bassghl" />
					<label>GHL Bass</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="vocals" [(ngModel)]="searchSettings.instruments.vocals" />
					<label>Vocals</label>
				</div>
			</div>
		</div>
	</div>
	<div class="ui secondary segment">
		<h5 class="ui dividing header">Charted difficulties</h5>
		<div class="grouped fields">
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="expert" [(ngModel)]="searchSettings.difficulties.expert" />
					<label>Expert</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="hard" [(ngModel)]="searchSettings.difficulties.hard" />
					<label>Hard</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="medium" [(ngModel)]="searchSettings.difficulties.medium" />
					<label>Medium</label>
				</div>
			</div>
			<div class="field">
				<div class="ui checkbox">
					<input type="checkbox" name="easy" [(ngModel)]="searchSettings.difficulties.easy" />
					<label>Easy</label>
				</div>
			</div>
			<h5 class="ui dividing header">Difficulty range</h5>
			<div class="field">
				<div #diffSlider class="ui labeled ticked inverted range slider" id="diffSlider"></div>
			</div>
		</div>
	</div>
</div>