<?php
/**
 * Phippy Group 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 = 'phippy-group';

$namespace = 'lf';

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

// setup various classes sent through from $block.
$background = ( empty( $block['backgroundColor'] ) ) ? '' : 'has-' . $block['backgroundColor'] . '-background-color';

$has_background = $background ? 'has-background' : '';

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

$all_classes = array(
	$block_name,
	$background,
	$has_background,
	$additional_classes,
);

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

$phippy_desktop_webp_id = get_field( 'phippy_desktop_webp', 'option' ) ?? null;
$phippy_mobile_webp_id  = get_field( 'phippy_mobile_webp', 'option' ) ?? null;
$phippy_desktop_png_id  = get_field( 'phippy_desktop_png', 'option' ) ?? null;
$phippy_mobile_png_id   = get_field( 'phippy_mobile_png', 'option' ) ?? null;

if ( $phippy_desktop_png_id ) {
	?>
<div class="<?php echo esc_attr( $classes ); ?>">

	<div aria-hidden="true"
		class="wp-block-spacer wp-block-lf-phippy-group__spacer"></div>

	<div class="wp-block-lf-phippy-group__container">
		<div class="wp-block-lf-phippy-group__inner">
			<picture>
				<source
					srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $phippy_desktop_webp_id, 'full' ) ); ?>"
					sizes="<?php echo esc_attr( wp_get_attachment_image_sizes( $phippy_desktop_webp_id, 'full' ) ); ?>"
					media="(min-width: 700px)" type="image/webp">
				<source
					srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $phippy_mobile_webp_id, 'full' ) ); ?>"
					sizes="<?php echo esc_attr( wp_get_attachment_image_sizes( $phippy_mobile_webp_id, 'full' ) ); ?>"
					type="image/webp">
				<source
					srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $phippy_desktop_png_id, 'full' ) ); ?>"
					sizes="<?php echo esc_attr( wp_get_attachment_image_sizes( $phippy_desktop_png_id, 'full' ) ); ?>"
					media="(min-width: 700px)" type="image/png">
				<source
					srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $phippy_mobile_png_id, 'full' ) ); ?>"
					sizes="<?php echo esc_attr( wp_get_attachment_image_sizes( $phippy_mobile_png_id, 'full' ) ); ?>"
					type="image/png">
				<?php
					LF_Utils::display_responsive_images( $phippy_desktop_png_id, 'full', '1200px', 'wp-block-lf-phippy-group__image', 'lazy', 'Characters from the Phippy family' );
				?>
			</picture>
		</div>
	</div>
</div>

	<?php
}
?>
