<h4 class="bg-primary">
	Edit your 
	<span ng-if="macroType.id === 0"> {{addMacro.room.name}} Power Off</span>
	<span ng-if="macroType.id === 1">{{addMacro.currentDevice.name}}</span>
	<span ng-if="macroType.id === 2 || macroType.id === 3">{{addMacro.button.name}}</span>
	automated activity
</h4>


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


		<div class="row">
			<div class="col-sm-6">
				Automated Activity Steps
			</div>

			<div class="col-sm-6">
				<test-macro
					ng-disabled="!addMacro.steps.length"
					system-id="system.id"
					devices="addMacro.room.devices"
					macro="addMacro.steps" ng-if="!virtualEditor"></test-macro>
			</div>
		</div>


		<div class="row">
			<div class="col-sm-6">
				<button class="btn btn-primary btn-fw" type="button" steps="addMacro.steps" add-delay-step>Add delay</button>
			</div>

			<div class="col-sm-6">
				<button class="btn btn-primary btn-fw" ng-disabled="macroType.id !== 2" steps="addMacro.steps" devices="addMacro.room.devicesAndSNP2" add-jump-to>Add jump to</button>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-12">

				<script type="text/ng-template" id="nodes_renderer.html">
					<div class="tree-node tree-node-content" data-nodrag ng-if="node.type == null" >
						<span class="macro-step-name" ng-class="{'macro-if-action': node.type == 4}">{{ node.name === 'True' ? 'Then' : node.name === 'False' ? 'Else' : node.name }}</span>
					</div>
					<!-- or -->
					<div class="tree-node tree-node-content angular-ui-tree-handle" ng-if="node.type != null" >
						<i ui-tree-handle class="fa fa-bars handle pull-left cursor-pointer"></i>
						<span class="macro-step-name" ng-class="{'macro-if-action': node.type == 4}">{{ node.name }}</span>
						<a class="text-danger macro-step-delete" ng-if="node.type != null" data-nodrag ng-click="remove(this)"><i class="fa fa-times"></i></a>
					</div>

					<div class="tree" ng-if="node.type == 4 && node.steps != null">
						<ul ui-tree-nodes="" ng-model="node.steps" nodrop-enabled>
							<li ng-repeat="node in node.steps" ui-tree-node ng-include="'nodes_renderer.html'">
							</li>
						</ul>
					</div>
					<!-- or -->
					<div ng-if="node.type != 4 && node.steps != null">
						<ul ui-tree-nodes="" ng-model="node.steps">
							<li ng-repeat="node in node.steps" ui-tree-node ng-include="'nodes_renderer.html'">
							</li>
						</ul>
					</div>
				</script>

				<div class="macro-steps" ui-tree="options" data-max-depth="7" id="tree-root">
					<ul ui-tree-nodes="" ng-model="addMacro.steps">
						<li ng-repeat="node in addMacro.steps" ui-tree-node ng-include="'nodes_renderer.html'">
						</li>
					</ul>
				</div>

			</div>
		</div>
		<!-- addMacro.steps view -->
		<!--
		<div class="col-lg-6">
			<h3>Data binding</h3>
			<pre class="code">{{ addMacro.steps | json }}</pre>
		</div>
		-->

		<div class="row">
			<div class="col-xs-12">
				<button class="btn btn-danger btn-fw" data-title="Delete all steps" data-template="views/modal-tpls/delete-macro-steps.html" bs-modal>Delete all steps</button>
			</div>
		</div>

	</div>


	<div class="col-sm-6">
		<p>Select device and command</p>


		<div class="form-group">
			<h5>Device</h5>
			<select class="width--100" ng-change="addMacro.func = null" ng-model="addMacro.device" ng-options="device as (device.name === 'TRF-ZW' ? 'TRF-ZW Scenes' : device.name) for device in addMacro.room.allDevices track by device.id" >  </select>
		</div>


		<div>
			<div  ng-if="addMacro.device">
				<h5>Commands</h5>
				<p class="text-muted" ng-if="!addMacro.device.funcs.length && (addMacro.device.data && addMacro.device.data.length < 0)">There are no commands in our databases for this device.</p>

				<div ng-if="addMacro.device.funcs.length">
					<select class="width--100" ng-model="addMacro.func" ng-options="function as function.name for function in addMacro.device.funcs track by function.id"></select>
					
					<div class="margin-top-sm">
						<button class="btn btn-primary" ng-disabled="!addMacro.func" list="addMacro.steps" fn="addStep(addMacro.device, addMacro.func)" add-to-list>Add</button>
						<test-function ng-if="!virtualEditor"
													 ng-disabled="!addMacro.func"
													 system-id="system.id"
													 room-id="addMacro.room.id"
													 device="addMacro.device"
													 func="addMacro.func">
						</test-function>
					</div>
				</div>

				<div ng-if="addMacro.device.data.length > -1">
					<select class="width--100" ng-model="addMacro.func" ng-options="scene as (scene.name + ' (' + scene.room + ')') for scene in addMacro.device.data track by scene.id"></select>

					<div class="margin-top-sm">
						<button class="btn btn-primary" ng-disabled="!addMacro.func" list="addMacro.steps" fn="addStep(addMacro.device, addMacro.func, true)" add-to-list>Add</button>
						<button class="btn btn-primary" ng-click="refreshScenes(addMacro.device)">Refresh list</button>
					</div>
				</div>
			</div>
			<div class="margin-top-sm">
				<button class="btn btn-menu ng-scope ng-isolate-scope" system="system" steps="addMacro.steps" special-function>Special functions</button>
			</div>
		</div>

	</div>
</div>


<div class="left-and-right">
	<button class="btn btn-primary btn-previous" ng-click="goBack()">Back</button>
	<button class="btn btn-primary btn-next" ng-disabled="macroType.id === 3 && !addMacro.steps.length" ng-click="doNext()">Next</button>
</div>
