<?php
global $post;
get_header();
?>
  <section>
    <div class="container">
      <div id="page-heading">
        <h1>Latest News</h1>
      </div>
      <div class="row">
        <select class="ml-auto" name="sort-posts" id="sortbox" onchange="document.location.href='?'+this.options[this.selectedIndex].value;">
          <option value="sortby" disabled>Sort By</option>
          <option value="orderby=date&order=dsc">Newest</option>
          <option value="orderby=date&order=asc">Oldest</option>
          <option value="orderby=title&order=asc">Title Asc</option>
          <option value="orderby=title&order=dsc">Title Desc</option>
        </select>
      </div>

      <script type="text/javascript">
        <?php

        if (isset($_GET['order']) && !empty($_GET['order'])) {
        $orderby = $_GET['order'];
        if (( $_GET['orderby'] == 'date') && ( $_GET['order'] == 'dsc')) { ?>
        document.getElementById('sortbox').value = 'orderby=date&order=dsc';
        <?php } elseif (( $_GET['orderby'] == 'date') && ( $_GET['order'] == 'asc')) { ?>
        document.getElementById('sortbox').value = 'orderby=date&order=asc';
        <?php } elseif (( $_GET['orderby'] == 'title') && ( $_GET['order'] == 'asc')) { ?>
        document.getElementById('sortbox').value = 'orderby=title&order=asc';
        <?php } elseif (( $_GET['orderby'] == 'title') && ( $_GET['order'] == 'dsc')) { ?>
        document.getElementById('sortbox').value = 'orderby=title&order=dsc';
        <?php } elseif (( $_GET['orderby'] == 'comment_count') && ( $_GET['order'] == 'dsc')) { ?>
        document.getElementById('sortbox').value = 'orderby=comment_count&order=dsc';
        <?php } elseif (( $_GET['orderby'] == 'comment_count') && ( $_GET['order'] == 'asc')) { ?>
        document.getElementById('sortbox').value = 'orderby=comment_count&order=asc';
        <?php } else { ?>
        document.getElementById('sortbox').value = 'sortby';
        <?php }

                      }else{
?>

                        document.getElementById('sortbox').value = 'sortby';
                <?php      }?>
      </script>

      <div class="row" id="news-feed">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
          <div class="col-12 col-md-6 col-lg-4 mt-4" data-aos="animate-up" data-aos-delay="150">
            <a href="<?php the_permalink(); ?>" class="relative block w-full">
              <div class="card h-100 mt-3">
                <img class="img-fluid w-100" src="<?php echo the_post_thumbnail_url('medium'); ?>">

                <div class="card-body d-flex flex-column p-4">
                  <h3 class="h4">

                                   <?php the_title();?>

                                 </h3>
                  <p>

                    <?php echo limit_words(get_the_excerpt(), '14'),'...'; ?>

                  </p>
                  <div class="mt-auto mb-3">
                    <button class="mx-auto btn btn-sm mt-auto">Read more &#8594;</button>
                  </div>
                </div>
              </div>
            </a>
          </div>

          <?php
                            endwhile;
                        else:
                            echo '<p>Sorry, there are no results for your search term. Please try another search term or use the navigation.</p>';
                        endif;
                        wp_reset_query();
                        ?>


            <?php $prev_text = sprintf(
          '%s <span class="nav-prev-text">%s</span>',
          '<span aria-hidden="true">&larr;</span>',
          __('Previous', 'portable-building')
      );
      $next_text = sprintf(
          '<span class="nav-next-text">%s</span> %s',
          __('Next', 'portable-building'),
          '<span aria-hidden="true">&rarr;</span>'
      );

      $posts_pagination = get_the_posts_pagination(
          array(
              'mid_size'  => 3,
              'prev_text' => $prev_text,
              'next_text' => $next_text,
          )
      );

      // If we're not outputting the previous page link, prepend a placeholder with visibility: hidden to take its place.
      if (strpos($posts_pagination, 'prev page-numbers') === false) {
          $posts_pagination = str_replace('<div class="nav-links">', '<div class="nav-links"><span class="prev page-numbers placeholder" aria-hidden="true">' . $prev_text . '</span>', $posts_pagination);
      }

      // If we're not outputting the next page link, append a placeholder with visibility: hidden to take its place.
      if (strpos($posts_pagination, 'next page-numbers') === false) {
          $posts_pagination = str_replace('</div>', '<span class="next page-numbers placeholder" aria-hidden="true">' . $next_text . '</span></div>', $posts_pagination);
      }

      if ($posts_pagination) {
          ?>

              <div class="pagination-wrapper section-inner container">
                <div class="col-md-8 mx-auto mt-4">

                  <?php echo $posts_pagination; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already escaped during generation.?>

                </div>
              </div>
              <!-- .pagination-wrapper -->

              <?php
      }
 ?>

  </div>
    </div>
  </section>
  <?php get_footer(); ?>
