<?php
// Template name: Career
get_header();
$curr_lang = pll_current_language();
$template_directory = get_template_directory_uri();
$srcset = "srcset='{$template_directory}/assets/images/lazyload.png'";
?>
<style>
</style>
<main>
<?php
get_template_part('templates/blocks/breadcrumbs');
?>
<?php
$career_hero = get_field('career_hero');
?>
<section class="career-hero" data-animate-group="list">
<div class="container">
<div class="career-hero__wrapper">
<div class="career-hero__left">
<h1 class="title-1 mob-title-1 title" data-animate="word">
<?php echo $career_hero['hero_career_title']; ?> <br class="--pc-display"/>
<span class="--underline svg-line-animation -type-2">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 458 22">
<path
d="M1 10.257c56.523-3.58 184.611-8.555 165.773-5.924C141.14 7.914 83.813 7.7 43.721 15.373c-17.746 3.396 393.688-3.975 412.091-12.79C465.671-2.137 413.091 3.612 338.166 21"
stroke="#BFFE43"
stroke-width="1.5"
/>
</svg>
</span>
</h1>
<p class="text-1 mob-text-1 text" data-animate="swim-top">
<?php echo $career_hero['hero_career_subtitle']; ?>
</p>
<div class="career-hero__buttons" data-animate="swim-top">
<a href="#jobs" class="default-button -transparent -arrow-bottom" data-animate="swim-top"
data-index="3">
<span> <?php echo $career_hero['career_hero_button']; ?></span>
</a>
</div>
</div>
<div class="career-hero__right">
<img class="-bg" src="<?php echo $template_directory; ?>/assets/images/about/hero/bg-lines.svg"
alt="upper section illustration"
data-animate="fade" data-index="1"/>
<div class="career-hero__right-container">
<?php
$image_1_url = get_field('career_hero_listbord_1');
$image_2_url = get_field('career_hero_listbord_2');
$image_3_url = get_field('career_hero_listbord_3');
?>
<img src=" <?php echo $career_hero['career_hero_listbord_1']; ?>" alt="" data-animate="fade" data-index="2" />
<img src=" <?php echo $career_hero['career_hero_listbord_2']; ?>" alt="" data-animate="fade" data-index="2" />
<img src=" <?php echo $career_hero['career_hero_listbord_3']; ?>" alt="" data-animate="fade" data-index="2" />
</div>
</div>
</div>
</div>
</section>
<?php
$career_jobs = get_field('career_jobs');
?>
<section id="jobs" class="jobs">
<div class="container">
<div class="title-2 mob-title-2 " data-animate="word"><?php echo $career_jobs['title']; ?></div>
<div class="jobs-wrapper">
<?php
$args = array(
'post_type' => 'job',
'posts_per_page' => -1
);
$query = new WP_Query($args);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
$location = get_field('location');
$work_type = get_field('work_type');
$employment_type = get_field('employment_type');
?>
<a href="<?php the_permalink(); ?>" data-animate="swim-top" class="jobs-item">
<h3 class="title-4 mob-title-4 --supply"><?php the_title(); ?></h3>
<div class="jobs-item__tags-container">
<?php
if ($location) {
echo '<div class="jobs-item__tag title-6 --supply">' . esc_html($location) . '</div>';
}
if ($work_type) {
echo '<div class="jobs-item__tag title-6 --supply">' . esc_html($work_type) . '</div>';
}
if ($employment_type) {
echo '<div class="jobs-item__tag title-6 --supply">' . esc_html($employment_type) . '</div>';
}
?>
</div>
</a>
<?php
endwhile;
wp_reset_postdata();
else :
echo '<p>No jobs found</p>';
endif;
?>
</div>
</div>
</section>
<?php
get_template_part('templates/blocks/career-form');
?>
</main>
<?php get_footer() ?>