<?php
    $categories = get_the_category();
    $post_id = get_the_ID();
    $imagefeatured = get_the_post_thumbnail_url($post_id,'featured-single');
    $author = get_field('author_news');
?>
<div id="post-<?php the_ID(); ?>" class="post">
    <section class="l-hero-single pt-lg-5">
        <div class="container">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-9 col-lg-10">
                    <p class="c-card-news__meta"><?php echo get_the_date('M'); ?> <?php echo get_the_date('d'); ?>, <?php echo get_the_date('Y'); ?> · <?php echo '<a href="'. esc_url( home_url( '/category/' ) ) . $categories[0]->slug .'">'.$categories[0]->name; ?></a> · <?php echo prefix_estimated_reading_time( get_the_content() ); ?> min read</p>
                    <h1 class="c-title"><?php echo the_title(); ?></h1>
                </div>
                <div class="col-md-2 col-lg-1">
                    <div class="share-bottom">
                        <?php get_template_part('templates/content', 'share'); ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="l-image-single">
        <div class="container">
            <div class="c-image-single">
                <img src="<?php echo $imagefeatured; ?>" alt="<?php echo the_title(); ?>">
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-11"><p class="c-legend-blog"><?php echo get_field('legend_featured_image'); ?></p></div>
            </div>
        </div>
    </section>
    <section class="l-single-meta">
        <div class="container">
            <div class="row">
                <div class="col-md-1">
                </div>
                <div class="col-md-2 m-single-meta">
                    <div class="c-single-meta">
                        <p class="c-single-meta__title">Published:</p>
                        <p class="c-single-meta__content"><?php echo get_the_date('M'); ?> <?php echo get_the_date('d'); ?>, <?php echo get_the_date('Y'); ?></p>
                    </div>
                    <div class="c-single-meta">
                        <p class="c-single-meta__title">Written by:</p>
                        <p class="c-single-meta__content"><?php echo $author["user_firstname"]; ?></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <article class="l-single-content">
        <?php echo wpautop(the_content()); ?>
    </article>
    <div class="l-single-tags">
        <div class="container">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-9 col-lg-6 pd-none">
                    <?php  
                    $tags= get_tags();
                    if($tags):
                    ?>
                    <div class="c-single-tags">
                        <h3 class="c-single-tags__title">Tags:</h3>
                        <p class="c-single-tags__content">
                        <?php 
                            $total = count($tags);
                            foreach($tags as $i => $tag):
                                // if($i = 2):
                                // 	break;
                                // endif;
                                // if($i = 2):
                                // 	continue;
                                // endif;
                                echo '<a href="'. esc_url( home_url( '/tag/' ) ) . $tag->slug .'"><span>' . $tag->slug . '</span></a>';
                                echo $i < ($total - 1) ? ', ' : '';
                            endforeach;
                        ?>
                        </p>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </p>
    <?php
        $postsrelated = get_field('select_posts_related');
        if($postsrelated):
    ?>
    <section class="l-brands-news l-brands-technology py-3 py-md-3 py-xl-4">
        <div class="carousel-title d-flex justify-content-between align-items-center mb-md-1 mb-xl-3">
            <h2 class="c-subtitle is-tech">Keep Reading</h2>

            <div class="d-none d-sm-flex">
                <a href="javascript:;" class="c-btn-round is-tech js-carousel-default-prev" aria-label="Prev"><i class="icon icon-left-arrow"></i></a>
                <a href="javascript:;" class="c-btn-round is-tech js-carousel-default-next" aria-label="Next"><i class="icon icon-right-arrow"></i></a>
            </div>
        </div>
        <div class="c-carousel-default js-carousel-default owl-carousel">
            <?php
                foreach($postsrelated as $postrel):
                    $post_id = $postrel->ID;
                    $imagefeatured = get_the_post_thumbnail_url($post_id,'list-archive');
                    $imagefeaturedmobile = get_the_post_thumbnail_url($post_id, 'list-archive');
                    $format = get_post_format( $post_id );
                    if(!$format):
                        $format = "article";
                    endif;
                ?>
                <article class="c-card-news">
                    <div class="c-card-news__cover">
                        <a class="c-card-news__link"  href="<?php echo get_permalink($post_id); ?>">
                            <picture class="c-card-news__image">
                                <source media="(max-width: 1200px)" srcset="<?php echo $imagefeaturedmobile; ?>">
                                <img src="<?php echo $imagefeatured; ?>" alt="<?php echo the_title(); ?>">
                            </picture>
                            <div class="c-card-news__type"><i class="icon icon-<?php echo $format; ?>"></i></div>
                        </a>
                    </div>
                    <p class="c-card-news__meta is-tech"><?php echo get_the_date('M', $post_id); ?> <?php echo get_the_date('d', $post_id); ?>, <?php echo get_the_date('Y', $post_id); ?> · <?php echo prefix_estimated_reading_time( $postrel->post_content ); ?> min read</p>
                    <a href="<?php echo get_permalink($post_id); ?>">
                        <h3 class="c-card-news__title is-tech"><?php echo get_the_title($post_id); ?></h3>
                    </a>
                </article>
            <?php
                endforeach;
            ?>
        </div>
    </section>
    <?php
        endif;
    ?>
</div><!-- .post -->