<div class="page-header" >

	<div class="container">
		<div class="row">
			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 appIconMainScreen" >
				<h1></h1>
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 tileimg" style="background: url({{vxf.iconsrc}}) no-repeat center center;background-size: contain;">
				<h3 ng-show="vxf.certified"  ><span class="certifiedtext_content">Certified</span></h3>
				</div>
				<h4>Version: {{vxf.version}}</h4>
				
			</div>
			<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
				<h1 id="headerTitle">{{vxf.name}} </h1>
				<p><span ng-repeat="vxfcat in vxf.categories"><span class="label label-info">{{vxfcat.name}}</span>&nbsp;&nbsp;</span></p>
				<a class="btn btn-success btn-lg" data-toggle="modal" ng-href="{{vxf.packageLocation}}"> 
				<i class="fa fa-download fa-2x pull-left"></i><b>&nbsp;&nbsp;&nbsp;&nbsp;Package&nbsp;&nbsp;&nbsp;&nbsp;</b><br><small>Version: {{vxf.version}}</small></a>
				<h3>{{vxf.shortDescription}}</h3>
				<p>Author: <strong>{{vxf.owner.username}}</strong>, Organization: <strong>{{vxf.owner.organization}}</strong></p>
				<p>Vendor: <strong>{{vxf.vendor}}</strong></p>
				<p>Date created: <strong>{{vxf.dateCreated| date:'medium'}}</strong>, Last update: <strong>{{vxf.dateUpdated | date:'medium' }}</strong></p>
				<p>UUID: <strong>{{vxf.uuid}}</strong></p>
				<p ng-show="vxf.certified">Certified by: <strong  >{{vxf.certifiedBy}}</strong></p>
				<p>Images used: <strong><span ng-repeat="vfimage in vxf.vfimagesVDU"> <span class="label label-primary"> {{vfimage.name}} </span> &nbsp;  </span></p>
				<p>Supported MANO Platforms: <strong><span ng-repeat="supmanoplatf in vxf.supportedMANOPlatforms">{{supmanoplatf.name}} </span></strong></p>
				<p>Onboarded to MANO providers: <span ng-repeat="vobd in vxf.vxfOnBoardedDescriptors"> <span class="label label-primary"> {{vobd.obMANOprovider.name}} </span> &nbsp;  </span></p>
				
				<div class="col-sm-12" role="tabpanel">
				
				<!-- Nav tabs -->
					<!-- Nav tabs -->
				  <ul class="nav nav-tabs" role="tablist" >
				    <li ng-repeat="tab in tabs" role="presentation" ng-class="{'active': isActive(tab) }">
				    	<a data-target="{{tab.id}}" aria-controls="{{tab.id}}" role="tab" data-toggle="tab" ng-click="activate(tab)" >{{tab.title}}</a></li>
				   </ul>
					
					  <!-- Tab panes -->
				  <div class="col-sm-12 tab-content"  >
				    <div ng-repeat="tab in tabs" role="tabpanel"  ng-class="{'tab-pane':true, 'active': isActive(tab) }" id="{{tab.id}}">
				     <p ng-bind-html="tab.content" ></p> 
				    
											  
				  </div>								
				</div>		
					
				</div>
				


		

			</div>
		</div>
	</div>
</div>