<?php
/*
Template Name: Blog Page
*/
?>

<?php get_header(); ?>
<div style="position: relative;text-align: center;">
    <img style="width: 100%" src="<?php echo get_template_directory_uri(); ?>/assets/images/banner-image.png" alt="">
    <div style="position: absolute;top: 10%;left: 42%;">
        <h2 style="font-size: 45px; ">BLOG NEWS</h2>
    </div>
    <div style="position: absolute;top: 37%;left: 26%;">
        <p style="width: 67%"> All of us have been in a position where we were
            unable to find the most suitable host or even knew what kind
            of web hosting service we needed. We decided to take action
            and went on with the idea of making full.
        </p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="<?php echo site_url();  ?>"><?php echo get_the_title( get_option('page_on_front') ) ?></a></li>
                    <li class="breadcrumb-item active" aria-current="page"><?php echo BLOG_PAGE ?></li>
                </ol>
            </nav>
        </div>
        <div class="col-sm-8">
            <div class="row">

                <?php

                $page = isset($_GET['page']) ? $_GET['page'] : 1;
                $the_query = new WP_Query(array(
                    'posts_per_page' => 10,
                    'paged'          => $page
                ));

                if ( $the_query->have_posts() ) :

                    while ( $the_query->have_posts() ) : $the_query->the_post();
                ?>

                        <div class="col-lg-6">
                            <img class="blogImage" src="<?php echo get_the_post_thumbnail_url();  ?>">
                            <a href="<?php the_permalink(); ?>"><h3><?php echo get_the_title() ?></h3></a>
                            <div class="d-flex spaceBetween">
                                <div>
                                    <img class="blogUser" style="width: 30px; height: 30px; border-radius: 50%" src="<?php echo get_avatar_url( get_the_author_meta('user_email'), '60' ); ?>">
                                    <h5><?php echo get_the_author_meta('display_name') ?></h5>
                                </div>
                                <div>
                                    <h5 class="pt-1 responsive"><?php  the_time('F j, Y'); ?></h5>
                                </div>
                            </div>
                        </div>

                    <?php

                    endwhile;

                    ?>

                    <div class="pagination d-flex justify-content-center w-100">
		                <?php
		                $page = isset($_GET['page']) ? $_GET['page'] : 1;
		                echo paginate_links( array(
			                'current' => $page,
			                'format' => '?page=%#%',
			                'prev_text' => '«',
			                'next_text' => '»',
			                'total'   => $the_query->max_num_pages
		                ) );
		                ?>
                    </div>

                <?php
                endif;

                ?>

            </div>
        </div>

        <div class="col-md-4">

            <?php get_sidebar(); ?>

        </div>
    </div>
</div>


<?php
get_footer();
