<section class="featured">
  <div class="container">
    <div class="row">

      <?php if (have_rows('main_story')):

      while (have_rows('main_story')): the_row();

      $main_story = get_sub_field('choose_main_story');
      $override_heading = get_sub_field('override_the_heading_text');
      $override_heading = get_sub_field('override_heading') ;
      $category_name = get_sub_field('choose_display_category') ;?>

        <div class="col-12 col-md-5" data-aos="fade-up">

          <?php if ($main_story): ?>

            <?php $post = $main_story; setup_postdata($post); ?>

              <div class="top-story">
                <a href="<?php the_permalink(); ?>">

                  <?php the_post_thumbnail('large', array( 'class' => 'img-fluid w-100' )); ?>

                </a>
                <div class="d-flex flex-column">
                  <div class="category my-lg-3">

                    <?php

                      if ($category_name): ?>
                      <a href="<?php echo esc_url(get_term_link($category_name)); ?>"><?php echo esc_html($category_name->name); ?></a>
                      <?php endif; ?>

                  </div>
                  <a href="<?php the_permalink(); ?>">
                    <p class="h3 mb-3">

                      <?php the_title(); ?>

                    </p>
                  </a>
                </div>
              </div>

              <?php else: ?>

                <?php
      $args = array( 'category_name'  => 'leeds','posts_per_page' => '1' );
      $recent_posts = new WP_Query($args);
      while ($recent_posts->have_posts()) :
      $recent_posts->the_post();
      $permalink = get_the_permalink();
      $title = get_the_title();
      ?>

                  <a href="<?php echo $permalink; ?>" class="relative block w-full">
                    <div class="top-story">
                      <a href="<?php the_permalink(); ?>">
                        <?php
            if (has_post_thumbnail()) {
                the_post_thumbnail('large', array( 'class' => 'img-fluid w-100' ));
            } else {
              echo '<img class="img-fluid w-100" src="' . get_bloginfo('stylesheet_directory')
            . '/src/assets/images/default-image.jpg" />';
          }
          ?>
                      </a>

                      <div class="d-flex flex-column">
                        <div class="category my-lg-3">

                          <?php
                $categories = get_the_category();
                      $separator = ', ';
                      $output = '';
                      if (! empty($categories)) {
                          foreach ($categories as $category) {
                              $output .= '<a href="' . esc_url(get_category_link($category->term_id)) . '" alt="' . esc_attr(sprintf(__('View all posts in %s', 'thehoot'), $category->name)) . '">' . esc_html($category->name) . '</a>' . $separator;
                          }
                          echo trim($output, $separator);
                      } ?>

                        </div>
                        <a href="<?php the_permalink(); ?>">
                          <p class="h3 mb-3">

                            <?php the_title(); ?>

                          </p>
                        </a>
                      </div>
                    </div>
                  </a>

                  <?php endwhile; ?>
                    <?php wp_reset_postdata(); ?>
                      <?php endif; ?>
                        <?php wp_reset_postdata(); ?>

                        <div class="share-story">
                                    <a href="mailto:info@TheHoot.com">

                                      <p class="h3">
                                        Got a story to share?
                                      </p>
                                      Email us now
                                    </a>
                                  </div>
                            </div>
        <div class="col-7 masonry" data-aos="fade-up">

          <div class="row" data-masonry="{&quot;percentPosition&quot;: true }">
            <div class="col-sm-6 col-lg-4 mb-4 portrait">
              <?php
