var productsTemplate = `
<div class="{{GridConfig.gridStyle}} product productitem mb-3" id="{{item.id}}" data-item="{{item}}">
	<div class="card border border-light shadow mb-3">
		<div class="card-body">
			<div class="thumb">
				<img class="prod-image productimage" src="{{productimage}}" alt="{{item.details}}">
			</div>
			<div class="tag catname my-2">{{item.CategoryName}}</div>
			<div class="productname">{{item.details}}</div>
			<div class="text-center badge bg-light border border-danger text-danger discounttag">{{discount}}</div>
			<div class="product-hover">
				<div class="icons">
					<a href="{{viewlink}}" aria-label="View product {{item.details}}"><i class="fa fa-eye fa-3x viewlink"></i></a>
				</div>
				<div class="buttons addToCart d-grid">{{add2cart}}</div>
			</div>
			<div class="row">
				<div class="col-12 text-center">
					<div class="price price text-info">{{pricetag}}</div>
				</div>
			</div>
		</div>
	</div>
</div>
`;

var productsCSS = `
<style type="text/css">
.productitem .card { min-height: 330px; height: 100%; object-fit: contain; }
.productitem .card-body { min-height: 270px; text-align: center; position: relative; }
.productitem .card-body .thumb { min-height: 250px;}
.productitem .card-body img { height: 100%; width: 100%; max-height: 250px; object-fit: contain; }
.productitem .card-body .product-hover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.75); transition: 0.5s ease; opacity: 0; display: block; }
.productitem .card-body .product-hover .icons { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.productitem .card-body .product-hover .icons a:hover { text-decoration: none; }
.productitem .card-body .product-hover .addToCart { position: absolute; bottom: 30px; left: 0; right: 0; }
.tag.catname, .productname { line-height: 1; }
.productitem .card-body .discounttag { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 1.25rem; }
.productitem .card-body:hover .product-hover { opacity: 1; }
.productitem .price { position: absolute; bottom: 0; left: 0; right: 0; font-size: 1.25rem; font-weight: bold; text-align: center; }
.productitem .price s { font-size: 0.75rem; position: absolute; left: 0.5rem; }
</style>
`;

var companyDetail = '{"id":"100","Name":"Industrial In Stock","Address":"109 Webb St","Country":"Usa","State":"Oh","City":"Dayton","Zip":"45403","Phone":"1-513-423-8866","Notes":null,"Deleted":"0","Url":"industrialinstock.com","Logo":"65b7facbaee9d.png","Street2":null,"Time_Zone":"America\/New_York","Email":"customerservice@ezkinco.com","AccountTypeId":"1","isDemo":null,"SubscriptionActive":"1","Subscription_Expiration":"2023-02-25 00:00:00","SubscriptionName":"Starter","Subscription_Period":null,"SubscriptionId":"5","AutoRenewActive":"1","billing_agreement_id":"I-YENT2626MA7U","webPageActive":"1","braintreeSubscriptionId":null,"EstimatedNo":null,"teamSize":null}';