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

/* START: Image Area */

  $image = flo_data($data, "image");
  $image_height = flo_data($data, "image_height");
  $image_overlay_color = flo_data($data, "image_overlay_color");
  $overlay_opacity = flo_data($data, "overlay_opacity") / 100;

/* END: Image Area */

/* START: Text Area */

  /* START: Change elements color if user does not set an image */
    if ($image) {
      $elements_color = flo_data($data, "with_image_elements_color");
    } else {
      $elements_color = flo_data($data, "without_image_elements_color");
    }
  /* END: Change elements color if user does not set an image */

  $title = flo_data($data, "title");
  $title_font = flo_data($data, "title_font");
  $subtitle = flo_data($data, "subtitle");
  $subtitle_font = flo_data($data, "subtitle_font");
  $text_paragraph = flo_data($data, "text_paragraph");
  $button = flo_data($data, "button");
  $button_label_font = flo_data($data, "button_label_font");
  $button_label_color = flo_data($data, "button_label_color");
  $button_background_color = flo_data($data, "button_background_color");

/* END: Text Area */

/* START: Mobile Options */
  $mobile_image_height = flo_data($data, "mobile_image_height");
/* END: Mobile Options */

/* START: Do not set block height if there is no image set */
  if ($image) {
    $image_height_rem = $image_height / 16 . "rem";
    $mobile_image_height_rem = $mobile_image_height / 16 . "rem";
  } else {
    $image_height_rem = "auto";
    $mobile_image_height_rem = "auto";
  }
/* END: Do not set block height if there is no image set */

/* START: Background Image Optimization */
  $attachment_id = $image['ID'];
  $img_sizes = array(
   'small' => array('width' => 99999, 'height' => $mobile_image_height * 2),  // mobile size
   'medium' => array('width' => 99999, 'height' => $image_height * 2), // tablet size
   'large' => array('width' => 99999, 'height' => $image_height * 2),
  );
  $img_vars = flo_get_bg_image_vars($attachment_id, $img_sizes, $crop = false);
/* END: Background Image Optimization */

?>

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

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

    /* START: Image Area */
      ".$b__uniq_for_css." ".$b__for_css."__image-overlay {
        background-color: ".$image_overlay_color.";
        opacity: ".$overlay_opacity.";
      }
    /* END: Image Area */

    /* START: TEXT AREA */

      ".
      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."__subtitle",
      $subtitle_font
      )
      ."

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

      ".$b__uniq_for_css." ".$b__for_css."__button {
        color: ".$button_label_color.";
        background-color: ".$button_background_color.";
      }
        ".$b__uniq_for_css." ".$b__for_css."__button:hover {
          color: ".$button_background_color.";
          background-color: ".$button_label_color.";
        }

    /* END: TEXT AREA */

  ",

  "breakpoint__medium_up" => "

    /* START: IMAGE AREA */

      ".$b__uniq_for_css." {
        min-height: ".$image_height_rem.";
      }

    /* END: IMAGE AREA */

  ",

  "breakpoint__small_only" => "

    /* START: Mobile Image Area */

      ".$b__uniq_for_css." {
        min-height: ".$mobile_image_height_rem.";
      }

      ".$b__uniq_for_css." ".$b__for_css."__button {
        color: ".$button_background_color.";
        background-color: ".$button_label_color.";
      }

    /* END: Mobile Image Area */

  "
], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php $__env->startSection('block_content'); ?>
  <div class="<?php echo $b; ?> <?php echo $b__uniq; ?>" style="<?php echo $img_vars; ?>" aria-label="<?php echo $image['alt']; ?>">

    <?php if($image): ?>
      <div class="<?php echo $b; ?>__image-overlay"></div>
    <?php endif; ?>

    <?php if($title or $subtitle or $text_paragraph or isset($button['title'])): ?>
      <div class="<?php echo $b; ?>__text-area">

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

          </h2>
        <?php endif; ?>

        <?php if($subtitle): ?>
          <h3 class="<?php echo $b; ?>__subtitle">
            <?php echo $subtitle; ?>

          </h3>
        <?php endif; ?>

        <?php if($text_paragraph): ?>
          <div class="<?php echo $b; ?>__text-paragraph flo-post">
            <?php echo $text_paragraph; ?>

          </div>
        <?php endif; ?>

        <?php if(isset($button['title']) and strlen($button['title'])): ?>
          <div class="<?php echo $b; ?>__button-wrap">
            <a class="<?php echo $b; ?>__button" href="<?php echo $button['url']; ?>" target="<?php echo $button['target']; ?>">
              <?php echo $button['title']; ?>

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

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

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