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

$text_elements_color = flo_data($data, "text_elements_color");
$title = flo_data($data, "title");
$title_font = flo_data($data, "title_font");
$background_image = flo_data($data, "background_image");
$background_image_height = flo_data($data, "background_image_height");
$background_image_height_rem = $background_image_height / 16 . "rem";
$overlay_color = flo_data($data, "overlay_color");
$overlay_color_opacity = flo_data($data, "overlay_color_opacity") / 100;
$questions_and_answers = flo_data($data, "questions_and_answers");
$question_font = flo_data($data, "question_font");
$answer_font = flo_data($data, "answer_font");
$faq_counter_number_font = flo_data($data, "faq_counter_number_font");

$total_faq_number = $questions_and_answers ? count($questions_and_answers) : '';
$display_navigation_class = $total_faq_number == 1 ? $b."__navigation--hide" : "";
$run_multiple_faq_questions = $total_faq_number > 1 ? "flo_faq_2" : "";

// Mobile Options

$display_background_image = flo_data($data, "display_background_image");
$has_image = $display_background_image ? "" : "mobile-image-disabled";
$text_color = flo_data($data, "text_color");
$hide_overlay_class = $display_background_image ? "" : $b."__image-overlay--hide";
$mobile_options = $display_background_image ? "" : "color:".$text_color."; border-color: ".$text_color." ";

// Image Optimization
$img_sizes = array(
 'mobile' => array('width' => 1200, 'height' => $background_image_height * 2),  // mobile size
 'tablet' => array('width' => 2048, 'height' => $background_image_height * 2), // tablet size
 'desktop' => array('width' => 2560, 'height' => $background_image_height *2),
);

//set cropt to false so that the image will always be centered
$img_vars = generate_srcsets($background_image['url'], $img_sizes, $crop = false);

?>

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

    ".$b__uniq_for_css." {
      color: ".$text_elements_color.";
      border-color: ".$text_elements_color.";
    }

    /* START: TITLE AND IMAGE */

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

      ".$b__uniq_for_css." ".$b__for_css."__image-overlay {
        background-color: ".$overlay_color.";
        opacity: ".$overlay_color_opacity.";
      }

    /* END: TITLE AND IMAGE */


    /* START: FAQ SLIDER */

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__question",
      $question_font
      )
      ."

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__answer",
      $answer_font
      )
      ."

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__faq-counter",
      $faq_counter_number_font
      )
      ."

    /* END: FAQ SLIDER */

  ",

  "breakpoint__medium_up" => "

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

  ",

  "breakpoint__small_only" => "
    ".$b__uniq_for_css." {

      ".$mobile_options.";

    }

  "
], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php $__env->startSection('block_content'); ?>
  <div class="<?php echo $b; ?> <?php echo $b__uniq; ?>">
    <?php if($background_image): ?>
      <img class="<?php echo $b; ?>__image <?php echo $has_image; ?>"
      src ="<?php echo $background_image['url']; ?>"
      srcset="<?php echo $img_vars['srcsets']; ?>"
      alt ="<?php echo $background_image['alt']; ?>"
      sizes ="<?php echo $img_vars['sizes']; ?>"
      />
    <?php endif; ?>
    <div class="<?php echo $b; ?>__image-overlay <?php echo $hide_overlay_class; ?>"></div>
      <?php if($title): ?>
        <h2 class="<?php echo $b; ?>__title"><?php echo $title; ?></h2>
      <?php endif; ?>

    <div class="<?php echo $b; ?>__faq-slider">
        <?php if($questions_and_answers): ?>

            <?php foreach($questions_and_answers as $single_q_and_a): ?>
              <?php
                $question = flo_data($single_q_and_a, "question");
                $answer = flo_data($single_q_and_a, "answer");
              ?>
              <div class="<?php echo $b; ?>__faq-slide">
                <div class="<?php echo $b; ?>__faq-slide-content">
                  <h3 class="<?php echo $b; ?>__question"><?php echo $question; ?></h3>
                  <div class="<?php echo $b; ?>__answer"><?php echo $answer; ?></div>
                </div>
              </div>
            <?php endforeach; ?>

        <?php endif; ?>

    </div>

    <div class="<?php echo $b; ?>__navigation <?php echo $display_navigation_class; ?>">

      <i class="<?php echo $b; ?>__arrow <?php echo $b; ?>__arrow--left flo-icon-line-arrow-left <?php echo $b; ?>__slide-previous"></i>

      <div class="<?php echo $b; ?>__faq-counter">
        <div class="<?php echo $b; ?>__current-item-number"></div>
        <div class="<?php echo $b; ?>__number-divider"></div>
        <div class="<?php echo $b; ?>__total-item-number"></div>
      </div>

      <i class="<?php echo $b; ?>__arrow <?php echo $b; ?>__arrow--right flo-icon-line-arrow-right <?php echo $b; ?>__slide-next"></i>

    </div>

  </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" => $run_multiple_faq_questions // 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(); ?>