<div class="usin-options-wrap">
	<div class="usin-bulk-actions usin-float-left" ng-if="listView && canUpdateUsers"></div>
	<div class="usin-segments"></div>
	
	<button class="usin-btn usin-btn-export" ng-if="canExportUsers"
		ng-click="showConfirm()" ng-disabled="!listView || bulkActions.isAnyChecked() || loading.isLoading() || !total.current"> 
		<span class="usin-icon-export" />
		<md-tooltip md-direction="top">{{strings.export.replace('%d', total.current)}}</md-tooltip>
	</button>

	<button class="usin-btn usin-btn-list-options" ng-click="toggleDisplayed()"
		ng-disabled="!listView || bulkActions.isAnyChecked() || loading.isLoading()"> 
		<span class="usin-icon-visible usin-btn-drop-down" ng-class="{'usin-btn-drop-down-opened' : displayed === true}"/>
		<md-tooltip md-direction="top">{{strings.toggleColumns}}</md-tooltip>
	</button>
		
	<button class="usin-btn usin-btn-map" ng-click="onToggleView()" ng-disabled="bulkActions.isAnyChecked() || 
		loading.isLoading()  || (listView && !total.current)"
		ng-class="{'usin-btn-map-active' : !listView}" ng-if="showMap"> 
		<span class="usin-icon-map"/>
		<md-tooltip md-direction="top" md-autohide>{{listView ? strings.enterMapView : strings.exitMapView}}</md-tooltip>
	</button>
	<div class="usin-fields-settings usin-drop-down usin-animate ng-hide" ng-show="displayed" click-outside="displayed=false">
		<div class="usin-fields-settings-search">
				<input type="search" ng-model="searchField" placeholder="Search...">
		</div>
		<ul dnd-list="fields" class="usin-field-settings-list">
			<li ng-repeat="field in fields | filter: searchField" dnd-draggable="field" dnd-moved="reorder($index)" dnd-disable-if="isOrderDisabled(field)">
				<dnd-nodrag>
					<span class="usin-field-settings-wrapper">
						<md-checkbox ng-checked="field.show" ng-click="onCheckboxChange(field)" md-no-ink="true"
							aria-label="Toggle Column {{field.name}}" ng-disabled="loading.isLoading() || field.disableHide"></md-checkbox>
						<span class="usin-field-icon usin-icon-{{field.icon}}"></span>
						<span class="usin-field-settings-name">{{field.name}}</span>
						<div dnd-handle class="usin-drag-handle usin-icon-sort" ng-if="!isOrderDisabled(field)"></div>
						<div class="usin-drag-handle usin-disabled usin-icon-sort" ng-if="isOrderDisabled(field)"></div>
					</span>
				</dnd-nodrag>
			</li>
			<li class="dndPlaceholder"><label></label></li>

		</ul>
	</div>
</div>


