<?php /* NOTE: GENERATED BY GULP !!! */ ?><?php
$b = "flo-block-gallery-view-2"; // To be used inside HTML

// Start: Class name automation
  $b__for_css = ".".$b; // To be used inside CSS
  $b__uniq = $b."--".mt_rand(1, 999); // To be used inside HTML
  $b__uniq_for_css = ".".$b__uniq; // To be used inside CSS
// End: Class name automation

$columns = flo_data($data, "columns", 2);
$columns_class = $b . "--columns-" . $columns;
$gap = flo_data($data, "gap", 89) / 16;
$gap = $gap / 2 . "rem";
//$image_width = "calc(100% / ".$columns." - ((".$columns." - 1) * ".$gap.") / ".$columns." - 0.05rem )";
$image_width = "calc(100% / " . $columns . ")";
$spacer_src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=";

$mobile_columns = flo_data($data, "mobile_columns");
$mobile_image_width = "calc(100% / " . $mobile_columns . ")";
$mobile_gap = flo_data($data, "mobile_gap", 10) / 16;
$mobile_gap = $mobile_gap / 2 . "rem";
global $images;
?>
<?php echo $__env->make('components.flo-generic-gallery-view-data', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>


<?php $__env->startSection('block_content'); ?>
  <?php echo $__env->make('core.style', [
    "breakpoint__general" => "


    ",
    "breakpoint__medium_up" => "
      .grid-sizer{
        width: ".$image_width.";
      }
      ".$b__uniq_for_css." ".$b__for_css."__image {
        width: ".$image_width.";
        padding: ".$gap.";
      }
      ".$b__uniq_for_css."{
        margin: -".$gap." -".$gap." 0 -".$gap.";
      }
    ",
    "breakpoint__small_only" => "
      .grid-sizer{
        width: ".$mobile_image_width.";
      }
      ".$b__uniq_for_css." ".$b__for_css."__image {
        width: ".$mobile_image_width.";
        padding: ".$mobile_gap.";
      }
      ".$b__uniq_for_css."{
        margin: -".$mobile_gap.";
      }
    "
  ], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
  <div class="<?php echo $b; ?> <?php echo $b__uniq; ?> <?php echo $columns_class; ?>" data-mobile-cols="<?php echo $mobile_columns; ?>">
    <div class="grid-sizer"></div>
    <?php foreach($images as $image): ?>
    <?php

      $image_url = (isset($image['slide']['image'])) ? $image['slide']['image']['url'] : $image['slide']['url'];

      $srcset_sizes = [
        'mobile' => array('width' => 780, 'height' => 9999),  // mobile size
        'tablet' => array('width' => round(792/$columns) * 2, 'height' => 9999 ), // tablet size
        'desktop' => array('width' => round(1114/$columns) * 2, 'height' => 9999),
      ];

      $img_srcset = generate_srcsets($image_url, $srcset_sizes, false);

      $video_url = $image['video_code'];
      $fb_href = $image['full_img'];

      if(isset($video_url) && strlen($video_url) > 0) {
        if(strpos($video_url, 'iframe')){
          preg_match('/src="([^"]+)"/', $video_url, $match);
          $fb_href = $match[1];
        } else {
          $fb_href = $image['full_img'];
        }
        $img_caption = '';
      } else {
        $img_caption = $image['slide']['caption'];
      }

    ?>
        <a class="<?php echo $b; ?>__image to-appear-disabled" data-caption="<?php echo $img_caption; ?>" href=<?php echo $fb_href; ?> data-fancybox="<?php echo $b__uniq; ?>" data-thumb="<?php echo $image["img_url_small"]; ?>">
          <?php if($video_url): ?>
            <div class="flo-video-embed__video-button">
              <i class="flo-video-embed__video-button-icon flo-video-embed__video-button-icon--play flo-icon-play"></i>
            </div>
          <?php endif; ?>
            <img
              class="<?php echo $b; ?>__image-thumb"
              src="<?php echo $spacer_src; ?>"
              data-src="<?php echo $image["img_url_large"]; ?>"
              data-srcset="<?php echo $img_srcset['srcsets']; ?>"
              sizes="<?php echo $img_srcset['sizes']; ?>"
              alt="<?php echo $image["alt"]; ?>"
            />
        </a>

    <?php endforeach; ?>
  </div>
<?php $__env->stopSection(true); ?>

<?php echo $__env->make('layout.block', [
  "block_classes" => "", // Will be added to main block div. e.g. flo-block--full-width
  "data_onready" => "flo_block_gallery_view_2" // Specify a function (see _blank.js on how to define) that will be executed on document ready.
], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>