<?php get_header(); ?>

<!-- ================> PageHeader section start here <================== -->
<div class="pageheader">
    <div class="container">
        <div class="pageheader__area">
            <div class="pageheader__left">
                <h3><?php the_title(); ?></h3>
            </div>
            <div class="pageheader__right">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo home_url(); ?>">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><?php the_title(); ?></li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- ================> PageHeader section end here <================== -->


<!-- ================> Blog section start here <================== -->
<div class="blog blog-style2 blog-single padding--top padding--bottom bg-light">
    <div class="container">
        <div class="section__wrapper">
            <div class="row g-4">
                <div class="col-lg-8 col-12">
                    <div class="row g-4">
                        <div class="col-12">
                            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                                    <div class="blog__item">
                                        <div class="blog__inner">
                                            <?php if (has_post_thumbnail()) : ?>
                                                <div class="blog__thumb">
                                                    <?php the_post_thumbnail('full'); ?>
                                                </div>
                                            <?php endif; ?>
                                            <div class="blog__content">
                                                <h3><?php the_title(); ?></h3>
                                                <ul class="blog__content-metapost">
                                                    <li><i class="far fa-calendar"></i> <?php echo get_the_date(); ?></li>
                                                    <li><i class="fas fa-user"></i> <?php the_author(); ?></li>
                                                    <li><i class="fas fa-tag"></i> <?php the_category(', '); ?></li>
                                                    <li><i class="far fa-comments"></i> <?php comments_number('0 Comments', '1 Comment', '% Comments'); ?></li>
                                                </ul>
                                                <?php the_content(); ?>

                                                <div class="blog__tags">
                                                    <div class="blog__tags-left">
                                                        <div class="blog__tags-title">
                                                            <p>Tags:</p>
                                                        </div>
                                                        <div class="blog__tags-details">
                                                            <?php the_tags('<ul><li>', '</li><li>', '</li></ul>'); ?>
                                                        </div>
                                                    </div>
                                                    <div class="blog__tags-right">
                                                        <div class="blog__tags-title">
                                                            <p>Share:</p>
                                                        </div>
                                                        <div class="blog__tags-details">
                                                            <div class="footer__social">
                                                                <ul>
                                                                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                                                    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                                                    <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                                                                    <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            <?php endwhile;
                            endif; ?>

                            <?php
                            if (comments_open() || get_comments_number()) :
                                comments_template();
                            endif;
                            ?>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-12">
                    <?php get_sidebar(); ?>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ================> Blog section end here <================== -->

<?php get_footer(); ?>