<?php
$travel_blogz_options = travel_blogz_theme_options();

$banner_title = $travel_blogz_options['banner_title'];
$banner_sub_title = $travel_blogz_options['banner_sub_title'];
$banner_image = $travel_blogz_options['banner_image'];
$banner_blog_category = $travel_blogz_options['banner_blog_category'];

if(!empty($banner_image)){
  $background_img = "style='background-image:url(".esc_url($banner_image).")'";
}
else{
  $background_img = '';
}

?>
<div class="hero-section">
	<div class="image-wrap" <?php echo wp_kses_post($background_img); ?>>
	</div>

	<div class="hero-blog-content">
		<div class="hero-blog-content-wrap">
		<?php
      if ($banner_title)
          echo '<h1>' . esc_html($banner_title) . '</h1>';

      if ($banner_sub_title)
          echo '<span>' . esc_html($banner_sub_title) . '</span>';
      ?>
    </div>

      <?php
          if($banner_blog_category){
              $args = array(
                  'post_type' => 'post',
                  'posts_per_page' => 4,
                  'post_status' => 'publish',
                  'order' => 'desc',
                  'orderby' => 'menu_order date',
                  'tax_query' =>
                      array(
                          array(
                              'taxonomy' => 'category',
                              'field' => 'slug',
                              'terms' => $banner_blog_category,
                          ),
                      ),
              );
          }
          else{
              $args = array(
                  'post_type' => 'post',
                  'posts_per_page' => 4,
                  'post_status' => 'publish',
                  'order' => 'desc',
                  'orderby' => 'menu_order date',
              );
          }


        $query = new \WP_Query($args);

      ?>

        <div class="small-slider-sec">
          <div class="small-banner-wrap twocolumn">
		    <?php
		    if ($query->have_posts()) {
		        while ($query->have_posts()) : $query->the_post();
		            global $post;
		            $post_format = get_post_format($post->ID);
		            $post_thumbnail_id = get_post_thumbnail_id(get_the_ID());
		            $image = wp_get_attachment_image_src($post_thumbnail_id, 'large');
		            $category = get_the_category();
		            $url="";
		            if (!empty($image)) {
		                $image_style = "style='background-image:url(" . esc_url($image[0]) . ")'";
		            } else {
		                $image_style = '';
		            }
		            if($image){
		                $url = $image[0];
		                }
		            ?>
        <div class="card" <?php echo wp_kses_post($image_style); ?>>
          <div class="overlay"></div>
	          <div class="info">
	            <div class="title">
	            	<h2><a href="<?php echo esc_url(get_the_permalink()); ?>"><?php echo the_title(); ?></a></h2>
	            </div>
	            <ul class="post-meta">
	                <li class="post-cat">
										<?php 
										$categories = get_the_category();
										if ( ! empty( $categories ) ) {
										    echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>';
										}?>
										</li>
	                  <li class="meta-date"><a href="<?php echo esc_url(travel_blogz_archive_link($post)); ?>"><time class="entry-date published" datetime="<?php echo esc_url(travel_blogz_archive_link($post)); ?>"><?php echo esc_html(the_time( get_option( 'date_format' ) )); ?></time></a>
	                  </li>
	            </ul>
	          </div>
	       </div>
          <?php 
           endwhile;
           wp_reset_postdata();
            }
                        ?>
      </div>
    </div>
	</div>
</div>