$args = array( 'posts_per_page' => '1', 'offset' => '1' );
$recent_posts = new WP_Query($args);
while ($recent_posts->have_posts()) :
$recent_posts->the_post();
$permalink = get_the_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();
$excerpt = apply_filters('the_content', $excerpt);
?>


                <a href="<?php echo $permalink; ?>" class="relative block w-full">
                  <div class="top-news">

                    <?php
      if (has_post_thumbnail()) {
          the_post_thumbnail('large', array( 'class' => 'img-fluid w-100' ));
      } else {
        echo '<img class="img-fluid w-100" src="' . get_bloginfo('stylesheet_directory')
      . '/src/assets/images/default-image.jpg" />';
    }
    ?>

                      <div class="d-flex flex-column">
                        <h3 class="h6">

                           <?php echo $title; ?>

                  </h3>
                      </div>
                  </div>
                </a>

                <?php endwhile; ?>
                  <?php wp_reset_postdata(); ?>
            </div>
            <div class="col-sm-6 col-lg-8 mb-4 landscape" style="height: 500px;">
              <?php
$args = array( 'posts_per_page' => '1', 'offset' => '2' );
$recent_posts = new WP_Query($args);
while ($recent_posts->have_posts()) :
$recent_posts->the_post();
$permalink = get_the_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();
$excerpt = apply_filters('the_content', $excerpt);
?>


                <a href="<?php echo $permalink; ?>" class="relative block w-full">
                  <div class="top-news">

                    <?php
      if (has_post_thumbnail()) {
          the_post_thumbnail('large', array( 'class' => 'img-fluid w-100' ));
      } else {
        echo '<img class="img-fluid w-100" src="' . get_bloginfo('stylesheet_directory')
      . '/src/assets/images/default-image.jpg" />';
    }
    ?>

                      <div class="d-flex flex-column">
                        <h3 class="h6">

                           <?php echo $title; ?>

                  </h3>
                      </div>
                  </div>
                </a>

                <?php endwhile; ?>
                  <?php wp_reset_postdata(); ?>
            </div>
            <div class="col-sm-6 col-lg-8 mb-4 landscape">
              <?php
$args = array( 'posts_per_page' => '1', 'offset' => '3' );
$recent_posts = new WP_Query($args);
while ($recent_posts->have_posts()) :
$recent_posts->the_post();
$permalink = get_the_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();
$excerpt = apply_filters('the_content', $excerpt);
?>


                <a href="<?php echo $permalink; ?>" class="relative block w-full">
                  <div class="top-news">

                    <?php
      if (has_post_thumbnail()) {
          the_post_thumbnail('large', array( 'class' => 'img-fluid w-100' ));
      } else {
        echo '<img class="img-fluid w-100" src="' . get_bloginfo('stylesheet_directory')
      . '/src/assets/images/default-image.jpg" />';
    }
    ?>

                      <div class="d-flex flex-column">
                        <h3 class="h6">

                           <?php echo $title; ?>

                  </h3>
                      </div>
                  </div>
                </a>

                <?php endwhile; ?>
                  <?php wp_reset_postdata(); ?>
            </div>
            <div class="col-sm-6 col-lg-4 mb-4 portrait">
              <?php
$args = array( 'posts_per_page' => '1', 'offset' => '4' );
$recent_posts = new WP_Query($args);
while ($recent_posts->have_posts()) :
$recent_posts->the_post();
$permalink = get_the_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();
$excerpt = apply_filters('the_content', $excerpt);
?>


                <a href="<?php echo $permalink; ?>" class="relative block w-full">
                  <div class="top-news" style="position: relative;top: -100px;">

                    <?php
      if (has_post_thumbnail()) {
          the_post_thumbnail('large', array( 'class' => 'img-fluid w-100' ));
      } else {
        echo '<img class="img-fluid w-100" src="' . get_bloginfo('stylesheet_directory')
      . '/src/assets/images/default-image.jpg" />';
    }
    ?>

                      <div class="d-flex flex-column">
                        <h3 class="h6">

                           <?php echo $title; ?>

                  </h3>
                      </div>
                  </div>
                </a>

                <?php endwhile; ?>
                  <?php wp_reset_postdata(); ?>
            </div>
          </div>
        </div>

        <?php endwhile; ?>
          <?php endif; ?>

    </div>
  </div>
</section>
