<div class="adc-vendor-details adc-responsive">
	<div class="content">	
		<div class="header">			
			<div class="logo">
				<img src="<?=$product['logo']?>"/>
			</div>
			<div class="title">
				<div class="vendor"><?=$product['vendor_title']?></div><br/>
				<div class="status">Status: Beta</div>
				<div class="category">Category: <?=implode(",", $product['categories'])?></div><br/>
				<div class="works">Works With: <?=implode(", ",$product['works_with'])?></div>
			</div>
		</div>
		<? if ($product['video']):?>
			<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
			<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css" />
			<div class="video">
				<video poster="<?=$product['video']['urls']['poster']?>" controls>
  					<source src="<?=$product['video']['urls']['mp4']?>" type="video/mp4">
  					<!-- Captions are optional -->
  					<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
				</video>
				<script>plyr.setup();</script>			
			</div>
		<? endif;?>
		<? if (is_array($product['benefits']) && sizeof($product['benefits']) > 0):?>
		<div class="text">
			<div class="title">What the <?=$product['product_title']?> integration does</div>
			<ul>
				<? foreach ($product['benefits'] as $b):?>
				<li><?=$b?></li>
				<? endforeach;?>
			</ul>
		</div>
		<? endif;?>

		<? if (strlen($product['product_description']) > 0):?>
		<div class="text">
			<div class="title">Integration Details</div>
			<?=$product['product_description']?>
		</div>
		<? endif;?>

		<? if (strlen($product['vendor_description']) > 0):?>
		<div class="text">
			<div class="title">About <?=$product['vendor_title']?></div>
			<?=$product['vendor_description']?>
			<? if ($product['vendor_products_count'] > 1):?>
			<div class="links">
				<a href="/search-products?adc-vendor=<?=urlencode($product['vendor_uid'])?>">Other BIM 360 Integration from this vendor</a>
			</div>
			<? endif;?>
		</div>
		<? endif;?>
		<? if (sizeof($product['social_proofs']) > 0):?>
		<div class="social-proofs">
			<div class="title">Trusted by people like you</div>
			<? foreach ($product['social_proofs'] as $p):?>
			<div class="proof"><?=trim($p)?></div>
			<? endforeach;?>
		</div>
		<? endif;?>
		<? if ($product['whitepaper']):?>
		<div class="whitepaper">
			<div class="title">Learn more about this integration</div>
			<div class="pdf">
				<img src="<?=$product['whitepaper']['image_url']?>"/>
				<a href="<?=$product['whitepaper']['pdf_url']?>" target="_blank">Download Now</a>
			</div>
			<div class="description">
			<?=$product['whitepaper']['description']?>
			</div>
		</div>
		<? endif;?>
	</div><div class="sidebar">	
		<ul class="section info">
			<div class="title">Support</div>
			<? if (isset($product['vendor_title']) && strlen($product['vendor_title']) > 0):?>
			<li><span class="title">Built By</span><span class="value"><?=$product['vendor_title']?></span></li>
			<? endif;?>
			<? if (isset($product['support_email']) && strlen($product['support_email']) > 0):?>
			<li><span class="title">Email</span><span class="value"><a href="mailto:<?=$product['support_email']?>"><?=$product['support_email']?></a></span></li>
			<? endif;?>
			<? if (isset($product['product_website']) && strlen($product['product_website']) > 0):?>
			<li><span class="title">Website</span><span class="value"><a href="<?=$product['product_website']?>" target="_blank"><?=$product['product_website']?></a></span></li>			
			<? endif;?>
			<? if (isset($product['support_phone']) && strlen($product['support_phone']) > 0):?>
			<li><span class="title">Phone</span><span class="value"><?=$product['support_phone']?></span></li>
			<? endif;?>
		</ul>
		<? if (is_array($product['screenshots']) && sizeof($product['screenshots']) > 0): ?>
			<div class="section screenshots">
				<div class="title">Screen Shots</div>
				<div class="screenshots-gallery">
				<? foreach ($product['screenshots'] as $s):?>
					<a href="<?=$s['url']?>" title="<?=$s['title']?>">
						<img src="<?=$s['url_preview']?>"/>
					</a>
				<? endforeach;?>
				</div>
			</div>
			<script>
				jQuery(document).ready(function() {
					jQuery('.screenshots-gallery').magnificPopup({
						delegate: 'a',
						type: 'image',
						tLoading: 'Loading image #%curr%...',
						mainClass: 'mfp-img-mobile',
						gallery: {
							enabled: true,
							navigateByImgClick: true,
							preload: [0,1] // Will preload 0 - before current, and 1 after the current image
						},
						image: {
							tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
							titleSrc: function(item) {
								return item.el.attr('title') + '<small>by <?=$product['vendor_title']?></small>';
							}
						}
					});
				});
			</script>
		<? endif;?>
		<? if (isset($settings['form'])):?>
		<div class="section hubspot-form">
			<div class="title">Get Connected Now!</div>
			<!--[if lte IE 8]>
			<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
			<![endif]-->
			<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
			<script>
  				hbspt.forms.create({ 
    				portalId: '<?=$settings['form']['portal_id']?>',
    				formId: '<?=$settings['form']['form_id']?>',
    				onFormReady : function(form){
    					jQuery(form).find("input[name=community_company_name]").val(<?=json_encode($product['vendor_title']."")?>);
    					jQuery(form).find("input[name=community_integration_product_name]").val(<?=json_encode($product['product_title']."")?>);
    					//community_vendor_first_name
    					//community_vendor_last_name
    					
    				}
  				});
			</script>
		</div>
		<? endif;?>
		<? if (sizeof($product['articles']) > 0):?>
		<div class="articles">
			<div class="title">Read about how this product works</div>
			<ul>
			<? foreach ($product['articles'] as $a):?>
				<li><a href="<?=$a['url']?>" target="_blank"><?=$a['title']?></a></li>
			<? endforeach;?>
			</ul>
		</div>
		<? endif;?>
	</div>	
</div>