 <div class="uf-main">
    <div class="uf-main-device-bar">
        <span class="uf-main-device-bar-config">Configured Device</span> : {{vm.connectionName}} <span ng-show="vm.serial">({{vm.serial}})</span>
        <i class="material-icons uf-main-device-bar-icon">keyboard_arrow_right</i>
        <span style="text-transform:uppercase">{{vm.deviceName}}</span>
        <a class="link" href="" ng-show="vm.ufPropertiesDB.hasCategory('Device Info',vm.ufContext.getCurrentCore().name)" ng-click="vm.showDeviceInfo=!vm.showDeviceInfo"><span ng-show="!vm.showDeviceInfo">[more info]</span><span ng-show="vm.showDeviceInfo">[hide info]</span></a>
        <a class="link" href="" ng-click="vm.downloadCCXML()">[download ccxml]</a>
		<uf-connection-state></uf-connection-state>
        
        <div ng-show="vm.showDeviceInfo" style="width:100%;">
            <div style="display:table;background-color:#fff;margin:4px 12px;padding:5px 0 5px 0;border-radius:2px;box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.2)">
                <div>
                    <span style="display:table-cell;position:relative;padding:0 11px 0 8px;">
                        <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:10px;left:17px;color:#ddd;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;cursor:default;padding-right:10px;">{{vm.deviceName}}</span>
                    </span>
                    <span style="display:table-cell;vertical-align:top;padding:0 5px;">
                        <uf-property-category category="Device Info" expand="true" minimal="true" searchable="false"></uf-property-category>
                    </span>
                </div>
                <div style="text-align:center;font-size:10px;">
                    <a href="" ng-click="vm.getDeviceInfo()" uib-tooltip="Connect to device and gather device information" tooltip-placement="right" tooltip-popup-delay="500" ng-show="!vm.ufPropertiesValue.readFromTarget()">[Read Device Info]</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mainContent">
    <div class="col1" style="background:#fafafa;" resizable r-directions="['right']" r-flex="true">
        <uf-views-list></uf-views-list>
    </div>
    <div class="col2" style="background:#fff;position:relative;" >
        <div style="position:absolute;height:100%;width:100%;display:flex;flex-direction:column;box-shadow:inset 0 0 5px #ddd;">
            <div style="overflow-y:auto;height:100%;width:100%;" ui-view id="main-viewport">
            </div>
        </div>
    </div>
</div>

<div class="console" ng-style="closeConole&&{'display':'none'}" resizable r-directions="['top']" r-flex="true" ng-hide="vm.ufConsoleInternal.isClosed()">
    <uf-console>
    </uf-console>
</div>