<section class="section_welcome">
	<div class="container">
		<div class="row">
			<!-- padding 28.125% or 56.25% preserves 16:9 aspect ratio on screen resize -->
			<div class="col-lg-6 col-sm-12 order-2 order-lg-1 pr-lg-4 pt-lg-0 pt-4" >
					<div *ngIf="!videoLoaded" class="mat-elevation-z4 rounded">
						<img class="img-fluid rounded" src="../../assets/images/landing_page_video_snapshot_1.png" alt="Video preview">
					</div>

					<div class="embed-responsive embed-responsive-16by9 mat-elevation-z1 rounded" #videoRef [class.hidden]="!videoLoaded" style="border-radius: 10px;"></div>
					<!-- <iframe #videoRef [class.hidden]="!videoLoaded" 
						src="https://player.vimeo.com/video/1096581653?h=5fb6b3ded9&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;controls=1&amp;loop=1&amp;autoplay=1"
						frameborder="0"
						allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
						style="position:absolute;top:0;left:0;width:100%;height:100%;" title="OpenSlice Introduction">
						Your browser does not support the iframe tag
					</iframe> -->

			</div>
		
			<div class="col-lg-6 col-sm-12 order-1 order-lg-2 pl-lg-4 ">
				<div class="row align-items-center shadowed-dark welcome-description" >
						<h1 class="font-weight-bold">
							Welcome to {{config.TITLE}}
						</h1>
						<div class="osl-description">
							<h5>Powered by OpenSlice, a prototype open-source and standards-based Operations Support System (OSS) for delivering Network as-a-Service (NaaS).</h5>
							<h5 class="mt-4">Discover more on our <a style="color:#FFFFFF;" class="font-weight-bolder" href="https://osl.etsi.org">homepage</a>.</h5>
						</div>
					
				</div>
			</div>
		
	
		</div>
	</div>
</section>

<section class="section-metrics container">
	<div class="row">
		<div class="card-container col-lg-3 col-md-6 mt-lg-0 mt-md-1 mt-sm-2">
			<div class="card metrics-card">
				<div class="circle-icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="white" class="bi bi-people-fill" viewBox="0 0 16 16">
						<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
					</svg>
				</div>
				<div class="card-body p-3">
					<div *ngIf="isNaN(animatedCounts.registeredUsers) || isLoading; else apiRespondedUsers">
						<h5 class="card-title"><skeleton [width]="'35%'" [height]="'24px'"></skeleton></h5>
					</div>
					<ng-template #apiRespondedUsers>
						<!-- <h5 class="card-title font-weight-bold">{{isNaN(animatedCounts.registeredUsers) ? 'NaN': animatedCounts.registeredUsers}}</h5> -->
						 <h5 class="card-title font-weight-bold">{{animatedCounts.registeredUsers}}</h5>
					</ng-template>
					<div class="card-text">Registered Users</div>
				</div>
			</div>
		</div>
		

		<div class="card-container col-lg-3 col-md-6 mt-lg-0 mt-md-1 mt-sm-5 mt-5">
			<div class="card metrics-card">
				<div class="circle-icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="white" class="bi bi-gear-wide-connected" viewBox="0 0 16 16">
						<path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5m0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78zM5.048 3.967l-.087.065zm-.431.355A4.98 4.98 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8zm.344 7.646.087.065z"/>
					</svg>
				</div>
				<div class="card-body p-3">
					<div *ngIf="isNaN(animatedCounts.publishedServiceSpecs) || isLoading; else apiRespondedServiceSpecs">
						<h5 class="card-title"><skeleton [width]="'35%'" [height]="'24px'"></skeleton></h5>
					</div>
					<ng-template #apiRespondedServiceSpecs>
						<!-- <h5 class="card-title font-weight-bold">{{isNaN(animatedCounts.publishedServiceSpecs) ? ' ': animatedCounts.publishedServiceSpecs}}</h5> -->
						 <h5 class="card-title font-weight-bold">{{animatedCounts.publishedServiceSpecs}}</h5>
					</ng-template>
					<div class="card-text">Published Service Specifications</div>
				</div>
			</div>
		</div>
		
		<div class="card-container col-lg-3 col-md-6 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
			<div class="card metrics-card">
				<div class="circle-icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="white" class="bi bi-server" viewBox="0 0 16 16">
						<path d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4z"/>
						<path d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334a6.5 6.5 0 0 1-1.458.79C11.81 7.684 9.967 8 8 8s-3.809-.317-5.208-.876a6.5 6.5 0 0 1-1.458-.79z"/>
						<path d="M14.667 11.668a6.5 6.5 0 0 1-1.458.789c-1.4.56-3.242.876-5.21.876-1.966 0-3.809-.316-5.208-.876a6.5 6.5 0 0 1-1.458-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667z"/>
					</svg>
				</div>
				<div class="card-body p-3">
					<div *ngIf="isNaN(animatedCounts.registeredResourceSpecs) || isLoading; else apiRespondedResourceSpecs">
						<h5 class="card-title"><skeleton [width]="'35%'" [height]="'24px'"></skeleton></h5>
					</div>
					<ng-template #apiRespondedResourceSpecs>
						<h5 class="card-title font-weight-bold">{{animatedCounts.registeredResourceSpecs}}</h5>
					</ng-template>
					<div class="card-text">Registered Resource Specifications</div>
				</div>
			</div>
		</div>
		
		<div class="card-container col-lg-3 col-md-6 mt-lg-0 mt-md-5 mt-sm-4 mt-4">
			<div class="card metrics-card">
				<div class="card-body p-3" style="display: flex; flex-direction: column; justify-content: center;">
					<div class="card-text">See more on the</div>
					<a routerLink="metrics/" class="font-weight-bold" data-cy="metricsPortal">Metrics Portal</a>
				</div>
			</div>
		</div>

	</div>
	
