<?php
get_header();
$template_directory = get_template_directory_uri();
$srcset = "srcset='{$template_directory}/assets/images/lazyload.png'";
?>
<main>
<?php $hero = get_field('hero'); ?>
<section class="job-hero" data-animate-group="list">
<div class="container-big">
<div class="job-hero__wrapper">
<div class="job-hero-content">
<div class="categories">
<?php
$job_id = get_the_ID();
$categories = get_the_terms($job_id, 'job_category');
if ($categories && !is_wp_error($categories)) :
foreach ($categories as $category) : ?>
<div class="category-label body-4" data-animate="swim-top">
<?php echo esc_html($category->name); ?>
</div>
<?php endforeach;
endif;
?>
</div>
<h1 class="title title-2" data-animate="word" data-index="1">
<?php echo $hero['title']; ?>
</h1>
<?php
if ($hero['description']) :
?>
<p class="description body-2" data-animate="swim-top" data-index="2">
<?php echo $hero['description']; ?>
</p>
<?php
endif;
?>
<div class="buttons" data-animate="swim-top" data-index="3">
<?php if (!empty($hero['buttons'])) :
foreach ($hero['buttons'] as $button) :?>
<?php echo get_button_group_field($button['button']); ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<div class="job-hero-image">
<img class="-lazyload" <?php echo $srcset; ?>
src="<?php echo $hero["image"]['url']; ?>"
alt="<?php echo $hero["image"]['alt']; ?>" data-animate="swim-top" data-index="4">
</div>
</div>
</div>
</section>
<?php $content = get_field('content'); ?>
<div class="content job-content">
<div class="container-content">
<?php echo $content; ?>
</div>
</div>
</main>
<?php
get_footer();