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


// C. Image Area
$elements_color = flo_data($data, "elements_color");
$image = flo_data($data, "image");
$image_height = flo_data($data, "image_height");
$image_height_rem = $image_height / 16 . "rem";
$image_overlay_color = flo_data($data, "image_overlay_color");
$overlay_opacity = flo_data($data, "overlay_opacity") / 100;

$display_header = flo_data($data, "display_header");
$display_header_class = $display_header ? $b . "--header-is-visible" : "";
$brighness_class = flo_color_bright($elements_color) ? "flo-header__logo--is-light" : "";

// B. Text Area
$title = flo_data($data, "title");
$title_font = flo_data($data, "title_font");
$text = flo_data($data, "text");
$text_font = flo_data($data, "text_font");

$mobile_merge_menu = flo_data($data, "mobile_merge_header", false) ? $b . "__header-mobile-merge" : "";
$mobile_logo_image = flo_data($data, "light_logo_image", false) ? $b ."__light-mobile-logo" : "";
$mobile_image_height = flo_data($data, "mobile_image_height", "400") / 16 ."rem";
$mobile_image_height_numeric = flo_data($data, "mobile_image_height", "400");
// Image Optimization

$img_sizes = array(
 'mobile' => array('width' => 1200, 'height' =>  $mobile_image_height_numeric *2),  // mobile size
 'tablet' => array('width' => 2048, 'height' => $image_height * 2), // tablet size
 'desktop' => array('width' => 2560, 'height' => $image_height * 3),
);

$img_vars = generate_srcsets($image['url'], $img_sizes, $crop = false);

?>

<?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."__text",
      $text_font
      )
      ."

      ".$b__uniq_for_css." {
        color: ".$elements_color.";
        height: ".$image_height_rem.";
      }

      ".$b__uniq_for_css." ".$b__for_css."__image-overlay {
        background-color: ".$image_overlay_color.";
        opacity: ".$overlay_opacity.";
      }

    ",
    "breakpoint__medium_up" => "
      ".$b__uniq." {
        height: ".$image_height_rem.";
      }

    ",
    "breakpoint__small_only" => "
      ".$b__uniq_for_css." {
        height: ".$mobile_image_height.";
        position : relative;
      }

      ".$b__uniq_for_css." .flo-header-mobile {
        color: ".$elements_color.";
      }
    "
  ], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
  <div class="<?php echo $b; ?> <?php echo $b__uniq; ?> <?php echo $display_header_class; ?> <?php echo $mobile_merge_menu; ?> <?php echo $mobile_logo_image; ?>">
    <img class="<?php echo $b; ?>__image-wrap" src="<?php echo $image['url']; ?>" srcset="<?php echo $img_vars['srcsets']; ?>" alt="<?php echo $image['alt']; ?>" sizes="<?php echo $img_vars['sizes']; ?>" />
      <?php if($display_header): ?>
          <div class="<?php echo $b; ?>__header-area <?php echo $brighness_class; ?>">
            <?php echo $__env->make('components.flo-header', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
          </div>
      <?php endif; ?>
      <div class="<?php echo $b; ?>__image-overlay"></div>

      <div class="<?php echo $b; ?>__title-area">
        <?php if($title): ?>
          <h2 class="<?php echo $b; ?>__title">
            <?php echo $title; ?>

          </h2>
        <?php endif; ?>
        <?php if($text): ?>
          <div class="<?php echo $b; ?>__text">
            <?php echo $text; ?>

          </div>
        <?php endif; ?>
      </div>

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

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