<!-- New Configuration -->
<div id="newConfig" class="uf-target-setup-section" ng-show="vm.showMainNewConfig">

	<div ng-click="vm.showNewConfig=!vm.showNewConfig" class="uf-target-setup-section-title" ng-class="{'minimized':!vm.showNewConfig}">
		<span class="glyphicon glyphicon-triangle-bottom rotatable slow" ng-class="{'rotated':!vm.showNewConfig,'unrotated':vm.showNewConfig}"
		 style="font-size:11px;position:relative;top:0px;right:5px;" ng-style="vm.showLP && {'top':'0'} || {'top': '-1px'}"></span>
		New Configuration
	</div>

	<div class="minimizable fast" ng-class="{'show':vm.showNewConfig}">
		<!-- Step 1 -->
		<div>
			<!-- Device Selection Main container -->
			<div id="devicesSelector" class="uf-target-setup-device-selected active" ng-class="{'tic-clickable':(vm.ufTargetSetupSrv.lpSelected||(vm.ufTargetSetupSrv.deviceSelected&&vm.ufTargetSetupSrv.selectedDevice.id))}"
			 ng-click="vm.toggleDeviceView()">
				<!-- Controls -->
				<i class="material-icons material-icons-btn" ng-show="vm.lpOrDeviceSelected()&&vm.ufTargetSetupSrv.hideDeviceSelectionOptions"
				 uib-tooltip="Show Device List" tooltip-placement="left" style="font-size:18px;position:absolute;top:7px;right:27px;">keyboard_arrow_down</i>
				<i class="material-icons material-icons-btn" ng-show="vm.lpOrDeviceSelected()&&!vm.ufTargetSetupSrv.hideDeviceSelectionOptions"
				 uib-tooltip="Hide Device List" tooltip-placement="left" style="font-size:18px;position:absolute;top:7px;right:27px;">keyboard_arrow_up</i>
				<i class="material-icons material-icons-btn" ng-show="vm.lpOrDeviceSelected()" style="font-size:16px;position:absolute;top:7px;right:7px;"
				 ng-click="vm.clearDeviceSelection();" uib-tooltip="Remove Selected Device" tooltip-placement="left">clear</i>

				<!-- Selected Device text -->
				<div ng-show="vm.lpOrDeviceSelected()">
					<i class="material-icons text-success">check_circle</i>
					<span style="text-transform:none;font-weight:500;color:#555;">Selected Device:</span>
					<img ng-show="vm.ufTargetSetupSrv.lpSelected" ng-src="target_setup/img/lp/{{vm.selectedLp.name}}.png" style="height:80px;border-radius:4px;margin-left:2px;position:relative;top:-2px;" />
					<span ng-show="vm.ufTargetSetupSrv.deviceSelected&&vm.ufTargetSetupSrv.selectedDevice.id" style="position:relative;position:relative;top:-2px;">
						<img ng-src="target_setup/img/ti_chip.png" style="height:80px;border-radius:4px;margin-left:2px;padding:3px 0;" />
						<span style="position:absolute;top:-21px;left:9px;color:#e0e0e0;font-size:7px;font-weight:600;text-align:left;line-height:11px;text-transform:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding-right:10px;transform:scale(1,1.1);letter-spacing:0.1px;">{{vm.formatDeviceID(vm.ufTargetSetupSrv.selectedDevice.id)}}</span>
					</span>
					<span type="text" style="width:340px;font-weight:600;color:#115566;">
						<span id="selected-device" ng-if="!vm.ufTargetSetupSrv.lpSelected" style="text-transform:uppercase;">{{vm.ufTargetSetupSrv.selectedDevice.id}}</span>
						<span ng-if="vm.ufTargetSetupSrv.lpSelected">
							<span id="selected-device" style="text-transform:uppercase;">{{vm.selectedLp.name}}</span>
							<span ng-show="!vm.selectedLp.deviceType">(LaunchPad)</span>
							<span ng-show="vm.selectedLp.deviceType">({{vm.selectedLp.deviceType}})</span>
						</span>
					</span>
				</div>

				<!-- Device Selection Info text -->
				<div ng-hide="vm.lpOrDeviceSelected()" style="font-size:16px;color:#666;">
					<span class="badge uf-circle active">1</span>
					Choose Your <span class="uf-target-setup-main-text">Device</span>
				</div>
			</div>

			<div class="uf-target-setup-device-main minimizable fast" ng-class="{'show':!vm.ufTargetSetupSrv.hideDeviceSelectionOptions}">
				<!-- Step 1 Filters-->
				<div style="padding-top:5px;">
					<span style="margin:0;font-size:14px;"><span style="font-weight:500;color:#555;">Category</span>:
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='All';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='All'&&{'font-weight':'500','color':'#115566'}">All</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='C2000';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='C2000'&&{'font-weight':'500','color':'#115566'}">C2000</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='mmWave';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='mmWave'&&{'font-weight':'500','color':'#115566'}">mmWave</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='MSP';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='MSP'&&{'font-weight':'500','color':'#115566'}">MSP</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='PGA';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='PGA'&&{'font-weight':'500','color':'#115566'}">PGA</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='Safety';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='Safety'&&{'font-weight':'500','color':'#115566'}">Safety</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='Tiva';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='Tiva'&&{'font-weight':'500','color':'#115566'}">Tiva</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='UCD';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='UCD'&&{'font-weight':'500','color':'#115566'}">UCD</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='Wireless';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='Wireless'&&{'font-weight':'500','color':'#115566'}">Wireless</a>
						|
						<a href="" ng-click="vm.ufTargetSetupSrv.deviceCategoryFilter='Bootloader';vm.deviceFilterChanged();" ng-style="vm.ufTargetSetupSrv.deviceCategoryFilter==='Bootloader'&&{'font-weight':'500','color':'#115566'}">Bootloader</a>
					</span>
				</div>
				<!-- Step 1 Content-->
				<ul class="uf-target-setup-list uf-target-setup-device" style="margin-bottom:10px;text-align:left;">
					<div style="position:relative;">
						<i class="material-icons" style="position:absolute;left:4px;top:4px;z-index:10;font-size:18px;color:#115566;">search</i>
						<i class="material-icons uf-btn-fg" ng-click="vm.deviceDisplayToggled();" style="position:absolute;right:24px;top:6px;z-index:10;font-size:14px;cursor:pointer;"
						 title="Toggle size of device entries">zoom_out_map</i>
						<i ng-click="vm.ufTargetSetupSrv.deviceFilter='';vm.deviceFilterChanged();" class="material-icons uf-btn-fg"
						 style="position:absolute;right:4px;top:6px;z-index:10;font-size:14px;cursor:pointer;" title="clear" title="Enlarge size of device entry">clear</i>
						<input type="text" ng-model="vm.ufTargetSetupSrv.deviceFilter" ng-change="vm.deviceFilterChanged()" style="width:100%;font-weight:400;box-shadow:inset 0 -2px 0 #115566;padding:0 45px 0 25px;"
						 placeholder="Enter Device Name ({{vm.filteredDevices.length+filteredLPList.length}} Available)"></input>
					</div>
					<div style="overflow-y:auto;padding:15px 30px 1px 30px;text-align:center;font-size:14px;" ng-show="!vm.deviceListReady">
						<!-- Loading screen -->
						Loading Device List
						<div class="progress">
							<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
							</div>
						</div>
					</div>
					<div style="overflow-y:auto;" id="list-of-devices" ng-show="vm.deviceListReady" ng-style="vm.ufTargetSetupSrv.isDeviceEntryExpanded&&{'max-height':'500px'}||{'max-height':'300px'}">
						<!-- LaunchPad List -->
						<li id="lp{{lp.name}}" class="uf-target-setup-list-entry" ng-repeat="lp in filteredLPList = (vm.getFilteredLPList() | orderBy:'name')"
						 ng-click="vm.configureLP(lp)" ng-class="{'active':((vm.ufTargetSetupSrv.selectedDevice.xmlFile===lp.device)&&vm.ufTargetSetupSrv.lpSelected),'preview':lp.showPreview}"
						 ng-show="vm.deviceExist(lp.device)">
							<img ng-src="target_setup/img/lp/{{lp.name}}.png" ng-style="lp.showPreview&&{'width':'100px'}||{'width':'25px'}" />
							<span ng-bind-html="vm.ticHighlightSrv.highlight(lp.name+'', vm.ufTargetSetupSrv.deviceFilter, 1)"></span>
							<!--<span style="text-transform:none">(LaunchPad)</span>-->
							<span ng-show="!vm.isOnChip(lp.name,lp.connectionType)" class="label label-offchip">{{lp.connectionType}}</span>
							<span ng-show="vm.isOnChip(lp.name,lp.connectionType)" class="label label-onchip">On-Chip</span>
							<span ng-show="!lp.deviceType" class="label label-lp label-second">LaunchPad</span>
							<span ng-show="lp.deviceType" class="label label-lp label-second">{{lp.deviceType}}</span>
						</li>
						<!-- Add-On Device List -->
						<uf-add-on-target-devices></uf-add-on-target-devices>
						<!-- Device List -->
						<li class="uf-target-setup-list-entry" style="position:relative;" ng-repeat="device in filteredDeviceList = vm.filteredDevices track by device.id"
						 ng-click="vm.deviceClicked(device);" ng-class="{'active':(vm.ufTargetSetupSrv.selectedDevice===device)&&vm.ufTargetSetupSrv.deviceSelected,'preview':device.showPreview}">
							<img ng-src="target_setup/img/ti_chip.png" ng-style="device.showPreview&&{'height':'96px','padding':'2px'}||{'height':'21px','padding':'0 2px 2px 2px'}" />
							<span class="uf-target-setup-list-chip-text">{{device.id}}</span>
							<span ng-bind-html="vm.ticHighlightSrv.highlight(device.id, vm.ufTargetSetupSrv.deviceFilter, 1)"></span>
							<span ng-show="vm.isOnChip(device.id)" class="label label-onchip">On-Chip</span>
							<span ng-show="!vm.isOnChip(device.id)" class="label label-offchip">Serial</span>
						</li>
					</div>
				</ul>
			</div>
			<div style="padding-bottom:15px;font-size:14px;" ng-if="filteredLPList.length+filteredDeviceList.length+vm.ufAddOnTargetSrv.getNumFilteredDevices() === 0">
				<i class="material-icons" style="position:relative;top:7px;color:#00bbcc;">info</i> No device <span style="font-weight:500;">matching
					your search</span> is supported by <span style="font-weight:500;">UniFlash</span>
			</div>
		</div>

		<!-- Step 2 -->
		<div>
			<!-- Connection Selection Main container -->
			<div class="uf-target-setup-device-selected" ng-class="vm.getConnectionMainClass()" ng-click="vm.toggleConnectionView();">
				<!-- Controls -->
				<i class="material-icons material-icons-btn" ng-show="( !vm.ufTargetSetupSrv.lpSelected || (vm.ufTargetSetupSrv.selectedDevice.id.toLowerCase().indexOf('msp430') !== -1) )&&vm.ufTargetSetupSrv.selectedConnection&&vm.ufTargetSetupSrv.hideConnectionSelectionOptions&&(vm.ufTargetSetupSrv.selectedDevice.type!=='addon')&&(vm.ufTargetSetupSrv.selectedDevice.connections.length>1)"
				 uib-tooltip="Show Connection List" tooltip-placement="left" style="font-size:18px;position:absolute;top:7px;right:27px;">keyboard_arrow_down</i>
				<i class="material-icons material-icons-btn" ng-show="( !vm.ufTargetSetupSrv.lpSelected || (vm.ufTargetSetupSrv.selectedDevice.id.toLowerCase().indexOf('msp430') !== -1) )&&vm.ufTargetSetupSrv.selectedConnection&&!vm.ufTargetSetupSrv.hideConnectionSelectionOptions&&(vm.ufTargetSetupSrv.selectedDevice.type!=='addon')&&(vm.ufTargetSetupSrv.selectedDevice.connections.length>1)"
				 uib-tooltip="Hide Connection List" tooltip-placement="left" style="font-size:18px;position:absolute;top:7px;right:27px;">keyboard_arrow_up</i>
				<i ng-show="vm.ufTargetSetupSrv.selectedConnection.id&&!vm.ufTargetSetupSrv.lpSelected&&(vm.ufTargetSetupSrv.selectedDevice.type!=='addon')&&(vm.ufTargetSetupSrv.selectedDevice.connections.length>1)"
				 class="material-icons material-icons-btn" style="font-size:16px;position:absolute;top:7px;right:7px;" ng-click="vm.ufTargetSetupSrv.selectedConnection='';vm.ufTargetSetupSrv.setConnectionIndex = -1;vm.ufTargetSetupSrv.hideConnectionSelectionOptions=false;$event.stopPropagation();"
				 uib-tooltip="Remove Selected Connection" tooltip-placement="left">clear</i>

				<!-- Selected Connection text -->
				<div ng-show="vm.ufTargetSetupSrv.selectedConnection.id">
					<i class="material-icons text-success" style="position:relative;top:8px;right:3px;">check_circle</i>
					<span style="text-transform:none;font-weight:500;color:#555;">Selected Connection:</span>
					<i class="material-icons" style="font-size:26px;color:#555;position:relative;top:7px;left:1px;">settings_input_hdmi</i>
					<span id="selected-connection" style="font-weight:600;color:#115566;line-height:80px;">{{vm.ufTargetSetupSrv.selectedConnection.id}}</span>
					<span style="font-size:12px;font-weight:400;" ng-show="vm.ufTargetSetupSrv.lpSelected&&(vm.ufTargetSetupSrv.selectedDevice.id.toLowerCase().indexOf('msp430') === -1)">(Auto
						Selected)</span>
				</div>

				<!-- Connection Selection Info text -->
				<div ng-show="!vm.ufTargetSetupSrv.selectedConnection.id" style="font-size:16px;color:#666;" ng-class="(vm.ufTargetSetupSrv.selectedDevice!=='')?'active':'disabled'">
					<span class="badge uf-circle">2</span>
					Choose Your <span class="uf-target-setup-main-text">Connection</span>
				</div>
			</div>

			<!-- Step 2 Content-->
			<div class="minimizable fast" ng-class="{'show':(vm.ufTargetSetupSrv.selectedDevice.connections.length>1)&&( !vm.ufTargetSetupSrv.lpSelected || (vm.ufTargetSetupSrv.selectedDevice.id.toLowerCase().indexOf('msp430') !== -1) )&&!vm.ufTargetSetupSrv.hideConnectionSelectionOptions}">
				<ul class="uf-target-setup-list uf-target-setup-connection">
					<div style="position:relative;">
						<i class="material-icons" style="position:absolute;left:4px;top:4px;z-index:10;font-size:18px;color:#115566;">search</i>
						<i ng-click="vm.connectionFilter='';vm.filterConnectionList();" class="material-icons uf-btn-fg" style="position:absolute;right:4px;top:6px;z-index:10;font-size:14px;cursor:pointer;"
						 title="clear">clear</i>
						<input type="text" ng-model="vm.connectionFilter" ng-change="vm.filterConnectionList()" style="width:100%;font-weight:400;box-shadow:inset 0 -2px 0 #115566;padding:0 25px;"
						 placeholder="Enter Connection Name ({{vm.filteredConnectionList.length}} Available)"></input>
					</div>
					<div style="overflow-y:auto;max-height:300px;">
						<li class="uf-target-setup-list-entry" ng-repeat="connection in vm.filteredConnectionList track by connection.id"
						 ng-click="vm.connectionClicked(connection);" ng-class="{'active':vm.ufTargetSetupSrv.selectedConnection===connection}"
						 ng-bind-html="vm.ticHighlightSrv.highlight(connection.id, vm.connectionFilter, 1)"></li>
					</div>
				</ul>
			</div>
		</div>

		<div ng-class="{'show':vm.editClicked && !vm.editStarted}" class="minimizable fast configurables">
			<div ng-show="!vm.hasConfigurables(configurableList)" style="padding:20px 0;">No settings available for current
				configuration</div>
			<div ng-show="vm.hasConfigurables(configurableList)" style="width:600px;text-align:left;margin:10px auto;display:table;padding:5px;">
				<div><span style="font-weight:600;">Connection Settings</span>: (Note: File properties are not supported at this
					time and will not be editable)</div>
				<div style="padding:0 5px;">
					<div style="display:table-row;" ng-repeat="curConfigurables in configurableList = (vm.configurables | filter:{hidden:false})"
					 ng-class="(curConfigurables.type==='filepathfield')?'disabled':'highlight_hover_light3'">
						<span style="width:1%;display:table-cell;white-space:nowrap;padding-right:8px;padding-bottom:1px;">{{curConfigurables.name}}:
						</span>
						<span style="width:99%;display:table-cell;line-height:24px;padding-bottom:1px;">
							<input ng-show="curConfigurables.type==='stringfield' || curConfigurables.type==='numericfield'" type="text"
							 ng-model="curConfigurables.value" style="color:#115566;width:100%;font-weight:400;background-color:inherit;font-size:14px;padding:0 3px;">
							<select ng-show="curConfigurables.type==='choicelist'" style="background-color:transparent;color:#118899;width:100%;font-weight:400;padding-left:3px;padding-right:18px;font-size:14px;"
							 ng-options="option for option in curConfigurables.choices" ng-model="curConfigurables.value" ng-change="vm.configurableValueChanged(curConfigurables)"></select>
							<div style="width:100%;display:table;" ng-show="curConfigurables.type==='filepathfield'">
								<div style="display:table-row;">
									<span style="width:99%;display:table-cell;padding-right:5px;">
										<input type="text" ng-model="curConfigurables.value" style="width:100%;color:#117788;font-weight:400;background-color:inherit;font-size:14px;">
									</span>
									<span style="width:1%;display:table-cell;"><button class="btn btn-default btn-sm" style="padding-top:1px;padding-bottom:1px;position:relative;top:-1px;">Browse</button></span>
								</div>
							</div>
						</span>
					</div>
				</div>
			</div>
		</div>

		<!-- Last Step -->
		<div class="uf-target-setup-device-selected last" ng-class="(vm.ufTargetSetupSrv.selectedDevice!==''&&vm.ufTargetSetupSrv.selectedConnection!=='')?'active':'disabled'"
		 ng-show="(vm.ufTargetSetupSrv.selectedDevice.type!=='addon')">
			<div ng-class="(vm.ufTargetSetupSrv.selectedDevice!=='')?'active':'disabled'">
				<span class="badge uf-circle" style="position:relative;right:15px;top:1px;">3</span>
				<button id="start-uniflash" ng-click="vm.startClicked();vm.ufTargetSetupSrv.started=true;" class="btn btn-primary"
				 ng-class="{'disabled':(vm.ufTargetSetupSrv.selectedDevice===''||vm.ufTargetSetupSrv.selectedConnection==='')}"
				 style="position:relative;right:10px;">Start</button>
				<button ng-show="!vm.editClicked" class="btn btn-default" style="position:relative;right:5px;margin-right:5px;"
				 ng-click="vm.getConfiguables();">Edit</button>
				<!-- Loading icon -->
				<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate" ng-show="vm.ufTargetSetupSrv.started || vm.editStarted"
				 style="position:absolute;top:36px;padding-left:2px;"></span>
			</div>
		</div>
		<!-- Add-On Action List -->
		<uf-add-on-target-actions></uf-add-on-target-actions>
	</div>
</div>