<?php
/**
 * The template for displaying search results pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package Freeshifter
 */

get_header(); ?>

<main class="py-8 lg:py-24" style="min-height: 100vh;">
  <section class="container mx-auto relative z-10">
    <?php
    if ( have_posts() ) :

      printf( '<h1 class="text-center mb-8">Search Results for: %s</h1>',
        esc_html( get_search_query() )
      );

      echo '<div class="lg:flex justify-start flex-wrap lg:-mx-4">';
        while ( have_posts() ) {
          the_post(); ?>
          <div class="lg:w-1/3 lg:px-4 mb-8">
            <article <?php post_class( 'h-full' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
              <a class="card-link h-full bg-light-2" rel="bookmark" href="<?= esc_url( get_the_permalink() ); ?>">
                <header>
                  <?php
                  if( has_post_thumbnail() ) {
                    the_post_thumbnail( 'thumbnail', [
                      'class' => 'shadow-lg rounded-full float-right ml-2 mb-2 w-1/4'
                    ]);
                  }
                  ?>
                  <div class="text-left relative z-10">
                    <h2 class="card-title text-h4 font-bold m-0" itemprop="headline"><?= get_the_title(); ?></h2>
                    <p class="text-sm italic mt-2">
                      <time class="<?= is_singular('page') ? 'hidden' : ''; ?>" itemprop="datePublished" datetime="<?= get_the_date( 'c' ); ?>">Published on <?= get_the_date( 'F j, Y'); ?></time>
                    </p>
                  </div>
                </header>
                <?php
                printf( '<div class="article text-sm text-left">%s</div>',
                  get_the_excerpt()
                ); ?>
              </a>
            </article>
          </div>
          <?php
        }
      echo '</div>';

      the_posts_navigation();

    else :

      printf( 'Sorry, no results for %s',
        esc_html( get_search_query() )
      );

    endif; ?>
  </section>
</main>

<?php
get_footer();