<section class="trips-list trips-list-one my-96">
<div class="container-xl">
	<?php if( $title ) : ?><h2><?php echo esc_html( $title ); ?></h2><?php endif; ?>
	<div class="d-flex flex-column justify-content-center align-items-start">
		<div class="w-p100 mb-20 d-flex flex-column flex-sm-row justify-content-between align-items-center align-items-sm-start gap-20 flex-nowrap overflow-hidden">
		<?php
		$posts = $query->posts;
		$count = count($posts);
		for ($i = 0; $i < min(3, $count); $i++):
			$post = $posts[$i];
		?>
		<div class="w-p100 w-md-p33 h-280 position-relative clearfix overflow-hidden">
    	<a href="<?php echo esc_url( get_the_permalink( $post->ID ) ); ?>" class="w-p100 h-p100 stretched-link img-scale d-block">
				<?php 
					$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium_large' );
					if ($image) {
	          $image_url = esc_url( $image[0] );
	        } else {
	          $image_url = get_template_directory_uri() . '/images/no-image.png';
	        }
				?>
				<img src="<?php echo $image_url; ?>" alt="<?php echo esc_attr( $title ); ?>" class="w-p100 h-p100 object-fit-cover">
			</a>
			<div class="w-p100 position-absolute left-0 bottom-0 p-16 text-light rounded-2 overflow-hidden z-2">
				
				<h3 class="mb-16">
					<a href="<?php echo esc_url( get_the_permalink( $post->ID ) ); ?>" class="text-light text-hover-primary"><?php the_title(); ?></a>
				</h3>
				
				<div class="">	
				<?php $trip_info = travel_tour_get_trip_info( $post->ID ); ?>
				<?php $trip_settings = travel_tour_trip_settings(); ?>
				<?php if( isset( $trip_info['trip_duration'] ) && $trip_info['trip_duration'] != '' ) : ?>
					<div class="lh-sm mb-8" aria-hidden="true">
						<i class="fa fa-clock-o text-primary"></i>
            <?php
            	esc_html_e( 'Duration: ','travel-tour' );
            	echo esc_attr( $trip_info['trip_duration'] );
            	if( $trip_info['trip_duration'] > 1 ) {
            		esc_html_e(' days','travel-tour');
            	} else {
            		esc_html_e(' day','travel-tour');
            	}

            	if( isset( $trip_info['trip_duration_nights'] ) && $trip_info['trip_duration_nights'] != '' ) {
            		echo " - " . esc_attr( $trip_info['trip_duration_nights'] );
            		if( $trip_info['trip_duration_nights'] > 1 ) {
              		esc_html_e(' nights','travel-tour');
              	} else {
              		esc_html_e(' night','travel-tour');
              	}
            	}
            ?>
          </div>
	      <?php endif; ?>

        <?php
          $code = 'USD';
          if( isset( $trip_settings['currency_code'] ) && $trip_settings['currency_code'] != '' ) {
          	$code = esc_attr( $trip_settings['currency_code'] );
          }
          $obj = new Wp_Travel_Engine_Functions();
          $currency = $obj->wp_travel_engine_currencies_symbol( $code );
          $cost = isset( $trip_info['trip_price'] ) ? $trip_info['trip_price']: '';
          $prev_cost = isset( $trip_info['trip_prev_price'] ) ? $trip_info['trip_prev_price']: '';
          if( $cost != '' ) { ?>
					<div class="lh-sm">
            <?php
              esc_html_e( 'Price: ','travel-tour' );
              if( $prev_cost != '' && isset( $trip_info['sale'] ) ) {
                echo '<strike style="color: #c1c1c1;">';
                echo "<span>" . esc_attr( $currency . $obj->wp_travel_engine_price_format( $prev_cost ) . " " . $code ) . '</span>';
                echo '</strike>';
              }
              $obj = new Wp_Travel_Engine_Functions();
              echo ' ' . esc_attr( $currency . " " . $obj->wp_travel_engine_price_format( $cost ) . ' ' . $code );
            ?>
					</div>
	        <?php } ?>

				</div>
			</div>
		</div>
		<?php endfor; ?>
		</div>

		<div class="w-p100 grid gap-20">
		<?php if ($count > 3): ?>
		<?php for ($i = 3; $i < $count; $i++):
			$post = $posts[$i];
		?>
		<div class="g-col-12 g-col-sm-6 h-130 d-flex flex-row justify-content-start align-items-center flex-nowrap overflow-hidden clearfix">
			<div class="w-p33 h-p100 mr-16 overflow-hidden rounded">
				<a href="<?php echo esc_url( get_the_permalink( $post->ID ) ); ?>" class="w-p100 h-p100 stretched-link img-scale d-block">
					<?php 
						$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
						if ($image) {
		          $image_url = esc_url( $image[0] );
		        } else {
		          $image_url = get_template_directory_uri() . '/images/no-image.png';
		        }
					?>
					<img src="<?php echo $image_url; ?>" alt="<?php echo esc_attr( $title ); ?>" class="w-p100 h-p100 object-fit-cover img-scale">
				</a>
			</div>
			<div class="w-p66 h-p100 ms-12 p-0 rounded-2 overflow-hidden">
				
				<h3 class="text-primary lh-sm mb-16"><a href="<?php echo esc_url( get_the_permalink( $post->ID ) ); ?>" class=""><?php the_title(); ?></a></h3>
				
				<div class="">	
				<?php $trip_info = travel_tour_get_trip_info( $post->ID ); ?>
				<?php $trip_settings = travel_tour_trip_settings(); ?>
				<?php if( isset( $trip_info['trip_duration'] ) && $trip_info['trip_duration'] != '' ) : ?>
					<div class="lh-sm mb-8" aria-hidden="true">
						<i class="fa fa-clock-o text-primary"></i>
            <?php
            	esc_html_e( 'Duration: ','travel-tour' );
            	echo esc_attr( $trip_info['trip_duration'] );
            	if( $trip_info['trip_duration'] > 1 ) {
            		esc_html_e(' days','travel-tour');
            	} else {
            		esc_html_e(' day','travel-tour');
            	}

            	if( isset( $trip_info['trip_duration_nights'] ) && $trip_info['trip_duration_nights'] != '' ) {
            		echo " - " . esc_attr( $trip_info['trip_duration_nights'] );
            		if( $trip_info['trip_duration_nights'] > 1 ) {
              		esc_html_e(' nights','travel-tour');
              	} else {
              		esc_html_e(' night','travel-tour');
              	}
            	}
            ?>
          </div>
	      <?php endif; ?>

        <?php
          $code = 'USD';
          if( isset( $trip_settings['currency_code'] ) && $trip_settings['currency_code'] != '' ) {
          	$code = esc_attr( $trip_settings['currency_code'] );
          }
          $obj = new Wp_Travel_Engine_Functions();
          $currency = $obj->wp_travel_engine_currencies_symbol( $code );
          $cost = isset( $trip_info['trip_price'] ) ? $trip_info['trip_price']: '';
          $prev_cost = isset( $trip_info['trip_prev_price'] ) ? $trip_info['trip_prev_price']: '';
          if( $cost != '' ) { ?>
					<div class="lh-sm">
            <?php
              esc_html_e( 'Price: ','travel-tour' );
              if( $prev_cost != '' && isset( $trip_info['sale'] ) ) {
                echo '<strike class="text-dark text-opacity-25">';
                echo '<span>' . esc_attr( $currency . $obj->wp_travel_engine_price_format( $prev_cost ) . " " . $code ) . '</span>';
                echo '</strike>';
              }
              $obj = new Wp_Travel_Engine_Functions();
              echo ' ' . esc_attr( $currency . " " . $obj->wp_travel_engine_price_format( $cost ) . ' ' . $code );
            ?>
					</div>
	        <?php } ?>

				</div>
			</div>
		</div>
		<?php endfor; ?>
		<?php endif; ?>
		</div>

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