<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" >
					<div class="form-group">
						<label for="device-name">Enter a new name for the button:</label>
						<input class="form-control" id="device-name" type="text" name="buttonName" placeholder="Button name" ng-model="newBtn.display_text" ng-maxlength="32" required>
						<p class="help-block" ng-show="editButtonForm.buttonName.$error.required && editButtonForm.buttonName.$dirty">A valid button name is required.</p>
						<p class="help-block" ng-show="editButtonForm.buttonName.$error.maxlength && editButtonForm.buttonName.$dirty">The button name cannot be longer than 32 characters.</p>
					</div>

					<div class="form-group" ng-if="newBtn.macro[0].type != 6">
						<ui-select ng-model="newBtn.func" on-select="changeFunction($item)" theme="bootstrap" required>
							<ui-select-match placeholder="Select or search a function...">{{$select.selected.name}}</ui-select-match>
							<ui-select-choices repeat="function in deviceData.dbCon | filter: $select.search">
								<span ng-bind-html="function.name | highlight: $select.search"></span>
							</ui-select-choices>
						</ui-select>
					</div>

					<div class="form-group" ng-if="newBtn.macro[0].type == 6">
						<input class="form-control" id="function-name" type="text" name="functionName" placeholder="Function name" ng-model="newBtn.func.name" disabled>
					</div>

					<div class="form-group" ng-if="2 != deviceData.type" style="height:200px;">
					</div>

					<div class="form-group" ng-if="2 == deviceData.type" style="height:100px;">
					</div>

					<div class="form-group" ng-if="2 == deviceData.type && newBtn.macro[0].type != 6">
						<label for="ip-command">IP Command</label>
						<textarea  class="form-control" style="height:100px;text-align: left; resize: none;" id="ip-command" type="textarea" name="ipCommand" placeholder="IP Command" ng-model="ipCmd.dispString" ng-maxlength="512" required></textarea>
						<p class="help-block" ng-show="editButtonForm.ipCommand.$error.required && editButtonForm.ipCommand.$dirty">A valid IP command is required.</p>
						<p class="help-block" ng-show="editButtonForm.ipCommand.$error.maxlength && editButtonForm.ipCommand.$dirty">The IP command cannot be longer than 1024 characters.</p>

						<div class="radio">
		 					<label>
								<input type="radio" name="ascii" ng-model="ipCmd.dispType" value="ascii" class="ng-pristine ng-valid" ng-click="switchDispType('ascii')"> ASCII
		   					</label>
		 					<label>
								<input type="radio" name="hex" ng-model="ipCmd.dispType" value="hex" class="ng-pristine ng-valid" ng-click="switchDispType('hex')"> Hex
		 					</label>
		 					<label>
								<input type="radio" name="dec" ng-model="ipCmd.dispType" value="dec" class="ng-pristine ng-valid" ng-click="switchDispType('dec')"> Decimal
							</label>
	   					</div>
					</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>
