<?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") / 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 = 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" : "";
?>

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

    ".$b__uniq_for_css." {
      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
      )
      ."

      ".$b__uniq_for_css." ".$b__for_css."__number-divider {
        background-color: ".$text_elements_color.";
      }

    /* END: FAQ SLIDER */

  ",

  "breakpoint__medium_up" => "

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

  "
], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php $__env->startSection('block_content'); ?>
  <div class="<?php echo $b; ?> <?php echo $b__uniq; ?>" style="background-image: url(<?php echo $background_image['url']; ?>)" aria-label="<?php echo $background_image['alt']; ?>">
    <div class="<?php echo $b; ?>__image-overlay"></div>
      <?php if($title): ?>
        <div class="<?php echo $b; ?>__title"><?php echo $title; ?></div>
      <?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(); ?>