<?php
//print_r($attributes);
extract($attributes);

global $wp_query;
$temp = $wp_query;

if (is_archive() || is_search() || (is_home() && is_front_page()) || is_home()) {
	$my_query = $wp_query;
} else {
	$wp_query = $my_query = Flo_Guten_Blocks_Helper::get_post_query($attributes);
}

Flo_Guten_Blocks_Helper::load_google_fonts([
	$postTitleTypography,
	$postDateTypography,
	$postTaxonomyTypography,
	$paginationArrowsTypography,
	$paginationNumbersTypography,
]);

$overlay_visibility = '';
if (!$displayImageOverlay) {
	$overlay_visibility = 'overlay-hidden';
}
?>
<div class="
	<?php echo $className; ?>
	flo-block
	<?php echo Flo_Guten_Blocks_Helper::get_additional_class($attributes); ?>
	flo-block-post-grid flo-block-post-grid--<?php echo $layout; ?>
	flo-block-post-grid--<?php echo $layoutMobile; ?>
	flo-block-post-grid--columns-<?php echo $columns; ?>
	flo-block-post-grid--<?php echo $masonry ? 'masonry' : 'no-masonry'; ?>
	<?php echo $displayTextOnHover ? 'flo-block-post-grid--text-on-hover' : ''; ?>
	<?php echo !$my_query->have_posts() ? 'flo-block-post-grid--not-found' : ''; ?>
	" style="
	--gap-between-items: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
	$gapBetweenItems / 2
); ?>;
 --mobile-gap-between-items: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
													$mobileGapBetweenItems / 2
												); ?>;
 --gap-inside-overlay: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
																$attributes['gapInsideOverlay']
															); ?>;
	--color-overlay: <?php echo Flo_Guten_Blocks_Helper::get_style_color(
													$overlayColor
												); ?>;
	--opacity-overlay: <?php echo $overlayOpacity; ?>;
	--text-elements-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color(
											$textElementsColor
										); ?>;
	--mobile-text-elements-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color(
														$mobileTextElementsColor
													); ?>;
	--meta-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color(
																	$metaColor
																); ?>;
	--mobile-meta-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color(
									$mobileMetaColor
								); ?>;
	--image-height: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
													$imageHeight
												); ?>;
 --mobile-image-height: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
										$mobileImageHeight
									); ?>;
	--top-margin: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
													$topMargin
												); ?>;
	--bottom-margin: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
									$bottomMargin
								); ?>;
	--mobile-top-margin: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
											$mobileTopMargin
										); ?>;
	--mobile-bottom-margin: <?php echo Flo_Guten_Blocks_Helper::get_em_by_value(
													$mobileBottomMargin
												); ?>;
	<?php echo Flo_Guten_Blocks_Helper::get_style_for_typography(
														'post-title',
														$postTitleTypography
													); ?>
	<?php echo Flo_Guten_Blocks_Helper::get_style_for_typography(
		'post-date',
		$postDateTypography
	); ?>
	<?php echo Flo_Guten_Blocks_Helper::get_style_for_typography(
		'post-taxonomy',
		$postTaxonomyTypography
	); ?>
	 " <?php echo !empty($anchor) ? 'id="' . $anchor . '"' : ''; ?>>
	<?php if ($my_query->have_posts()) { ?>
		<div class="
		 flo-block-post-grid__items">
			<?php while ($my_query->have_posts()) {
		$my_query->the_post();

		$categoryObject = NULL;
		if ($displayPostTaxonomy && !empty($taxonomyType)) {
			$categoryObject = Flo_Guten_Blocks_Helper::getListingCategory(get_the_ID(), $taxonomyType);
		}
		$image_url = '';
		if (has_post_thumbnail()) {
			$thumbnail_id = get_post_thumbnail_id();
			$image_data = wp_get_attachment_image_src($thumbnail_id, 'full');
			$image_url = $image_data[0];
			$src_set = wp_get_attachment_image_srcset($thumbnail_id, 'full');
		} else {
			$image_url = Flo_Guten_Blocks_Helper::get_default_post_image();
			$image_data[1] = 1160;
			$image_data[2] = 760;
			$src_set = '';
		}

		ob_start(); ?>
				<div class="flo-block-post-grid__text">
					<?php if ($displayPostTaxonomy && $categoryObject) { ?>
						<div class="flo-block-post-grid__taxonomy">
							<a class="in_block" data-font="<?php echo $postTaxonomyTypography['type'] ==
																								'theme'
																								? $postTaxonomyTypography['theme']
																								: ''; ?>" href="<?php echo get_term_link(
																									$categoryObject
																								); ?>"><?php echo $categoryObject->name; ?></a>
						</div>
					<?php } ?>
					<<?php echo !empty($titleTagName)
							? $titleTagName
							: 'h3'; ?> class="flo-block-post-grid__title"><a class="in_block" data-font="<?php echo $postTitleTypography['type'] == 'theme'
																																															? $postTitleTypography['theme']
																																															: ''; ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></<?php echo !empty($titleTagName)
																																																																																			? $titleTagName
																																																																																			: 'h3'; ?>>
					<?php if ($displayPostDate) { ?>
						<div class="flo-block-post-grid__date" data-font="<?php echo $postDateTypography['type'] == 'theme'
																																? $postDateTypography['theme']
																																: ''; ?>"><?php echo get_the_date(); ?></div>
					<?php } ?>
				</div>

				<?php
				$info = ob_get_clean(); ?>

				<div class="flo-block-post-grid__item">
					<div class="flo-block-post-grid__image-wrapper">
						<?php if ($image_url) : ?>
							<div class='flo-block-post-grid__image'>
								<a href="<?php the_permalink(); ?>">
									<img width="<?php echo $image_data[1]; ?>" height="<?php echo $image_data[2]; ?>" class="lazyload" data-src="<?php echo $image_url; ?>" data-srcset="<?php echo $src_set; ?>" sizes="(min-width: 768px) calc(100vw / <?php echo $columns; ?>), 100vw" />
								</a>
							</div>
						<?php endif; ?>

						<div class="flo-block-post-grid__overlay-wrapper <?php echo $overlay_visibility  ?>">
						<a href="<?php the_permalink(); ?>">	
							<div class="flo-block-post-grid__overlay"></div>
						</a>
						</div>

						<?php //if ('text-over' == $layout) {
						?>
						<?php echo $info; ?>
						<?php //}
						?>
					</div>
					<?php //if ('text-under' == $layout) {
					?>
					<?php //echo $info;
					?>
					<?php //}
					?>
				</div>
			<?php
	} ?>
		</div>
		<?php if ($my_query->max_num_pages > 1 && $attributes['displayPagination']) {
		echo Flo_Guten_Blocks_Helper::get_post_pagination($attributes);
	} ?>
	<?php } else {
		echo Flo_Guten_Blocks_Helper::get_not_found_message();
	} ?>
</div>
<?php $wp_query = $temp;
