<h4 class="bg-primary position-relative">Edit the layout of the device's buttons
	<span ng-if="optHelpShow" class="programming-help-btn heading"><i class="fa fa-lg fa-question-circle" ng-click="$event.preventDefault(); $event.stopPropagation(); showHelpModal('device-layout-edit')"></i></span></h4>

<p>Select a button to edit it. You can move, rename or delete it.</p>

<div class="row">
	<div class="col-sm-7">

		<device-interface ng-model="deviceMenu" has-page-btn="true" exists="true"></device-interface>

	</div>

	<div class="col-sm-5">
		<p><device-btn-edit ng-if="deviceMenu.selectedBtn && !deviceMenu.selectedBtn.display_text.length" content="add" selected-btn="deviceMenu.selectedBtn" device-data="deviceMenu.deviceData"></device-btn-edit></p>
		<p><device-btn-edit ng-if="deviceMenu.selectedBtn && !deviceMenu.selectedBtn.display_text.length" content="add-from-navi" selected-btn="deviceMenu.selectedBtn" device-data="deviceMenu.deviceData"></device-btn-edit></p>
		<p><device-btn-edit ng-if="deviceMenu.selectedBtn && !deviceMenu.selectedBtn.display_text.length" content="add-from-device" selected-btn="deviceMenu.selectedBtn" device-data="deviceMenu.deviceData" room-id="deviceMenu.roomId"></device-btn-edit></p>

		<div ng-if="deviceMenu.selectedBtn.display_text.length">
			
			<device-btn-move selected-btn="deviceMenu.selectedBtn" exists="true"></device-btn-move>
			<device-btn-edit content="edit" selected-btn="deviceMenu.selectedBtn" device-data="deviceMenu.deviceData" ></device-btn-edit>
			<device-btn-delete selected-btn="deviceMenu.selectedBtn"></device-btn-delete>

			<h5>Button command:</h5>
			<p ng-if="deviceMenu.selectedBtn.func.name">{{deviceMenu.selectedBtn.func.name}}</p>
			<p class="text-muted" ng-if="!deviceMenu.selectedBtn.func.name">Not Assigned Yet</p>
			
			<h5>Data Repeat Setting:</h5>
			<div class="checkbox">
				<label>
					<input type="checkbox" ng-model="deviceMenu.selectedBtn.press_hold"> Repeat while button is pressed
				</label>
			</div>

			<div class="radio">
				<label>
					<input type="radio" name="data_repeat" ng-model="deviceMenu.selectedBtn.repeatSetting" value="default"> Use device's default setting
				</label>
			</div>

			<div class="radio">
				<label>
					<input type="radio" name="data_repeat" ng-model="deviceMenu.selectedBtn.repeatSetting" value="custom">
					Use custom setting for this button
				</label>
				<div>
					Repeat/macro repeat: <button type="button" class="btn btn-default" ng-disabled="deviceMenu.selectedBtn.repeatSetting === 'default'" ng-model="deviceMenu.selectedBtn.repeat_macro" ng-options="value for value in [1,2,3,4,5]" bs-select>  <span class="caret"></span></button>
					Min. repeat while pressed: <button type="button" class="btn btn-default" ng-disabled="deviceMenu.selectedBtn.repeatSetting === 'default'" ng-model="deviceMenu.selectedBtn.repeat_min" ng-options="value for value in [1,2,3,4,5]" bs-select>  <span class="caret"></span></button>
				</div>
			</div>

			<div class="checkbox" ng-if="deviceMenu.selectedBtn.page_btn_idx != -1">
				<label>
					<input type="checkbox" ng-model="deviceMenu.selectedBtn.hidden"> Hide button
				</label>
			</div>
		</div>
	</div>
</div>

<div class="left-and-right">
	<go-back state="menu.advanced.device.select"></go-back>
	<button class="btn btn-primary" ng-click="finish()">Finish</i></button>
</div>
