<div>
	<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>
			<div class="col-xs-12">
				<div class="row">
					<div class="col-xs-12">
						<label>Shared:</label>
						{{labInfo.shared ? 'Yes' : 'No'}}
					</div>
				</div>
			</div>
			<div class="col-xs-12" ng-if="labInfo.shared">
				<div class="row">
					<div class="col-xs-12">
						<label>Shared With:</label>
						{{labInfo.sharedWith}}
					</div>
				</div>
			</div>
			<div class="col-xs-12" ng-if="labInfo.shared">
				<div class="row">
					<div class="col-xs-12">
						<label>Collaborate Allowed:</label>
						{{labInfo.collaborateAllowed ? 'Yes' : 'No'}}
					</div>
				</div>
			</div>
			<!--</p>
		<p class="text-muted"> Full path: {{fullPathToFile}} </p>-->
			<div class="col-xs-12">
				<div class="btn-group" style="margin-bottom:15px; margin-top: 25px;">
					<button ng-if="!labInfo.isMirror && labInfo.author !== username && role !== 'admin'" type="button"
						class="btn btn-primary btn-flat" ng-click="openLab('private')">Private</button>
					
						<button type="button" class="btn btn-primary btn-flat"
						ng-if="labInfo.collaborateAllowed || role === 'admin' || labInfo.author === username"
						ng-click="openLab('collaborate')">Collaborate</button>
				</div>
				<!--<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"
						ng-if="labInfo.author === username || role === 'admin'"
						data-ng-click="openModal('editfile',null,'megalg')">Edit</button>
					<button type="button" class="btn btn-danger btn-flat disabled"
						ng-if="labInfo.author === username || role === 'admin'"
						data-ng-click="deleteElement(fullPathToFile, 'File', 'true')">Delete</button>

					<button type="button" class="btn btn-danger btn-flat"
						ng-if="privateCopyMap[labInfo.name + '.unl'] && (( !labInfo.isMirror && labInfo.author !== username && role !== 'admin') || (labInfo.isMirror && role !== 'admin'))"
						data-ng-click="deletePrivateLab(fullPathToFile)">
						Delete Private Copy
					</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>
</div>

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