<div class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Edit the device button</h4>
			</div>
			
			<div ng-if="!mainMenu.changingIcon">
				<form name="editMainDevBtnForm" role="form" ng-submit="replaceButton(mainMenu.selectedBtn.id); $hide(); clearSelectedBtn();" novalidate>
					<div class="modal-body">
						<div class="form-group">
							<label for="device-name">Enter a name for the device:</label>
							<input class="form-control" id="device-name" name="buttonName" type="text" placeholder="Device name" ng-model="mainMenu.selectedBtn.display_text" ng-maxlength="32" required>

							<p class="help-block" ng-show="editMainDevBtnForm.buttonName.$error.required && editMainDevBtnForm.buttonName.$dirty">A valid button name is required.</p>
							<p class="help-block" ng-show="editMainDevBtnForm.buttonName.$error.maxlength && editMainDevBtnForm.buttonName.$dirty">The button name cannot be longer than 32 characters.</p>
							
							<p>
								<label class="checkbox-inline">
									<input type="checkbox" name="hide_text" ng-model="mainMenu.selectedBtn.hidden_option"> Hide Text
								</label>

								<label class="checkbox-inline">
									<input type="checkbox" name="hide_device" ng-model="mainMenu.selectedBtn.hidden"> Hide Device
								</label>
							</p>
						
						</div>
						<div class="form-group">
							<p><strong>Current icon:</strong></p>
							<img class="img-responsive device-icon" ng-src="images/device_icons/{{mainMenu.selectedBtn.image_name || 'OTHER' | encodeURIComponent}}.png" alt="">
							<button class="btn btn-primary" ng-click="switchToImageView()">Change</button>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" type="submit" ng-disabled="editMainDevBtnForm.$invalid">Done</button>
						<button class="btn btn-danger" type="button" ng-click="$hide(); clearSelectedBtn();">Cancel</button>
					</div>
				</form>
			</div>

			<div ng-if="mainMenu.changingIcon">
				<div class="modal-body">
					<h5>Select an image to use for the icon</h5>
					<div class="scrollable-window">
						<img class="img-change img-responsive margin-bottom-sm" ng-repeat="imgName in mainMenu.deviceIcons track by $index" ng-src="images/device_icons/{{imgName | encodeURIComponent}}.png" btn-radio="imgName" ng-model="mainMenu.selectedImgName">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" ng-click="saveImage()">Select</button>
					<button type="button" class="btn btn-danger" ng-click="mainMenu.changingIcon = false;">Cancel</button>
				</div>

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