facilmap/frontend/app/search/search-route.html

<div class="fm-search fm-search-route panel panel-default" ng-class="{'fm-hasResults': routes.length > 0}">
	<div class="panel-body">
		<form ng-submit="reset(); route()" ui-sortable="sortableOptions" ng-model="destinations">
			<div class="form-group" ng-repeat="destination in destinations">
				<div class="input-group">
					<span class="input-group-addon">
						<a href="javascript:" class="sort-handle"><span class="glyphicon glyphicon-resize-vertical"></span></a>
						<a href="javascript:" ng-click="removeDestination($index); reroute(true)" ng-show="destinations.length > 2" uib-tooltip="Remove this destination" tooltip-append-to-body="true"><span class="glyphicon glyphicon-minus"></span></a>
					</span>
					<div class="has-feedback">
						<input type="search" class="form-control" ng-model="destination.query" placeholder="{{$index == 0 ? 'From' : $index == destinations.length-1 ? 'To' : 'Via'}}" tabindex="{{$index+1}}">
						<a href="javascript:" class="reset-button form-control-feedback" ng-click="destination.query=''" ng-show="destination.query.length > 0"><span class="icon-clear"></span></a>
					</div>
					<span class="input-group-btn" uib-dropdown keyboard-nav="true" ng-show="destination.query.length > 0">
						<button type="button" class="btn btn-default" uib-dropdown-toggle ng-click="loadSuggestions(destination)"><span class="caret"></span></button>
						<ul class="dropdown-menu" role="menu" uib-dropdown-menu>
							<li ng-repeat="suggestion in destination.suggestions" ng-class="{active: destination.selectedSuggestionIdx == $index}"><a href="javascript:" ng-click="destination.selectedSuggestionIdx = $index; reroute()">{{suggestion.display_name}} ({{suggestion.type}})</a></li>
						</ul>
					</span>
				</div>
			</div>
			<div class="form-group">
				<div class="btn-toolbar">
					<button type="button" class="btn btn-default" ng-click="addDestination()" uib-tooltip="Add another destination" tooltip-append-to-body="true"><span class="glyphicon glyphicon-plus"></span></button>

					<div class="btn-group">
						<button type="button" class="btn btn-default" uib-btn-radio="'car'" ng-model="routeMode" tabindex="{{destinations.length+1}}" ng-click="reroute(true)" uib-tooltip="Go by car" tooltip-append-to-body="true"><span class="icon-car"></span></button>
						<button type="button" class="btn btn-default" uib-btn-radio="'bicycle'" ng-model="routeMode" tabindex="{{destinations.length+2}}" ng-click="reroute(true)" uib-tooltip="Go by bicycle" tooltip-append-to-body="true"><span class="icon-bicycle"></span></button>
						<button type="button" class="btn btn-default" uib-btn-radio="'pedestrian'" ng-model="routeMode" tabindex="{{destinations.length+3}}" ng-click="reroute(true)" uib-tooltip="Go by walk" tooltip-append-to-body="true"><span class="icon-walk"></span></button>
					</div>

					<button type="submit" class="btn btn-primary" tabindex="{{destinations.length+4}}">Go!</button>
					<button ng-show="routeObj || routeError" type="button" class="btn btn-link" tabindex="{{destinations.length+5}}" ng-click="reset()" uib-tooltip="Clear route" tooltip-append-to-body="true"><span class="glyphicon glyphicon-remove"></span></button>

					<button type="button" class="btn btn-default pull-right active" ng-click="showSearchForm()" uib-tooltip="Switch to search from" tooltip-append-to-body="true"><span class="glyphicon glyphicon-road"></span></button>
				</div>
			</div>

			<div class="fm-search-results" ng-show="routeObj || routeError">
				<div uib-alert class="alert-danger no-results" ng-if="routeError">{{routeError}}</div>

				<dl ng-show="routeObj">
					<dt>Distance</dt>
					<dd>{{routeObj.distance | fmRound:2}} km <span ng-show="routeObj.time != null">({{routeObj.time | fmFormatTime}} h {{routeObj.routeMode | fmRoutingMode}})</span></dd>
				</dl>

				<div class="fm-search-buttons" ng-show="routeObj && !readonly">
					<div uib-dropdown keyboard-nav="true" ng-if="(types | fmPropertyCount:{type:'line'}) > 1" dropdown-append-to-body="true">
						<button id="add-type-button" type="button" class="btn btn-default" uib-dropdown-toggle>Add to map <span class="caret"></span></button>
						<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="add-type-button" uib-dropdown-menu>
							<li role="menuitem" ng-repeat="type in types | fmObjectFilter:{type:'line'}"><a href="#" ng-click="addToMap(type)">{{type.name}}</a></li>
						</ul>
					</div>
					<button ng-if="(types | fmPropertyCount:{type:'line'}) == 1" type="button" class="btn btn-default" ng-click="addToMap()">Add to map</button>
				</div>
			</div>
		</form>
	</div>
</div>