<?php
/**
 * The template for displaying search results pages
 */

get_header();
?>

<div class="bg-light py-5 border-bottom mb-5">
    <div class="container text-center">
        <?php if (have_posts()): ?>
            <h1 class="display-4 fw-bold mb-3 font-serif">
                <?php printf(esc_html__('Search Results for: %s', 'wisdom1'), '<span class="text-primary">' . get_search_query() . '</span>'); ?>
            </h1>
            <p class="lead text-muted mx-auto w-75 font-sans">
                <?php printf(esc_html__('Showing results matching your query.'), 'wisdom1'); ?>
            </p>
        <?php else: ?>
            <h1 class="display-4 fw-bold mb-3 font-serif"><?php esc_html_e('Nothing Found', 'wisdom1'); ?></h1>
            <p class="lead text-muted mx-auto w-75 font-sans">
                <?php esc_html_e('Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'wisdom1'); ?>
            </p>
        <?php endif; ?>
    </div>
</div>

<div class="container mb-5">
    <main id="primary" class="site-main">
        <div class="row g-4">
            <?php
            if (have_posts()):
                while (have_posts()):
                    the_post();
                    get_template_part('template-parts/content', 'card');
                endwhile;

                echo '</div>'; // close row
            
                the_posts_navigation(array(
                    'screen_reader_text' => 'Posts navigation',
                    'prev_text' => '<span class="btn btn-outline-primary">&larr; Older Results</span>',
                    'next_text' => '<span class="btn btn-outline-primary">Newer Results &rarr;</span>',
                    'class' => 'd-flex justify-content-between my-5'
                ));
            else:
                ?>
                <div class="col-12 col-md-8 mx-auto text-center py-5">
                    <div class="card border-0 bg-light p-5 rounded-4 text-center">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" class="text-muted mx-auto mb-4">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                        <h3 class="h4 font-serif fw-bold mb-3">No matching articles found.</h3>
                        <p class="text-muted mb-4">Try searching for different keywords or explore our latest articles
                            below.</p>
                        <form role="search" method="get" class="d-flex w-75 mx-auto"
                            action="<?php echo esc_url(home_url('/')); ?>">
                            <input type="search" class="form-control form-control-lg me-2" placeholder="Search wisdom..."
                                value="<?php echo get_search_query(); ?>" name="s">
                            <button type="submit" class="btn btn-primary btn-lg px-4">Search</button>
                        </form>
                    </div>
                </div>
            </div>
            <?php
            endif;
            ?>
    </main>
</div>

<?php
get_footer();
