<?php
/**
 * Template part for displaying front page imtroduction.
 *
 * @package Return Blog
 */

// Get the content type.
$hero_slider = get_theme_mod( 'return_blog_hero_slider', 'disable' );

if ( 'disable' === $hero_slider ) {
	return;
}
$hero_slider_count = 4;

$get_content = return_blog_get_section_content( 'hero_slider', $hero_slider, $hero_slider_count  );
?>
<div id="hero-slider" data-slick='{"slidesToShow": 3, "slidesToScroll": 1, "infinite": true, "speed": 1500, "dots": false, "arrows":true, "autoplay": true, "draggable": true, "fade": false }'>
    <?php foreach ( $get_content as $content ): ?>
        <article style="background-image:url('<?php echo esc_url( get_the_post_thumbnail_url( $content['id'] ) ) ; ?>');">
            <div class="overlay"></div>
            <div class="container">
                <div class="hero-slider-wrapper">
                    <span class="cat-links">
                       <?php the_category( '', '', $content['id'] ) ; ?>
                    </span><!-- .cat-links -->

                    <header class="entry-header">
                        <h2 class="entry-title"><a href="<?php echo esc_url( $content['url'] ) ?>" tabindex="0"><?php echo esc_html( $content['title'] ); ?></a></h2>
                    </header>

                    <div class="entry-content">
                        <p>
                            <?php echo esc_html( wp_trim_words( $content['content'], 30 ) ); ?>
                        </p>
                    </div><!-- .entry-content -->

                     <?php return_blog_posted_on( $content['id'] ); ?>
                </div><!-- .hero-slider-wrapper -->
            </div><!-- .container -->
        </article>    
    <?php endforeach ?>
    
</div><!-- #featured-slider -->