
<div ng-controller="labViewCtrl">
	
	<div style="padding:15px">
	<div class="col-xs-12">
	<h3 style="margin-top:0px">{{labInfo.name}}</h3>
		<div style="height:400px; overflow: auto; position:relative;" id="divPreview">
				<h4 class="text-center" style="padding-top: 180px;" data-ng-show="zeroNodes">No one node inside lab</h4>
				<div data-ng-show="!zeroNodes">
					<div class="scale-menu-helper">
						<div class="{{(scaleMenu) ? 'scale-menu' : 'scale-menu-collapsed'}}">
							<div class="scale-menu-inside">
								<p class="text-center" style="margin-bottom:0px">Scale</p>
								<div class="btn-group-vertical" data-ng-show="scaleMenu">
									<button type="button" class="btn btn-flat {{ (scale == 2) ? 'btn-warning active' : 'btn-default'}}" data-ng-click="schemecontrol(2)">1:2</button>
									<button type="button" class="btn btn-flat {{ (scale == 3) ? 'btn-warning active' : 'btn-default'}}" data-ng-click="schemecontrol(3)">1:3</button>
									<button type="button" class="btn btn-flat {{ (scale == 4) ? 'btn-warning active' : 'btn-default'}}" data-ng-click="schemecontrol(4)">1:4</button>
									<button type="button" class="btn btn-flat {{ (scale == 5) ? 'btn-warning active' : 'btn-default'}}" data-ng-click="schemecontrol(5)">1:5</button>
								</div>
								<h4 class="text-center" style="margin-top:5px;" data-ng-show="scaleMenu" data-ng-click="scaleMenu=!scaleMenu"><a class="pointer"><i class="fa fa-caret-up" aria-hidden="true"></i> </a></h4>
								<h4 class="text-center" style="margin-top:0px;" data-ng-show="!scaleMenu" data-ng-click="scaleMenu=!scaleMenu"><a class="pointer"><i class="fa fa-caret-down" aria-hidden="true"></i> </a></h4>
							</div>
						</div>
					</div>
					<div data-ng-repeat="(x,y) in nodelist" class="pv_element" ng-attr-style="top:{{y.top/scale*2}}px; left:{{y.left/scale*2}}px; position:absolute;" data-toggle="tooltip" title="{{y.name}}">
						<img data-ng-src="/images/icons/{{y.icon}}" class="{{y.icon.replace('.png','').replace(' ','')+'_s'+scale}}">
					</div>
					<div data-ng-repeat="x in networksList" class="pv_element" style="top:{{networksObject[x].top/scale*2}}px; left:{{networksObject[x].left/scale*2}}px; position:absolute;" data-toggle="tooltip" title="{{networksObject[x].name}}">
						<img data-ng-src="/images/icons/{{ (networksObject[x].type == 'bridge') ? 'Switch' : 'Cloud'; }}.png" class="{{ (networksObject[x].type == 'bridge') ? 'Switch_s'+scale : 'Cloud_s'+scale; }}">
					</div>
					<div data-ng-repeat="x in lineList" class="line" style="position:absolute; transform: {{linkLinesAttr(x.x1,x.y1,x.x2,x.y2,scale*2)[1]}};width: {{linkLinesAttr(x.x1,x.y1,x.x2,x.y2,scale*2)[0]}}px; top: {{x.y1}}px; left: {{((x.x1)-(45/scale))}}px;"></div>
				</div>
			</div>
	</div>
	<p></p>
	<hr style="color: #000 !important;" >
	<div class="col-xs-7 col-sm-5 col-lg-5" style="padding-top:10px" >
		<div class="col-xs-12">
			<div class="row">
				<div class="col-xs-12">
				<label>Lab Path: </label>
				{{fullPathToFile}}
				</div>
			</div>
		</div>
		<div class="col-xs-12">	
			<div class="row">
				<div class="col-xs-12">
				<label>Version: </label>
				{{labInfo.version}}
				</div>
			</div>	
		</div>
		<div class="col-xs-12">
			<div class="row">
				<div class="col-xs-12">
				<label>UUID: </label>
				{{labInfo.id}}
				</div>
			</div>
		</div>
		<div class="col-xs-12">
			<div class="row">
				<div class="col-xs-12">
				<label>Author:</label>
				{{labInfo.author}}
				</div>
			</div>	
		</div>	
		<!--</p>
		<p class="text-muted"> Full path: {{fullPathToFile}} </p>-->
		<div class="col-xs-12">
			<!--<hr style="margin:10px">-->
 			<div class="btn-group" style="margin-bottom:15px; margin-top: 25px;">
			<button ng-if="!UIlegacy" type="button" class="btn btn-primary btn-flat" data-ng-click="legacylabopen(fullPathToFile)">Open Legacy</button>
		        <button ng-if="!UIlegacy" type="button" class="btn btn-primary btn-flat" data-ng-click="labopen(fullPathToFile)">Open</button>
			<button ng-if="UIlegacy" type="button" class="btn btn-primary btn-flat disabled" data-ng-click="legacylabopen(fullPathToFile)">Open</button>
		        <button type="button" class="btn btn-primary btn-flat disabled" data-ng-click="openModal('editfile',null,'megalg')">Edit</button>
		        <button type="button" class="btn btn-danger btn-flat disabled" data-ng-click="deleteElement(fullPathToFile, 'File', 'true')">Delete</button>
			</div>
        	</div>
	</div>
	<div class="col-xs-11 col-sm-7 col-lg-7" >
		<div class="col-xs-12" >
                	<div class="row">
                        	<div class="col-xs-12" style="height: 30vh ; overflow: auto; border: 5px solid rgba(255, 255, 255, .5);" >
                        	<label>Description: </label>
                        	<span style="white-space:pre-wrap;"><br> {{labInfo.description}}</span>
                        </div>
                </div>
	</div>
	</div>
</div>

<script>
$('#divPreview').on('scroll', function(e){
	$( ".scale-menu-helper" ).css({'top': $('#divPreview').scrollTop(), 'left': $('#divPreview').scrollLeft()})
})
</script>
