<?php
$next_post = get_next_post();
$prev_post = get_previous_post();
if( empty($next_post) && empty($prev_post) ) return;
$thumb_size = 'medium_large';
?>
<section class="siblings" id="epcl-other-stories">
    <?php    
    if( !empty($prev_post) ){
        $prev_url = get_the_permalink($prev_post->ID);
        $prev_thumb = get_the_post_thumbnail_url($prev_post->ID, $thumb_size);
        $prev_post_meta = get_post_meta( $prev_post->ID, 'epcl_post', true );
        $post_class = epcl_get_primary_category( '', $prev_post_meta, $prev_post->ID );
    }
    ?>
    <?php if( !empty($prev_post) ): ?>
        <article class="prev section bg-box">
            <h4 class="title bordered medium absolute"><?php esc_html_e('Previous Article', 'groovy'); ?></h4>
            <?php if( $prev_thumb ): ?>
                <a href="<?php echo esc_url($prev_url); ?>" class="thumb shadow-effect epcl-loader hide-on-mobile hide-on-tablet <?php if($prev_thumb && epcl_get_option('enable_lazyload_posts') && !epcl_is_amp()  ) echo 'epcl-loader'; ?>">
                    <?php if( epcl_is_amp() ): ?>
                        <amp-img class="cover fullimage" layout="fill" src="<?php echo esc_url($prev_thumb); ?>"></amp-img>
                    <?php else: ?>
                        <?php if( epcl_get_option('enable_lazyload_posts') == '1' ): ?>
                            <span class="fullimage cover lazy" data-src="<?php echo esc_url($prev_thumb); ?>"></span>
                        <?php else: ?>
                            <span class="fullimage cover" style="background-image: url(<?php echo esc_url($prev_thumb); ?>);"></span>
                        <?php endif; ?>
                    <?php endif; ?>
                </a>
            <?php endif; ?>
            <div class="info">
                <div class="tags hide-on-mobile hide-on-tablet">
                    <?php echo epcl_get_primary_category_link('', $prev_post->ID); ?>
                </div>
                <h4 class="title no-margin underline-effect"><a href="<?php echo esc_url($prev_url); ?>"><?php echo get_the_title($prev_post->ID); ?></a></h4>
                <div class="meta small">
                    <time class="meta-info" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time( get_option('date_format') ); ?></time> 
                    <?php
                        if( function_exists('epcl_render_reading_time') ){
                            epcl_render_reading_time();
                        }  
                    ?>
                </div>
            </div>                
        </article>
    <?php endif; ?>

    <?php
    if( !empty($next_post) ){
        $next_url = get_the_permalink($next_post->ID);
        $next_thumb = get_the_post_thumbnail_url($next_post->ID, $thumb_size);
        $next_post_meta = get_post_meta( $next_post->ID, 'epcl_post', true );
        $post_class = epcl_get_primary_category( '', $next_post_meta, $next_post->ID );
    }
    ?>
    <?php if( !empty($next_post) ): ?>
        <article class="next section bg-box">
            <h4 class="title bordered medium absolute"><?php esc_html_e('Next Article', 'groovy'); ?></h4>
            <?php if( $next_thumb ): ?>
                <a href="<?php echo esc_url($next_url); ?>" class="thumb shadow-effect epcl-loader hide-on-mobile hide-on-tablet <?php if($next_thumb && epcl_get_option('enable_lazyload_posts') && !epcl_is_amp()  ) echo 'epcl-loader'; ?>">
                    <?php if( epcl_is_amp() ): ?>
                        <amp-img class="cover fullimage" layout="fill" src="<?php echo esc_url($next_thumb); ?>"></amp-img>
                    <?php else: ?>
                        <?php if( epcl_get_option('enable_lazyload_posts') == '1' ): ?>
                            <span class="fullimage cover lazy" data-src="<?php echo esc_url($next_thumb); ?>"></span>
                        <?php else: ?>
                            <span class="fullimage cover" style="background-image: url(<?php echo esc_url($next_thumb); ?>);"></span>
                        <?php endif; ?>
                    <?php endif; ?>
                </a>
            <?php endif; ?>
            <div class="info">
                <div class="tags hide-on-mobile hide-on-tablet">
                    <?php echo epcl_get_primary_category_link('', $next_post->ID); ?>
                </div>
                <h4 class="title no-margin underline-effect"><a href="<?php echo esc_url($next_url); ?>"><?php echo get_the_title($next_post->ID); ?></a></h4>
                <div class="meta small">
                    <time class="meta-info" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time( get_option('date_format') ); ?></time> 
                    <?php
                        if( function_exists('epcl_render_reading_time') ){
                            epcl_render_reading_time();
                        }  
                    ?>
                </div>
            </div>                
        </article>
    <?php endif; ?>
    <div class="clear"></div>

</section>