<?php /*

Element label: Main hero
Element name: element01

*/

$message_service = new dinamo_donator_messages_service();
$language = get_current_language();
$messages = $message_service->get_messages(10, $language);
?>

<section class="hero">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="hero__content">
          <?php if (get_sub_field('hero_text_svg')) { ?>
            <?php $hero_svg = get_sub_field('hero_text_svg'); ?>
            <img class="hero__title-image" src="<?= $hero_svg['url']; ?>" alt="<?= $hero_svg['alt']; ?>" />
          <?php  } ?>
          <?php if (get_sub_field('video')) { ?>
            <button class="btn btn--blue js-open-video" data-video-id="<?= get_sub_field('video'); ?>"><?= __('Pogledaj video', 'dinamo'); ?></button>
          <?php  } ?>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="messages">
          <div class="messages__block">
            <?php
            $index = 1;
            foreach ($messages as $message){
            $heart_bg = "heart-1.svg";
            if(strlen($message->message) < 80){
              $heart_size = 3;
            }else if(strlen($message->message) < 160){

              $heart_size = 2;
            }else{
              $heart_size = 1;
              $heart_bg = "heart-rect-background.svg";
            }



            ?>
              <div class="messages__img-wrap heart-<?= $heart_size; ?> x<?= $index; ?>">
                <img data-src="<?php echo THEMEROOT; ?>frontend/img/hearts/<?= $heart_bg; ?>" class="lazyload messages__img" alt="Nema predaje">
                <span><?= $message->message ?></span>
              </div>
            <?php
              if ($index == 3) {
                $index = 1;
              } else {
                $index++;
              }
            } ?>

          </div>

        </div>
      </div>
    </div>
  </div>
</section>