<h4 class="bg-primary">Quick Setup for Device Control</h4>
<p>Choose the model name or number of the device. Exact matches are good, but close often work.</p>

<p>Device type is: <strong class="text-primary">{{device.type.name}}</strong></p>
<p>Labeled: <strong class="text-primary">{{device.name}}</strong></p>
<p>Manufacturer: <strong class="text-primary">{{device.brand.name}}</strong></p>


<div class="form-group">
	<label for="device-model-name">Enter a model to search for it</label>

	<div class="input-group">
		<input type="text" class="form-control" id="device-model-name" placeholder="Model name or number" ng-model="query.value" result="models" db-type="device.type.name" brand="device.brand.name" query="query.value" event="keypress" search-models>
		<span class="input-group-btn">
			<button class="btn btn-default btn-search" type="button" result="models" db-type="device.type.name" brand="device.brand.name" query="query.value" event="click" search-models><i class="fa fa-search"></i></button>
		</span>
	</div>
</div>

<div class="fx-fade-down" ng-if="models.ip.length || models.ir.length">

	<div class="form-group" ng-if="device.targetType">
		<p>These models were found matching your search</p>
		<div class="select-style" ng-if="device.targetType === 1 && models.ir.length && models.irSearchResult">
			<select size="9" ng-options="model as model.name for model in models.ir" ng-model="device.model">
				<option value="">Select a code set</option>
			</select>
		</div>
		<div class="select-style" ng-if="device.targetType === 1 && models.ir.length && !models.irSearchResult">
			<select size="9" ng-options="model as 'Code# ' + (model.index + 1) for model in models.ir" ng-model="device.model">
				<option value="">Select a code set</option>
			</select>
		</div>

		<div class="select-style" ng-if="device.targetType === 2 && models.ip.length">
			<select size="9" ng-options="model as model.name for model in models.ip" ng-model="device.model">
				<option value="">Select a code set</option>
			</select>
		</div>
	</div>

	<div class="form-group" ng-if="device.targetType && !virtualEditor">
		<button class="btn btn-primary ng-isolate-scope" ng-click="showTestModal()" ng-disabled="!device.model">Test it!</button>
	</div>

	<div class="form-group">
		<p>Select how the device will be controlled:</p>
		<label class="radio-inline">
			<input type="radio" name="targetType" ng-model="device.targetType" ng-disabled="models.ir.length === 0" ng-value="1"> IR controlled
		</label>

		<label class="radio-inline">
			<input type="radio" name="targetType" ng-model="device.targetType" ng-disabled="models.ip.length === 0"  ng-value="2"> Network controlled
		</label>
	</div>

</div>



<div class="left-and-right">
	<go-back state="menu.programming.add-device.device-brand"></go-back>
	<button class="btn btn-primary btn-next" ng-disabled="!device.model" click-and-disable="doNext()">Next</button>
</div>
