<?php get_header(); ?>

<div class="container my-1 bg-light text-dark">
  <div class="row">
  
    <div class="col-md-4">
      <?php get_sidebar(); ?>
    </div>
    <div class="col-md-8">
      <h1 class="mb-4">
        <?php printf(__('Search Results for: %s', 'howcan'), '<span class="text-dark">' . get_search_query() . '</span>'); ?>
      </h1>

      <?php if (have_posts()) : ?>
        <div class="list-group">
          <?php while (have_posts()) : the_post(); ?>
            <div class="card mb-4 border-0 shadow-sm">
              <?php if (has_post_thumbnail()) : ?>
                <a href="<?php the_permalink(); ?>">
                  <?php the_post_thumbnail('medium_large', ['class' => 'card-img-top rounded-top']); ?>
                </a>
              <?php endif; ?>
              <div class="card-body">
                <h2 class="card-title h5">
                  <a href="<?php the_permalink(); ?>" class="text-decoration-none text-dark">
                    <?php the_title(); ?>
                  </a>
                </h2>
                <p class="card-text text-muted small mb-2">
                  <i class="bi bi-calendar-event"></i> <?php echo get_the_date(); ?> |
                  <i class="bi bi-person"></i> <?php the_author(); ?>
                </p>
                <p class="card-text">
                  <?php echo wp_trim_words(get_the_excerpt(), 25, '...'); ?>
                </p>
                <a href="<?php the_permalink(); ?>" class="btn btn-dark btn-sm">
                  <?php _e('Read More', 'howcan'); ?>
                </a>
              </div>
            </div>
          <?php endwhile; ?>
        </div>

        <!-- Pagination -->
        <div class="pagination mt-4">
          <?php
          the_posts_pagination([
            'mid_size' => 2,
            'prev_text' => __('« Prev', 'howcan'),
            'next_text' => __('Next »', 'howcan'),
            'class' => 'pagination justify-content-center'
          ]);
          ?>
        </div>

      <?php else : ?>
        <div class="alert alert-warning">
          <?php _e('No results found. Try a different search?', 'howcan'); ?>
        </div>
        <?php get_search_form(); ?>
      <?php endif; ?>
    </div>
  </div>
</div>

<?php get_footer(); ?>