{{/*
	Generic multiselect combo list component.
	Provides a dropdown with search, checkable items, and a selected-items display list.

	Parameters:
		Name           - form input name (required)
		Title          - display label (required)
		Items          - slice of items, each must have .Value and .Label fields
		SelectedValues - comma-separated string of selected values
		Placeholder    - search input placeholder (optional, defaults to "Filter...")
		EmptyText      - text when nothing is selected (optional)
		Disabled       - whether the control is disabled (optional)
		Icon           - gear icon shown next to title (optional, defaults to "octicon-gear")
*/}}
<div class="combo-multiselect" data-field-name="{{.Name}}">
	<input class="combo-value" name="{{.Name}}" type="hidden" value="{{.SelectedValues}}">
	<div class="ui dropdown full-width {{if .Disabled}}disabled{{end}}">
		<a class="fixed-text muted">
			<strong>{{.Title}}</strong> {{if not .Disabled}}{{svg (or .Icon "octicon-gear")}}{{end}}
		</a>
		<div class="menu">
			{{if .Items}}
				<div class="ui icon search input">
					<i class="icon">{{svg "octicon-search" 16}}</i>
					<input type="text" placeholder="{{or .Placeholder (ctx.Locale.Tr "search.filter")}}">
				</div>
				<div class="scrolling menu">
					<a class="item clear-selection" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
					<div class="divider"></div>
					{{range .Items}}
						<a class="item" data-value="{{.Value}}">
							<span class="item-check-mark">{{svg "octicon-check" 16}}</span>
							<span class="item-label">{{.Label}}</span>
						</a>
					{{end}}
				</div>
			{{else}}
				<div class="item disabled">{{or .EmptyText (ctx.Locale.Tr "repo.issues.new.no_items")}}</div>
			{{end}}
		</div>
	</div>

	<div class="ui list combo-multiselect-list">
		<span class="item empty-list">{{or .EmptyText "None"}}</span>
	</div>
</div>
