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


// Bail if the section is disabled.
if ( get_theme_mod( 'ostrich_magazine_latest_enable', 0 ) == 0 ) {
    return;
}

$get_first_content = ostrich_magazine_get_section_content( 'latest', 'cat_1', get_theme_mod( 'ostrich_magazine_latest_count', 3 )  );
$get_second_content = ostrich_magazine_get_section_content( 'latest', 'cat_2', get_theme_mod( 'ostrich_magazine_latest_count', 5 )  );

?>
<div id="recent-post">
    <div class="column-wrapper">
        <section id="popular-post" class="widget widget_popular_post">
             <?php if ( !empty( get_theme_mod( 'ostrich_magazine_latest_label', '' ) ) ): ?>
                <div class="widget-header">
                    <h2 class="widget-title"><?php echo esc_html( get_theme_mod( 'ostrich_magazine_latest_label', '' ) ) ?></h2>
                </div><!-- .section-header -->

            <?php endif ?>

            <ul>
            <?php foreach ($get_first_content as $content): ?>
                <li>
                    <a href="<?php echo esc_url( $content['url'] ); ?>"><img src="<?php echo esc_url( get_the_post_thumbnail_url( $content['id'] ) ) ; ?>" alt="trending-news-01"></a>
                    <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="footer-meta">
                             <?php ostrich_magazine_posted_on( $content['id'] ); ?>
                        </div><!-- .footer-meta -->
                    </div><!-- .entry-container -->
                </li>
            <?php endforeach ?>                
            </ul>
        </section><!-- .widget -->
    </div>

    <div class="column-wrapper">
        <div class="regular" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "infinite": true, "speed": 1000, "dots": false, "arrows":true, "autoplay": true, "draggable": true, "fade": false }'>
            <?php foreach ($get_second_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">
                                    <div class="admin-image">
                                        <a href="#"><img src="<?php echo get_avatar_url($content['author_id'], ['size' => '70']); ?>" alt="admin"></a>
                                    </div>
                                    <div class="admin-container">
                                       <?php 
                                            ostrich_magazine_post_author();
                                            ostrich_magazine_posted_on( $content['id'] );

                                        ?>
                                    </div>
                                </div><!-- .entry-meta -->
                            </div>
                        </div><!-- .entry-container -->
                    </div><!-- .post-wrapper -->
                </div><!-- .featured-image -->
            </article>
            <?php endforeach ?> 
        </div><!-- .regular -->
    </div><!-- .column-wrapper -->
       
</div><!-- #recent-post -->


