<?php
/**
 * The template for displaying all pages.
 * Template Name: Product page
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package dc
 */

get_header(); ?>

	<div id="primary" class="content-area"> 
		<div class="slider">
			<div class="container">
				<div class="row">
					<?php if( have_rows('product_slider_text') ): ?>
						<div id="contentSlider" class="col-md-12 owl-carousel owl-theme">
							<?php while( have_rows('product_slider_text') ): the_row(); 

								// vars 
								$content = get_sub_field('text'); 

								?>
							<div class="item1">
								<h1> <?php echo $content; ?></h1>
							</div>
							<?php endwhile; ?>					
						</div>
					<?php endif; ?>
				</div>
			 </div>
		</div> <!--
		<section class="tableSec">
			<div class="container">
			<div class="row">
					<div class="col-md-12">
						<div class="homeProductText">
							<h2>BINARY PRODUCT <span> COMBINATIONS</span></h2> 
							<?php if( have_rows('product_mixer') ): ?>	
								  <?php while( have_rows('product_mixer') ): the_row(); 

									// vars 
									$contentL = get_sub_field('product_left'); 
									$contentM = get_sub_field('product_middle'); 
									$contentR = get_sub_field('product_right'); 

									?>		
										<div class="content_row">
											<div class="col-md-4 content_left"> 
												<h2> <?php echo $contentL; ?> </h2>
											</div>
											<div class="col-md-4 content_middle">
												<h2> <?php echo $contentM; ?> </h2>
											</div>
											<div class="col-md-4 content_Right">
												<h2>  <?php echo $contentR; ?> </h2>
											</div>
										</div>
								  <?php endwhile; ?>
							<?php endif; ?>
						</div>
					</div>
				</div>
			</div>
		</section>
		<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
			<path d="M0 0 L50 100 L100 0 Z" />
		</svg>--> 
		<section class="plandetailsSec prodMain">
			
			<div class="prodHead">
				<div class="container"> 
					<div class="row">
						<h2>Products</h2>	
						<h3> <?php the_field('product_heading'); ?> </h3> 
						 
						<h4>Following are some of the examples:</h4>
					</div>
				</div>
			</div>
			<div class="container">
				<?php if( have_rows('products') ): ?>
					<div class="row prdSec">
								<?php while( have_rows('products') ): the_row(); 

									// vars 
									$contentBlue = get_sub_field('product_heading_blue'); 
									$contentGreen = get_sub_field('product_heading_green'); 
									$contentContent = get_sub_field('product_content'); 
									$contentDetail = get_sub_field('product_detail'); 
									$contentImage = get_sub_field('product_image');  

									?>
						<div class="col-md-6 col-md-push-6"> 
							<div class="iconLab"> 
								<!-- <img src="<?php echo $contentImage; ?>" alt=""/> -->
								
								<div class="baker">
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__smoke-fluff"></div>
								  <div class="baker__neck"></div>
								  <div class="baker-body">
									<div class="baker__liquid">
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									  <div class="baker__liquid-bubble"></div>
									</div>
								  </div>
								</div>
								
							</div>
						</div>
						<div class="col-md-6 col-md-pull-6 sideCnt">
							<div class="cntPlan cntP">
							
								<h1 class="title"><?php echo $contentBlue; ?><span><?php echo $contentGreen; ?></span></h1>
								<p><?php echo $contentContent; ?></p> 
								<?php echo $contentDetail; ?>
							</div> 
						</div>
						<div class="clear"></div>
						 <?php endwhile; ?>	
					</div>
				<?php endif; ?> 
			</div>
		</section>

	</div><!-- #primary -->
 
<?php get_footer(); ?>
