<?php 
/* 
* Block Name: Timeline
* Post Type: page, post
*/
?>
<?php if (isset($block['data']['previewImage'])): ?>
    <?php do_action('block_image', __FILE__); ?>
<?php else: ?>
    <?php

    // Block helper
    require \get_template_directory() . '/template-parts/base/block-helper.php';
    if (isset($disable) && $disable) {
        return;
    }

	// Load values and assing defaults
	$timeline = get_field('timeline') ?: false;
?>
	<section class="section timeline-section block <?php echo $className; ?>" 
        <?php if ($bgUrl): ?>
            style="background-image: url('<?php echo $bgUrl; ?>');"
            data-desktop-image="<?php echo $bgUrl; ?>"
        <?php endif; ?>
        <?php if ($mobileBgUrl): ?>
            data-mobile-image="<?php echo $mobileBgUrl; ?>"
        <?php endif; ?>
        <?php if ($sectionId): ?>
            id="<?php echo $sectionId; ?>"
        <?php endif; ?>
    >
		<div class="container">
			<?php if ($title): ?>
				<h2 class="h2"><?php echo $title; ?></h2>
			<?php endif; ?>
			<?php if ($text): ?>
				<div class="text"><?php echo $text; ?>/div>
			<?php endif; ?>
			<div class="timeline-content">
				<?php if (is_array($timeline) && count($timeline)): ?>
					<?php foreach ($timeline as $key => $item): ?>
						<div class="row">
							<div class="col-md-5 d-none d-md-flex align-items-center justify-content-end short <?php if ($key%2) { echo 'order-first order-md-last'; } ?>">
								<?php if (array_key_exists('title', $item)): ?>
									<h3 class="h3"><?php echo $item['title']; ?></h3>
								<?php endif; ?>
							</div>
							<div class="col-2 col-md p-0">
								<div class="separator <?php if (!$key) { echo 'first'; } elseif ($key == (count($timeline) - 1)) { echo 'last'; } ?> d-flex align-items-center justify-content-center">
									<div class="icon-container d-flex align-items-center justify-content-center"><i class="<?php echo $item['icon'] ?: 'fa fa-ellipsis-h'; ?>"></i></div>
								</div>
							</div>
							<div class="col-10 col-md-5 d-flex align-items-center <?php if ($key%2) { echo 'order-last order-md-first'; } ?>">
								<div class="content mb-4 mt-4">
									<?php if (array_key_exists('title', $item)): ?>
										<h3 class="h3 d-md-none"><?php echo $item['title']; ?></h3>
									<?php endif; ?>
									<?php if (array_key_exists('text', $item)): ?>
										<p class="text"><?php echo $item['text']; ?></p>
									<?php endif; ?>
									<?php if(array_key_exists('cta', $item) && is_array($item['cta']) && !empty($item['cta'])): ?>
										<div class="cta">
											<a href="<?php echo $item['cta']['url']; ?>" target="<?php echo $item['cta']['target']; ?>" class="btn btn-primary"><?php echo $item['cta']['title']; ?></a>
										</div>
									<?php endif; ?>
								</div>
							</div>
						</div>
					<?php endforeach; ?>
				<?php endif; ?>
			</div>
		</div>
	</section>
<?php endif; ?>

