<h4 class="bg-primary">Learn IR codes</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="learnIr" has-page-btn="true" exists="learnIr.exists"></device-interface>
	</div>

	<div class="col-sm-5">

		<div ng-if="masterBstaion">
			<h5>Learn IR to this controller:</h5>
			<p>{{masterBstaion.name}} / {{masterBstaion.mac | macAddress}}</p>
		</div>

		<device-btn-edit ng-if="learnIr.selectedBtn && !learnIr.selectedBtn.display_text.length" content="add" selected-btn="learnIr.selectedBtn" device-data="learnIr.deviceData"></device-btn-edit>

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

			<h5>Button command:</h5>
			<p ng-if="learnIr.selectedBtn.func.name">{{learnIr.selectedBtn.func.name}}</p>
			<p class="text-muted" ng-if="!learnIr.selectedBtn.func.name">Not Assigned Yet</p>
		</div>

		<learn-command
			ng-disabled="!learnIr.selectedBtn"
			model="learnIr"
			system-id="system.id"
			selected-btn="learnIr.selectedBtn">
		</learn-command>
		
		<!-- <test-function
				ng-disabled="!learnIr.selectedBtn"
				system-id="system.id"
				room-id="learnIr.room.id || learnIr.roomId"
				device="learnIr.deviceData"
				func="learnIr.selectedBtn.func">
			</test-function> -->
	</div>
</div>

<div class="left-and-right">
	<a class="btn btn-primary" ng-click="goBack()"><i class="fa fa-caret-left"></i> Back</a>
	<a class="btn btn-primary" ng-click="finish()">Finish</a>
</div>
