<?php
/**
 * Template part for displaying front page introduction.
 *
 * @package Ostrich Magazine
 */

// Get the content type.
$hero = get_theme_mod( 'ostrich_magazine_hero', 'cat' );
$breaking_news = get_theme_mod( 'ostrich_magazine_breaking_news', 'cat' );

$get_content = ostrich_magazine_get_section_content( 'hero', $hero, 3  );

?>
 <div id="hero-posts">
    <div class="container">
        <div class="right-widget-posts clear">
            <?php if ( get_theme_mod( 'ostrich_magazine_breaking_news_enable', 0 ) == 1 ): 
                $get_breaking_news_content = ostrich_magazine_get_section_content( 'breaking_news', $breaking_news, get_theme_mod( 'ostrich_magazine_breaking_news_count', 3 )  );
            ?>
                <div id="breaking-news" class="relative wrapper">
                    <div class="breaking-news-wrapper">
                        <?php if ( !empty( get_theme_mod( 'ostrich_magazine_breaking_news_label', '' ) ) ): ?>
                            <h2 class="news-title"><?php echo esc_html( get_theme_mod( 'ostrich_magazine_breaking_news_label', '' ) ); ?></h2>
                        <?php endif ?>
                        
                        <div class="breaking-news-slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "infinite": true, "speed": 1000, "dots": false, "arrows":true, "autoplay": true, "draggable": true, "fade": false }'>
                            <?php foreach ( $get_breaking_news_content as $content ): ?>
                                <article>
                                    <div class="breaking-news-item-wrapper">
                                        <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><!-- .breaking-news-item-wrapper -->
                                </article>
                            <?php endforeach ?>
                        </div><!-- .breaking-news-slider -->
                    </div><!-- .breaking-news-wrapper -->
                </div><!-- #breaking-news -->
            <?php endif; ?>
            
            <?php if ( get_theme_mod( 'ostrich_magazine_hero_enable', 0 ) == 1 ): ?>
                <div class="hero-posts-wrapper col-3">
                    <?php foreach ( $get_content as $content ): ?>
                        <article >
                            <div class="featured-image" style="background-image:url('<?php echo esc_url( get_the_post_thumbnail_url( $content['id'] ) ) ; ?>');">
                                <div class="overlay"></div>
                                <div class="entry-meta">
                                    <span class="cat-links">
                                        <?php the_category( ' ', ' ', $content['id'] ); ?>
                                    </span>
                                </div><!-- .entry-meta -->

                                <div class="post-wrapper">
                                    <div class="entry-container">
                                        <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">
                                            <div class="footer-meta">
                                                <?php ostrich_magazine_posted_on( $content['id'] ); ?>
                                            </div><!-- .entry-meta -->
                                        </div><!-- .entry-content -->
                                    </div><!-- .entry-container -->
                                </div><!-- .post-wrapper -->
                            </div>
                        </article>
                    <?php endforeach ?>
                </div><!-- .hero-posts-wrapper -->
            <?php endif; ?>

        </div>

        <?php if ( is_active_sidebar( 'hero-section-sidebar' ) ) { ?>
            <aside id="secondary" class="widget-area" role="complementary">
                <?php
                    dynamic_sidebar( 'hero-section-sidebar' );
                ?>
            </aside><!-- #secondary -->
        <?php } ?> 
    </div><!-- .container -->
</div><!-- #hero-posts -->