</section>


<section class="container container-portals" style="min-width: 350px;">

	<div class="row" style="margin: 0;">
		<div class="col-xl-4 col-md-6 col-sm-12 p-2">
			<app-portalcard
			[portalLink]="'services/'"
			[dataCY]="'servicesPortal'"
			[portalTitle]="'Services Portal'"
			[backgroundImage]="'assets/images/services-background.jpg'"></app-portalcard>
		</div>
		<div class="col-xl-4 col-md-6 col-sm-12 p-2">
			<app-portalcard
			[portalLink]="'resources/'"
			[dataCY]="'resourcesPortal'"
			[portalTitle]="'Resources Portal'"
			[backgroundImage]="'assets/images/network-background.jpg'"></app-portalcard>
		</div>
		<div class="col-xl-4 col-md-12 col-sm-12 p-2">
			<app-portalcard
			[portalLink]="'products/'"
			[dataCY]="'productsPortal'"
			[portalTitle]="'Products Portal'"
			[backgroundImage]="'assets/images/products-background.jpg'"></app-portalcard>
		</div>
	</div>
	<div class="row" style="margin: 0;">
		<div class="col-xl-4 col-md-6 col-sm-12 p-2">
			<app-portalcard
			[portalLink]="'testing/'"
			[dataCY]="'testingPortal'"
			[portalTitle]="'Testing Portal'"
			[backgroundImage]="'assets/images/testing-background.jpg'"></app-portalcard>
		</div>
		<div class="col-xl-4 col-md-6 col-sm-12 p-2">
			<app-portalcard
			[portalLink]="'nfv/'"
			[dataCY]="'nfvPortal'"
			[portalTitle]="'NFV Portal'"
			[backgroundImage]="'assets/images/nfv-background.jpg'"></app-portalcard>
		</div>
		<div class="col-xl-2 col-md-6 col-sm-6 p-2">
			<a class="card portal-card" href="https://labs.etsi.org/rep/osl/code/org.etsi.osl.main/-/releases" data-cy="osl">
				<div class="card-link">
					<a class="portal-button">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
							<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>
							<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>
						</svg>
					</a>
				</div>
				<div class="status-stats">{{config.PORTALVERSION}} Version</div>
				<!-- <div class="status-text">Version</div> -->
			</a>
		</div>
		<div class="col-xl-2 col-md-6 col-sm-6 p-2">
			<a class="card portal-card" href="{{config.WIKI}}" data-cy="wiki" >
				<div class="card-link">
					<a class="portal-button">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
							<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>
							<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>
						</svg>
					</a>
				</div>
				<div class="status-stats">{{config.TITLE}} Documentation</div>
				<!-- <div class="status-text">Documentation</div> -->
			</a>
		</div>
	</div>
		
</section>
