<?php
/**
 * Front-end markup for RSM Image widget.
 *
 * @package Rsmspark_Content_Widgets
 */

defined( 'ABSPATH' ) || exit;

$wrapper_classes = array(
	'rsmspark-cw',
	'rsmspark-cw-image',
	'rsmspark-cw-image--h-' . sanitize_html_class( $align_h ),
	'rsmspark-cw-image--v-' . sanitize_html_class( $align_v ),
);
if ( ! empty( $border_enabled ) ) {
	$wrapper_classes[] = 'rsmspark-cw-image--has-border';
}
if ( ! empty( $has_aspect ) ) {
	$wrapper_classes[] = 'rsmspark-cw-image--has-aspect';
}
if ( ! empty( $lightbox_enabled ) ) {
	$wrapper_classes[] = 'rsmspark-cw-image--lightbox';
}

$figure_attrs = array(
	'class' => implode( ' ', $wrapper_classes ),
	'style' => $inline_style,
);
if ( ! empty( $lightbox_enabled ) ) {
	$figure_attrs['data-rsmspark-cw-image-lightbox'] = '1';
	$figure_attrs['data-lightbox-src']          = $lightbox_url;
	$figure_attrs['data-lightbox-alt']          = $alt_text;
	if ( ! empty( $lightbox_caption ) ) {
		$figure_attrs['data-lightbox-caption'] = $lightbox_caption;
	}
}

?>
<figure
	<?php foreach ( $figure_attrs as $attr_key => $attr_value ) : ?>
		<?php if ( '' === (string) $attr_value ) : ?>
			<?php continue; ?>
		<?php endif; ?>
		<?php echo esc_attr( (string) $attr_key ); ?>="<?php echo esc_attr( (string) $attr_value ); ?>"
	<?php endforeach; ?>
>
	<?php if ( ! empty( $has_image ) ) : ?>
		<div class="rsmspark-cw-image__frame">
			<?php if ( ! empty( $link_url ) ) : ?>
				<a class="rsmspark-cw-image__link" href="<?php echo esc_url( $link_url ); ?>">
					<img
						class="rsmspark-cw-image__img"
						src="<?php echo esc_url( $image_url ); ?>"
						alt="<?php echo esc_attr( $alt_text ); ?>"
						loading="lazy"
						decoding="async"
					/>
				</a>
			<?php elseif ( ! empty( $lightbox_enabled ) ) : ?>
				<button
					type="button"
					class="rsmspark-cw-image__lightbox-trigger"
					aria-label="<?php esc_attr_e( 'View larger image', 'rsm-content-widgets' ); ?>"
				>
					<img
						class="rsmspark-cw-image__img"
						src="<?php echo esc_url( $image_url ); ?>"
						alt="<?php echo esc_attr( $alt_text ); ?>"
						loading="lazy"
						decoding="async"
					/>
				</button>
			<?php else : ?>
				<img
					class="rsmspark-cw-image__img"
					src="<?php echo esc_url( $image_url ); ?>"
					alt="<?php echo esc_attr( $alt_text ); ?>"
					loading="lazy"
					decoding="async"
				/>
			<?php endif; ?>
		</div>
		<?php if ( ! empty( $lightbox_enabled ) ) : ?>
			<div
				id="<?php echo esc_attr( $widget_uid ); ?>-lightbox"
				class="rsmspark-cw-image__lightbox"
				hidden
				aria-hidden="true"
			>
				<div class="rsmspark-cw-image__lightbox-backdrop" tabindex="-1"></div>
				<div
					class="rsmspark-cw-image__lightbox-dialog"
					role="dialog"
					aria-modal="true"
					aria-label="<?php esc_attr_e( 'Image preview', 'rsm-content-widgets' ); ?>"
				>
					<button type="button" class="rsmspark-cw-image__lightbox-close" aria-label="<?php esc_attr_e( 'Close', 'rsm-content-widgets' ); ?>">&times;</button>
					<div class="rsmspark-cw-image__lightbox-body"></div>
				</div>
			</div>
		<?php endif; ?>
	<?php else : ?>
		<div class="rsmspark-cw-image__placeholder" aria-hidden="true">
			<span class="rsmspark-cw-image__placeholder-icon dashicons dashicons-format-image"></span>
			<span class="rsmspark-cw-image__placeholder-label"><?php esc_html_e( 'Choose an image in the widget settings.', 'rsm-content-widgets' ); ?></span>
		</div>
	<?php endif; ?>
</figure>
