<?php
/**
 * The template used for displaying content equipments
 *
 * Prohibit direct script loading
 ------------------------------------------------------------ */
 defined( 'ABSPATH' ) || die( );

	if ( function_exists( 'get_field' ) && function_exists( 'have_rows' ) && have_rows( 'water-features' )) :
		$equipments = get_field( 'water-features' );

?>

	<div class="pool-equipments">
  	<div class="mobile-desktop">
      <div class="row">
        <?php $rows  = floor( count( $equipments ) / 3 ); ?>
        <?php for( $jndex = 0 ; $jndex < 3 ; $jndex++ ) : ?>   
          <div class="column four">
            <?php for( $kndex = 0 ; $kndex < $rows ; $kndex++ ) : ?>
              <?php $index     = $kndex * 3 + $jndex; ?>
              <?php $equipment = (object)$equipments[ $index ]; ?>
              <div class="equipment">
                <?php if ( $equipment->{ 'water-feature-image' }) : ?>
                  <div class="image">
                    <img src="<?php echo $equipment->{ 'water-feature-image' }; ?>" alt="<?php echo $equipment->{ 'water-feature-title' }; ?>" />
                  </div>
                <?php endif; ?>
                <h3 class="title"><?php echo $equipment->{ 'water-feature-title' }; ?></h3>
				<div class="description">
				<div class="readmore-inline-wrap"><span><?php echo $equipment->{ 'water-feature-description' }; ?></span><span class="more_inline" style="display:none;"><?php echo $equipment->{ 'read_more_content' }; ?></span><button class="readmore_inline">Read More</button>
				</div>
				</div>
              </div>
            <?php endfor; ?>
            <?php if (( $jndex == 0 && count( $equipments ) % 3 ) ||  ( $jndex == 1 && count( $equipments ) % 3 == 2 )) : ?>
              <?php $index     = $kndex * 3 + $jndex; ?>
              <?php $equipment = (object)$equipments[ $index ]; ?>
              <div class="equipment">
                <?php if ( $equipment->{ 'water-feature-image' }) : ?>
                  <div class="image">
                    <img src="<?php echo $equipment->{ 'water-feature-image' }; ?>" alt="<?php echo $equipment->{ 'water-feature-title' }; ?>" />
                  </div>
                <?php endif; ?>
                <h3 class="title"><?php echo $equipment->{ 'water-feature-title' }; ?></h3>
                <div class="description">
				<div class="readmore-inline-wrap"><span><?php echo $equipment->{ 'water-feature-description' }; ?></span><span class="more_inline" style="display:none;"><?php echo $equipment->{ 'read_more_content' }; ?></span><button class="readmore_inline">Read More</button>
				</div>
				</div>
              </div>          
            <?php endif; ?>
          </div>
        <?php endfor; ?>
      </div>
    </div>
    <div class="tablet">
    	<div class="row">
        <?php $rows  = floor( count( $equipments ) / 2 ); ?>
        <?php for( $jndex = 0 ; $jndex < 2 ; $jndex++ ) : ?>   
          <div class="column six">
            <?php for( $kndex = 0 ; $kndex < $rows ; $kndex++ ) : ?>
              <?php $index     = $kndex * 2 + $jndex; ?>
              <?php $equipment = (object)$equipments[ $index ]; ?>
              <div class="equipment">
                <?php if ( $equipment->{ 'water-feature-image' }) : ?>
                  <div class="image">
                    <img src="<?php echo $equipment->{ 'water-feature-image' }; ?>" alt="<?php echo $equipment->{ 'water-feature-title' }; ?>" />
                  </div>
                <?php endif; ?>
                <h3 class="title"><?php echo $equipment->{ 'water-feature-title' }; ?></h3>
                <div class="description">
				<div class="readmore-inline-wrap"><span><?php echo $equipment->{ 'water-feature-description' }; ?></span><span class="more_inline" style="display:none;"><?php echo $equipment->{ 'read_more_content' }; ?></span><button class="readmore_inline">Read More</button>
				</div>
				</div>
              </div>
            <?php endfor; ?>
            <?php if (( $jndex == 0 && count( $equipments ) % 2 )) : ?>
              <?php $index     = $kndex * 2 + $jndex; ?>
              <?php $equipment = (object)$equipments[ $index ]; ?>
              <div class="equipment">
                <?php if ( $equipment->{ 'water-feature-image' }) : ?>
                  <div class="image">
                    <img src="<?php echo $equipment->{ 'water-feature-image' }; ?>" alt="<?php echo $equipment->{ 'water-feature-title' }; ?>" />
                  </div>
                <?php endif; ?>
                <h3 class="title"><?php echo $equipment->{ 'water-feature-title' }; ?></h3>
                <div class="description">
				<div class="readmore-inline-wrap"><span><?php echo $equipment->{ 'water-feature-description' }; ?></span><span class="more_inline" style="display:none;"><?php echo $equipment->{ 'read_more_content' }; ?></span><button class="readmore_inline">Read More</button>
				</div>
				</div>
              </div>          
            <?php endif; ?>
          </div>
        <?php endfor; ?>      
      </div>
    </div>
	
	<div class="mobile-true">
		<div class="row">
			<?php while ( have_rows('water-features') ) : the_row(); ?>
				<?php $read_more_content = get_sub_field('read_more_content'); ?>
				<div class="column twelve">
					<div class="equipment">
						<div class="image">
							<img src="<?php the_sub_field('water-feature-image'); ?>" alt="<?php the_sub_field('water-feature-title'); ?>" />
						</div>
						<h3 class="title">
							<?php the_sub_field('water-feature-title'); ?>
						</h3>
						<div class="description">
							<div class="readmore-inline-wrap"><span><?php the_sub_field('water-feature-description'); ?></span><?php if ($read_more_content != "") { ?><span class="more_inline" style="display:none;"><?php the_sub_field('read_more_content'); ?></span><button class="readmore_inline">Read More</button><?php } ?>
							</div>
						</div>
					</div>
				</div>
			<?php endwhile; ?>
		</div>
	</div>
	
  </div>

<?php

endif;