<?php

/**
 * The template for displaying hero.
 *
 * 
 */


$pageField = get_fields();
$sliderHero = $pageField['slider_hero'];
?>
<?php if( !empty($sliderHero) ): ?>
    <section class="hero-section">
        <div class="slider-container">
            <div class="slider swiper-container swiper">
                <div class="slider-wrapper swiper-wrapper">
                    <?php foreach ($sliderHero as $key => $slide) {
                        $image = $slide['image'];
                        $heading = $slide['heading'];
                        $subHeading = $slide['sub_heading'];

                        $style = !empty($image['url'])? 'background-image: url('.$image['url'].')' : '';
                        ?>
                        <div class="slider-item swiper-slide">
                            <div class="slider-item-overlay"></div>
                            <div class="slider-item-wrap" data-background="" style="<?php echo $style; ?>">
                                <div class="container">
                                    <div class="slider-item-content">
                                        <?php if( !empty($heading) ): ?>
                                            <h2 class="slider-item-heading"><?php echo $heading; ?></h2>
                                        <?php endif; ?>
                                        <?php if( !empty($subHeading) ): ?>
                                            <div class="slider-item-sub-heading"><?php echo $subHeading; ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php
                    } ?>
                </div>
            </div>
            <div class="hero-corner corner-top-right"></div>
            <div class="hero-corner corner-bottom-right"></div>
        </div>
    </section>
<?php endif; ?>
