<?php
/**
 * template name: Venue Template
 * Template Post Type: page
 *
 * @package thehoot
 */

get_header(); ?>

<style media="screen">
  .col-3 img {
    height: 250px;
    object-fit: cover;
  }
</style>

<div class="mb-4">
  <?php echo do_shortcode("[wpseo_breadcrumb]"); ?>
</div>

    <?php
    $grandparentPage = wp_get_post_parent_id($post->post_parent);
    $location_title = get_field('location_title', $grandparentPage);
    $venue_title = get_field('venue_title');
    $venue_content = get_field('venue_detail');
    if ($venue_title) : ?>

      <h1><?php echo esc_html($location_title); ?>: <?php echo esc_html($venue_title); ?></h1>

      <?php endif; ?>

      <div class="clearfix">

      </div>
        <?php
if ($venue_content) : ?>
            <?php echo wp_kses_post($venue_content); ?>
          <?php endif; ?>

</div>
  <div class="row">

    <?php
    $cat = get_field('choose_your_category', $grandparentPage);
    $query = new WP_Query(array(
              'taxonomy' => $cat,
              'posts_per_page' => 3,
              'orderby' => 'date'
             ));

            while ($query->have_posts()) : $query->the_post();
            ?>

            <div class="col-3">
      <article class="mt-5">

        <a href="<?php the_permalink(); ?>" class="w-100 h-100">

          <?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail('full', array( 'class' => 'img-fluid w-100' )) ?>

              <?php endif;  ?>

        </a>
        <div class="flex justify-between mt-5">
          <h2 class="h5">
                        <a href="<?php the_permalink(); ?>">

                    <?php the_title(); ?>

                        </a>
                      </h2>
          <p class="flex-shrink-1 mt-2 text-lg sm:text-xl text-gray" data-aos="animate-up">

            <?php the_date(); ?>

          </p>
        </div>
          </div>
      </article>

      <?php endwhile;

                wp_reset_postdata()

                ?>


  </div>


  <?php get_footer(); ?>
