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

// Get the content type.
$technology = get_theme_mod( 'ostrich_magazine_technology', 'cat' );
// Bail if the section is disabled.
if ( get_theme_mod( 'ostrich_magazine_technology_enable', 0 ) == 0 ) {
    return;
}

$get_content = ostrich_magazine_get_section_content( 'technology', $technology, 5 );

?>
<div id="technology">
    <div class="technology-bg">
        <div class="section-header">
            <h2 class="section-title">Hot Topic</h2>
        </div><!-- .section-header -->

        <div class="section-content clear">
            <div class="technology-wrapper">
            <?php $i = 1; foreach ( $get_content as $content ): 
                if ( $i == 1 ) {               
            ?>
                 <article>
                    <div class="featured-image" style="background-image:url('<?php echo esc_url( get_the_post_thumbnail_url( $content['id'] ) ) ; ?>');">
                    </div><!-- .featured-image -->

                    <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 class="entry-content">
                            <p><?php echo esc_html( wp_trim_words( $content['content'], 45 ) ); ?></p>
                        </div>
                    </div><!-- .entry-container -->
                </article>
            <?php  } $i++; endforeach ?>
               
            </div><!-- .technology-wrapper -->

            <div class="technology-post-wrapper col-2">
            <?php $i = 1; foreach ( $get_content as $content ): 
                if ( $i > 1 ) {               
            ?>  
                <article>
                    <div class="featured-image" style="background-image:url('<?php echo esc_url( get_the_post_thumbnail_url( $content['id'] ) ) ; ?>');">
                    </div><!-- .featured-image -->

                    <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 -->
                </article>
            <?php  } $i++; endforeach ?>                
            </div><!-- .technology-wrapper -->

        </div><!-- .section-content -->
    </div>
</div><!-- .technology -->
