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


// Get the content type.
$hero_banner = get_theme_mod( 'moral_magazine_hero_banner', 'disable' );
$hero_banner_count = 3;

// Bail if the section is disabled.
if ( 'disable' === $hero_banner ) {
    return;
}

$content_detail = moral_magazine_get_section_content( 'hero_banner', $hero_banner, $hero_banner_count );

?>

<div id="magazine_pro_hero_banner_section" class="relative page-section same-background hero_banner <?php echo is_active_sidebar('hero-banner-sidebar') ? '' : 'full-width' ?>">
    <div class="wrapper">
        <div class="hero-banner-post">
            <?php if ( !empty( get_theme_mod( 'moral_magazine_hero_banner_title', __( 'Hero Banner', 'moral-magazine' ) ) ) ): ?>
                <div class="section-header">
                    <h2 class="section-title"><?php echo esc_html( get_theme_mod( 'moral_magazine_hero_banner_title', __( 'Hero Banner', 'moral-magazine' ) ) ); ?></h2>
                </div>
            <?php endif ?>
            
            <div class="grid col-3">
                <?php $i=1; foreach ( $content_detail as $content ): ?>
                    <article class="grid-item">
                        <div class="herobanner-wrapper">
                            <div class="featured-image" style="background-image: url('<?php echo esc_url( get_the_post_thumbnail_url( $content['id'] ) ); ?>');">
                                <div class="overlay"></div>
                            </div>
                            <div class="entry-container">
                                <?php if ( $i == 1 ): ?>
                                    <span class="cat-links"><?php the_category( '', '', $content['id'] ) ; ?></span>
                                <?php endif ?>                                
                                <header class="entry-header">
                                    <h2 class="entry-title"><a href="<?php echo esc_url($content['url']) ; ?>"><?php echo esc_html($content['title']) ; ?></a></h2>
                                </header>
                                <?php if ( $i == 1 ): ?>
                                    <div class="entry-meta">
                                        <?php moral_magazine_posted_on( $content['id'] ) ; ?>
                                        <span class="comment">
                                            <a href="<?php echo esc_url( $content['url'] ) ; ?>">
                                                <i class="fa fa-comment" aria-hidden="true"></i><?php echo esc_html( get_comments_number( $content['id'] ) ); ?>
                                            </a>
                                        </span>
                                        <span class="min-read">
                                            <?php echo moral_magazine_time_interval( $content['content'] ); echo esc_html__(' min read', 'moral-magazine'); ?>
                                        </span>
                                        
                                    </div>
                                <?php endif ?>
                                
                            </div>
                        </div>
                    </article>
                <?php $i++; endforeach ?>
                
            </div>
        </div>

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