<?php
/**
 * Template Name: Products
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Dooblo
 */

get_header(); ?>

<div id="products-page" class="content-area" <?php post_class(); ?>>
	<div id="top-page" ></div>
	<section id="section1" <?php if (get_field('screenshot')=="") { ?>style="margin-bottom: 0px;"<?php }?>>
		<div class="background-image" >
			<div class="image" style="background-image:url(<?php the_field('banner'); ?>);"></div>
		</div>
		<div class="content">
			<h1><?php the_field('subtitle'); ?></h1>
			<div class="screenshot">
                <?php
                if( get_field('screenshot')){
                    ?>
                    <img src="<?php echo get_field('screenshot'); ?>"/>
                    <?php
                }
                ?>
			</div>
		</div>
	</section>

<?php
// check if the flexible content field has rows of data
if( have_rows('sections') ): ?>
	<?php $i = 2; ?>

	<?php while(have_rows('sections')): the_row(); ?>
		<?php
			$class1 = (get_sub_field('layout') == 'left') ? 'alignleft' : 'alignright';
			$class2 = $class1 == 'alignleft' ? 'alignright' : 'alignleft';
			$background = ($i % 2 == 0) ? '#fff' : '#f5f5f5';
		?>

		<section id="section<?php echo $i; ?>" class="section" style="background-color:<?php echo $background; ?>;">
			
			<div class="desktop">
				<div class="container clearfix">
					<div class="section-2 <?php echo $class2; ?> col-sm-5">
						<img src="<?php the_sub_field('icon'); ?>" alt=""/>
					</div>
					<div class="section-1 <?php echo $class1; ?> col-sm-7">
						<h3 class="section1-1"><?php the_sub_field('title'); ?></h3>
						<div class="section1-2">
							<?php the_sub_field('content'); ?>
							<ul>
								<?php while(have_rows('list')): the_row(); ?>
									<li><?php the_sub_field('item'); ?></li>
								<?php endwhile; ?>
							</ul>
						</div>
					</div>

				</div>
			</div>		

		</section>

		<?php $i++; ?>
	<?php endwhile; ?>

	<?php $background = ($i % 2 == 0) ? '#fff' : '#f5f5f5'; ?>
	<section id="section<?php echo $i; ?>" class="section section-signup" style="background-color:<?php echo $background; ?>;">
		<?php while(have_rows('sign_up')): the_row(); ?>
			<div class="container cf">
				<div class="section-1 text-center">
					<h3 class="inline"><?php the_sub_field('text'); ?></h3>
					<a href="<?php the_sub_field('button_url'); ?>" class="btn"><?php the_sub_field('button_text'); ?></a>
				</div>
			</div>
		<?php endwhile; ?>
	</section>
<?php endif; ?>

</div>

<?php get_footer(); ?>