<?php
$post = $args['data'] ?? false;
$realisation_disable_link = ljn_get_option('realisation_disable_link');
if (isset($post->ID) && $post->ID > 0) :
	$data = get_fields($post->ID) ?? array();
	$url = get_permalink($post->ID);
	$disable_link = $data['disable_link'] ?? false;
	$titre = $data['titre'] ?? get_the_title($post->ID);
	$location = $data['localisation'] ?? '';
	$aspect = $data['aspect_ratio'] ?? '16/18';
?>

	<?php if (!$disable_link && $realisation_disable_link) : ?>
		<a href="<?php echo $url; ?>" class="card-realisation group relative scroll-appear overflow-hidden ">
		<?php
	else : ?>
			<div class="card-realisation group relative  scroll-appear overflow-hidden ">
			<?php endif; ?>
			<div class="card-image-wrapper relative bg-gray-200 w-full">
				<div class="w-full overflow-hidden aspect-[<?php echo $aspect; ?>] bg-gray-300">
					<?php if (isset($data['vignette']) && $data['vignette'] > 0) : echo wp_get_attachment_image($data['vignette'], 'ljn_card_realisation_portrait', false, array('loading' => 'lazy', 'class' => 'card-image w-full  h-full object-cover object-center transition-transform duration-700 ease-out group-hover:scale-110', 'sizes' => '(min-width: 1280px) 25vw, (min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw'));
					endif; ?>
				</div>

				<div class="card-realisation-overlay absolute inset-0">
					<div class="card-realisation-overlay-bg absolute inset-0 bg-blue-400 opacity-0 group-hover:opacity-[85%] transition-opacity duration-500 ease-out"></div>
					<?php if (!$disable_link && $realisation_disable_link) : ?>
						<div class="card-realisation-overlay-plus absolute top-4 right-4 z-10 transition-transform duration-500 ease-out opacity-0 group-hover:opacity-100 group-hover:rotate-90">
							<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="text-orangeDark">
								<use href="<?php echo get_template_directory_uri(); ?>/svg/sprite.svg#icon-plus" />
							</svg>
						</div>
					<?php endif; ?>
					<div class="card-realisation-overlay-content absolute bottom-0 left-0 right-0 p-5 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out text-white ">
						<h2 class="text-base font-regular font-serif flex flex-col gap-1">
							<?php echo $titre; ?>
							<?php if (!empty($location)) : ?>
								<span class="text-[0.925rem] font-sans">
									<?php echo $location; ?>
								</span>
							<?php endif; ?>
						</h2>
					</div>
				</div>
			</div>
			<?php if (!$disable_link && $realisation_disable_link) : ?>
		</a>
	<?php else : ?>
		</div>
	<?php endif; ?>
<?php endif; ?>
