<!-- Get Header -->
<?php get_header(); ?>

<section class="h-full overflow-scroll no-scrollbar bg-white pt-16 pb-24">

  <div class="flex flex-col">

    <div class="flex flex-col items-center justify-center">

      <a class="flex items-center space-x-2 p-4" href="<?php echo get_site_url(); ?>">
        <img width="40px" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/header__logo.png" alt="NAN Logo">
        <h1 class="text-2xl">Search</h1>
      </a>

      <?php
      $numberOfPostsFound = count($posts);
      ?>

      <div class="w-full bg-blue-500 p-4 text-white">
        <p class="text-2xl max-w-7xl mx-auto">Results for "<?= esc_html(get_search_query(false)) ?>" (<?= $numberOfPostsFound ?>)</p>
      </div>

    </div>

    <div class="py-8">
      <?php if (have_posts()) { ?>

        <ul class="relative max-w-7xl mx-auto space-y-4 px-4">
          <?php while (have_posts()) {
            the_post(); ?>

            <li class="w-full">
              <div>
                <a class="font-medium underline" href="<?= the_permalink() ?>">
                  <?= the_title() ?>
                  <?php /** ddd($posts); */ ?>
                </a>
              </div>
            </li>

          <?php } ?>

        </ul> <?php } else { ?>

        <div class="w-full px-4">
          <p class="max-w-7xl mx-auto text-2xl">
            No results for "<?= esc_html(get_search_query(false)) ?>"
          </p>
        </div>

      <?php } ?>

    </div>


    <div class="px-2 pt-4 pb-8 bg-cadet-200">
      <div class="flex items-center justify-center">
        <h1 class="font-medium text-2xl p-4">Visit category pages</h1>
        <i class="bi-arrow-down inline font-medium text-2xl p-4"></i>
      </div>
      <ul class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 max-w-7xl mx-auto">

        <?php $pages = get_pages_as_array();
        foreach ($pages as $page) {
          $pageID = $page['page']->ID;
          $pageTitle = $page['page']->post_title;
          $pageSlug = $page['page']->post_name;
          $pageBG = $page['page']->post_name . '.png';
          $pageBootstrapIcon = get_field('bootstrap_icon', $page['page']->ID);
        ?>
          <li class="category-cards flex rounded-md shadow-md relative overflow-hidden w-full" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/bgs/<?php echo $pageBG ?>');">
            <a class="relative w-full text-center py-10 space-y-2 flex items-center flex-col justify-center" href="<?php echo $pageSlug ?>">
              <div class="absolute inset-0 flex items-center justify-center bg-blue-500 bg-opacity-50 rounded-md py-2 px-2">
                <!-- <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i> -->
                <h2 class="text-sm font-medium text-white"><?php echo $pageTitle ?></h2>
                <!-- <p class="font-medium lg:text-center"><?php echo get_field('description', $pageID); ?></p> -->
              </div>
            </a>
          </li>
        <?php } ?>
      </ul>
    </div>

  </div>

</section>



<!-- Get Footer -->
<?php get_footer(); ?>