<?php
/**
 * Preload meta box.
 *
 * @package WP_Smush
 *
 * @var bool $lcp_preload_enabled LCP preload status.
 * @var bool $preload_settings LCP preload settings.
 */

if ( ! defined( 'WPINC' ) ) {
	die;
}

?>

<p>
	<?php
	esc_html_e( 'Preload helps improve the Largest Contentful Paint (LCP) metric by optimizing images that form the main viewport content. When enabled, Smush also overrides WordPress’ default fetchpriority=high with smarter detection to enhance lazy loading and help meet Google’s recommended 2.5-second benchmark for good user experience.', 'wp-smushit' );
	?>
</p>

<div class="sui-box-settings-row" id="preload-images-settings-row">
	<div class="sui-box-settings-col-1">
		<span class="sui-settings-label">
			<?php esc_html_e( 'Preload Critical Images', 'wp-smushit' ); ?>
		</span>
		<span class="sui-description">
			<?php esc_html_e( 'Get a faster initial load and optimize your LCP audit by automatically preloading your most critical image.', 'wp-smushit' ); ?>
		</span>
	</div>

	<div class="sui-box-settings-col-2">
		<div class="sui-form-field">
			<label for="preload-images" class="sui-toggle">
				<input
					type="checkbox"
					id="preload-images"
					name="preload_images"
					aria-labelledby="preload-images-label"
					aria-describedby="preload-images-description"
					disabled
					<?php checked( $lcp_preload_enabled ); ?>
				/>
				<span class="sui-toggle-slider" aria-hidden="true"></span>
				<span id="noscript-label" class="sui-toggle-label">
					<?php esc_html_e( 'Enable Preloading Critical Images', 'wp-smushit' ); ?>
				</span>
			</label>
			<?php
			$upgrade_url = $this->get_utm_link(
				array(
					'utm_campaign' => 'smush_lazyload-preload_preload-critical-images',
				)
			);
			?>
			<span id="preload-images-description" class="sui-description">
				<a style="margin-left:44px;" class="smush-upsell-link" href="<?php echo esc_url( $upgrade_url ); ?>" target="_blank">
				<strong>
					<?php
						esc_html_e( 'For Faster Load Times & Optimized LCP – Get Smush Pro', 'wp-smushit' );
					?>
				</strong>
				<span class="sui-icon-open-new-window" aria-hidden="true"></span>
			</a>
			</span>
		</div>
	</div>
</div>

<div class="sui-box-settings-row" id="preload-exclude-settings-row" style="display: <?php echo $lcp_preload_enabled ? 'flex' : 'none'; ?>">
	<div class="sui-box-settings-col-1">
		<span class="sui-settings-label">
			<?php esc_html_e( 'Exclude', 'wp-smushit' ); ?>
		</span>
		<span class="sui-description">
			<?php esc_html_e( 'Disable preload for specific pages or posts that you wish to prevent preload on', 'wp-smushit' ); ?>
		</span>
	</div>

	<div class="sui-box-settings-col-2">
		<div class="sui-form-field">
			<strong><?php esc_html_e( 'Post, Pages & URLs', 'wp-smushit' ); ?></strong>
			<div class="sui-description">
				<?php esc_html_e( 'Specify URLs of the pages or posts you want to disable preload on.', 'wp-smushit' ); ?>
			</div>
			<?php
			$strings = '';
			if ( isset( $preload_settings['exclude-pages'] ) && is_array( $preload_settings['exclude-pages'] ) ) {
				$strings = join( PHP_EOL, $preload_settings['exclude-pages'] );
			}
			?>
			<textarea class="sui-form-control" name="exclude-pages" placeholder="<?php esc_attr_e( 'E.g. /page', 'wp-smushit' ); ?>"><?php echo esc_attr( $strings ); ?></textarea>
			<div class="sui-description">
				<?php
				printf(
				/* translators: %1$s - opening strong tag, %2$s - closing strong tag */
					esc_html__( 'Add one page or post URL per line in relative format. I.e. %1$s/example-page%2$s or %1$s/example-page/sub-page/%2$s.', 'wp-smushit' ),
					'<strong>',
					'</strong>'
				);
				?>
			</div>
		</div>
	</div>
</div>

<div class="sui-box-settings-row" id="preload-images-fetchpriority-settings-row" style="display: <?php echo $lcp_preload_enabled ? 'flex' : 'none'; ?>">
	<div class="sui-box-settings-col-1">
		<span class="sui-settings-label">
			<?php esc_html_e( 'Optimize LCP Fetchpriority', 'wp-smushit' ); ?>
		</span>
		<span class="sui-description">
			<?php esc_html_e( 'Replace WordPress default fetchpriority=high with smarter LCP detection for better lazy loading, image handling, and faster page performance.', 'wp-smushit' ); ?>
		</span>
	</div>

	<div class="sui-box-settings-col-2">
		<div class="sui-form-field">
			<label for="lcp-fetchpriority" class="sui-toggle">
				<input
						type="checkbox"
						id="lcp-fetchpriority"
						name="lcp_fetchpriority"
						aria-labelledby="lcp-fetchpriority-label"
						aria-describedby="lcp-fetchpriority-description"
					<?php checked( isset( $preload_settings['lcp_fetchpriority'] ) && $preload_settings['lcp_fetchpriority'] ); ?>
				/>
				<span class="sui-toggle-slider" aria-hidden="true"></span>
				<span id="lcp-fetchpriority-label" class="sui-toggle-label">
					<?php esc_html_e( 'Enable Fetchpriority', 'wp-smushit' ); ?>
				</span>
			</label>
		</div>
	</div>
</div>