<?php /* NOTE: GENERATED BY GULP !!! */ ?><?php
$b = "flo-block-listing-3"; // 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

$featured_image_height = flo_data($data, "featured_image_height");
$featured_image_height_rem = $featured_image_height / 16 ."rem";
$elements_color = flo_data($data, "elements_color");
$background_color = flo_data($data, "background_color");
$display_decorative_images = flo_data($data, "display_decorative_images");
$title_font = flo_data($data, "title_font");
$display_category = flo_data($data, "display_category");
$category_font = flo_data($data, "category_font");
$display_excerpt = flo_data($data, "display_excerpt");
$excerpt_font = flo_data($data, "excerpt_font");
$button_label = flo_data($data, "button_label");
$button_font = flo_data($data, "button_font");

// Mobile Options

$mobile_image_height = flo_data($data, "mobile_featured_image_height");
$mobile_image_height_rem = $mobile_image_height / 16 . "rem";

?>

<?php echo $__env->make('components.flo-generic-listing-items-data', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php
  global $items;
?>
<?php $__env->startSection('block_content'); ?>
  <?php echo $__env->make('core.style', [
    "breakpoint__general" => "

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__title",
      $title_font
      )
      ."

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__category",
      $category_font
      )
      ."

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__excerpt",
      $excerpt_font
      )
      ."

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__button",
      $button_font
      )
      ."

      ".$b__uniq_for_css." {
        color: ".$elements_color.";
        border-color: ".hex2rgba($elements_color, 0.3).";
      }
      ".$b__uniq_for_css." ".$b__for_css."__excerpt {
        color: ".hex2rgba($elements_color, 0.7).";
      }
      ".$b__uniq_for_css." ".$b__for_css."__item {
        background-color: ".$background_color.";
      }

    ",

    "breakpoint__medium_up" => "

      ".$b__uniq_for_css." ".$b__for_css."__featured-image-wrap {
        height: ".$featured_image_height_rem."
      }

      ".$b__uniq_for_css." ".$b__for_css."__button:hover {
        background-color: ".$elements_color.";
        color: ".$background_color.";
      }

    ",

    "breakpoint__small_only" => "

      ".$b__uniq_for_css." ".$b__for_css."__featured-image-wrap {
        height: ".$mobile_image_height_rem."
      }

    "
  ], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
  <div class="<?php echo $b; ?> <?php echo $b__uniq; ?>">
    <?php foreach($items as $item): ?>
      <?php
        $has_featured_img_class = $item["has_feat_img"] ? $b . "__item--has-featured-image" : "";

        // Featured Image Optimization
        $img_sizes = array(
         'mobile' => array('width' => 780, 'height' => $mobile_image_height * 3),  // mobile size
         'tablet' => array('width' => 594, 'height' => $featured_image_height * 2), // tablet size
         'desktop' => array('width' => 1114, 'height' => $featured_image_height * 3),
        );

        $img_vars = generate_srcsets($item['featured_image_url'], $img_sizes, $crop = false);

      ?>
      <a class="<?php echo $b; ?>__item <?php echo $has_featured_img_class; ?>" href="<?php echo $item["url"]; ?>">
        <?php if($item["has_feat_img"]): ?>
          <span class="<?php echo $b; ?>__featured-image-wrap">
            <img class="<?php echo $b; ?>__featured-image"
              data-src="<?php echo $item['featured_image_url']; ?>"
              data-srcset="<?php echo $img_vars['srcsets']; ?>"
              sizes="<?php echo $img_vars['sizes']; ?>"
              alt="<?php echo $item['feat_image_alt']; ?>"
            />
          </span>
        <?php endif; ?>
        <span class="<?php echo $b; ?>__text-area">
          <?php if($display_decorative_images && $item["decorative_image"]): ?>
            <img class="<?php echo $b; ?>__decorative-image" src="<?php echo $item["decorative_image"]["url"]; ?>" alt="">
          <?php endif; ?>
          <h2 class="<?php echo $b; ?>__title">
            <?php echo $item["title"]; ?>

          </h2>
          <?php if($display_category): ?>
            <h4 class="<?php echo $b; ?>__category">
              <?php echo $item["first_category"]; ?>

            </h4>
          <?php endif; ?>
          <?php if($display_excerpt && $item["excerpt"]): ?>
            <p class="<?php echo $b; ?>__excerpt">
              <?php
                $ln = 120;
                $excerpt = mb_substr(strip_tags(strip_shortcodes($item["excerpt"])), 0, $ln);
                $delim = "";
                if(strlen($excerpt) > 120) $delim = "...";
              ?>
              <?php echo $excerpt . $delim; ?>

            </p>
          <?php endif; ?>
          <?php if($button_label): ?>
            <span class="<?php echo $b; ?>__button">
              <?php echo $button_label; ?>

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

<?php echo $__env->make('layout.block', [
  "block_classes" => "", // Will be added to main block span. e.g. flo-block--full-width
   "data_onready" => "flo_block_listing_3" // 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(); ?>