<?php
/**
 * Image Switcher Block
 *
 * This block was generated by create-acf-block-json.
 *
 * @package WordPress
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Block Name (sluggified).
$block_name = 'image-switcher';

$namespace = 'lf';

// Create full block name to use in classes.
$block_name = 'wp-block-' . $namespace . '-' . $block_name;

$align = ( empty( $block['align'] ) ) ? '' : 'align' . $block['align'];

$anchor = ( empty( $block['anchor'] ) ) ? null : 'id=' . $block['anchor'];

$additional_classes = $block['className'] ?? '';

$all_classes = array(
	$block_name,
	$align,
	$additional_classes,
);

$classes = implode( ' ', $all_classes );

$mobile_image_id  = get_field( 'is_mobile_image' );
$desktop_image_id = get_field( 'is_desktop_image' );
$link_url         = get_field( 'is_link' ) ?? null;
$alt_text         = get_field( 'is_alt_text' ) ?? the_title_attribute(
	array(
		'post' => get_the_ID(),
		'echo' => 0,
	)
);
?>

<div <?php echo esc_attr( $anchor ); ?>
	class="<?php echo esc_attr( $classes ); ?>">
	<?php
	if ( $link_url ) {
		?>
	<a href="<?php echo esc_url( $link_url ); ?>">
		<?php
	}
	?>
		<picture>
			<source media="(max-width: 499px)"
				srcset="<?php echo esc_url( wp_get_attachment_image_url( $mobile_image_id, 'full', false ) ); ?>">
			<source media="(min-width: 500px)"
				srcset="<?php echo esc_url( wp_get_attachment_image_url( $desktop_image_id, 'full', false ) ); ?>">
			<?php
			LF_Utils::display_responsive_images(
				$desktop_image_id,
				'full',
				'1200px',
				'svg-image',
				'lazy',
				$alt_text
			);
			?>
		</picture>

		<?php
		if ( $link_url ) {
			?>
	</a>
			<?php
		}
		?>
		<?php
		if ( is_admin() && ! $mobile_image_id && ! $desktop_image_id ) {
			echo '<div style="border: 1px solid black;"><p><strong>Image Switcher</strong>.<br><br>Select this block and then add content in the sidebar.</p></div>';
		}
		?>
</div>
