<div class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" ng-click="$hide()">&times;</button>
				<h4 class="modal-title">{{title}}</h4>
			</div>

			<form name="editButtonForm" role="form" ng-submit="edit(selectedBtn, newBtn)" novalidate>
				<div class="modal-body" >
					<label>Select a function for the button</label>
					<div class="form-group">

						<p style="margin-bottom:0">Category</p>
						<ui-select  ng-model="device.type" theme="bootstrap" on-select="selectCategory($item)" required>
							<ui-select-match placeholder="Select or search a type in the list...">{{$select.selected.name}}</ui-select-match>
							<ui-select-choices repeat="type in types | filter: $select.search">
								<span ng-bind-html="type.name | highlight: $select.search"></span>
							</ui-select-choices>
						</ui-select>
						<br/>
						<p style="margin-bottom:0">Brand</p>
						<ui-select ng-model="device.brand" theme="bootstrap" on-select="selectBrand($item)" required>
							<ui-select-match placeholder="Select or search a brand in the list...">{{$select.selected.name}}</ui-select-match>
							<ui-select-choices repeat="brand in brands | filter: $select.search">
								<span ng-bind-html="brand.name | highlight: $select.search"></span>
							</ui-select-choices>
						</ui-select>
						<br/>
						<p style="margin-bottom:0">Model Search</p>
						<div class="input-group">
							<input type="text" class="form-control" id="device-model-name" placeholder="Enter model name or number" ng-model="query.value" result="models" db-type="device.type.name" brand="device.brand.name" query="query.value" event="keypress" search-models>
							<span class="input-group-btn">
								<button class="btn btn-default btn-search" type="button" result="models" db-type="device.type.name" brand="device.brand.name" query="query.value" event="click" search-models><i class="fa fa-search"></i></button>
							</span>
						</div>
						<br/>
						<p style="margin-bottom:0">Model</p>
						<ui-select ng-model="device.model" theme="bootstrap" on-select="selectModel($item)" required>
							<ui-select-match placeholder="Select or search a model in the list...">{{$select.selected.name}}</ui-select-match>
							<ui-select-choices repeat="model in (deviceData.type==1 ? models.ir : models.ip) | filter: $select.search">
								<span ng-bind-html="model.name | highlight: $select.search"></span>
							</ui-select-choices>
						</ui-select>
						<br/>
						<p style="margin-bottom:0">Functions</p>
						<ui-select ng-model="device.func" theme="bootstrap" on-select="selectFunction($item)" required>
							<ui-select-match placeholder="Select or search a function in the list...">{{$select.selected.caption}}</ui-select-match>
							<ui-select-choices repeat="btn in deviceInfo.btns | filter: $select.search">
								<span ng-bind-html="btn.caption | highlight: $select.search"></span>
							</ui-select-choices>
						</ui-select>

					</div>

					<div class="form-group" style="height:150px;">
					</div>

				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary" ng-disabled="editButtonForm.$invalid">Done</button>
					<button type="button" class="btn btn-danger" ng-click="$hide()">Cancel</button>
				</div>

			</form>
		</div>
	</div>
</div>
