<?php
$headline = mb_get_block_field("timeline_headline");
$timeline_group = mb_get_block_field('timeline_points');
?>


<section <?= inoby_block_attrs($attributes, ["class" => "timeline"]) ?>>
  <div class="container">
    <?php if(!empty($headline)) { ?>
    <div class="row">
      <div class="col-12">
        <h2>
          <?= $headline ?>
        </h2>
      </div>
    </div>
    <?php } ?>

    <?php if(!empty($timeline_group)) { ?>
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <?php foreach($timeline_group as $i => $point) { ?>
          <div
            class="point-wrapper <?php if((sizeof($timeline_group) === 4 && $i === 3) || (sizeof($timeline_group) === 12 && $i === 11)) { echo 'last'; } ?>">
            <?php if(isset($point['done']) && $point['done']) { ?>
            <?php if(isset($point['link'])) { ?>
            <a class="point active" href="<?= $point['link'] ?>">
            </a>
            <?php } else { ?>
            <div class="point active">
            </div>
            <?php } ?>
            <?php } else { ?>
            <?php if(isset($point['link'])) { ?>
            <a class="point" href="<?= $point['link'] ?>">
            </a>
            <?php } else { ?>
            <div class="point">
            </div>
            <?php } ?>
            <?php } ?>
            <div class="content-wrapper">
              <?php if(isset($point['date']) && $point['date']) { ?>
              <p class="complete"><?= $point['date'] ?></p>
              <?php } ?>

              <?php if(isset($point['desc']) && $point['desc']) { ?>
              <p><?= $point['desc'] ?></p>
              <?php } ?>
            </div>
          </div>
          <?php if($i === 3 || $i === 11) { ?>
          <div class="point-wrapper empty">
          </div>
          <div class="point-wrapper empty">
          </div>
          <?php } ?>
          <?php } ?>
        </div>
      </div>
    </div>
    <?php } ?>
  </div>
</section>