<div class="ttd-performance-image ttd-performance-page">
	<h1 class="ttd-page-title"><?php echo esc_html__( 'Image Optimization', THEME_DOMAIN ); ?></h1>

	<div class="ttd-performance-card info ttd-d-flex">
		<#= TTD.utils.icon( 'performance-image' ) #>
		<div class="ttd-performance-text ml-40">
			<p class="m-0"><?php echo esc_html__( 'Large and inefficient images can slow down loading times significantly.', THEME_DOMAIN ); ?></p>
			<p class="mt-25 mb-0"><?php echo esc_html__( 'Here are a list of recommendations, settings and integrations to ensure all images are saved and served optimally', THEME_DOMAIN ); ?></p>
		</div>
	</div>

	<p class="pfs-15 mt-80">
		<?php echo esc_html__( 'Compress and serve your images across a delivery network at exactly the right dimensions (adaptive images).', THEME_DOMAIN ); ?>
		<br>
		<?php echo esc_html__( 'This ensures image files are small and loaded quickly.', THEME_DOMAIN ); ?>
	</p>

	<# if ( ! this.hasPlugins() ) { #>
	<p class="mt-40 mb-10 pfs-15 ttd-normal"><?php echo esc_html__( "Choose a solution  that's right for you.", THEME_DOMAIN ); ?></p>

	<div class="action-group">
		<button class="ttd-perf-action click<#=this.state === 'optimole' ? ' selected' : '' #>" data-fn="optionClick" data-opt="optimole"><?php echo esc_html__( 'Fully Automated', THEME_DOMAIN ); ?></button>
		<button class="ttd-perf-action click<#=this.state === 'smush' ? ' selected' : '' #>" data-fn="optionClick" data-opt="smush"><?php echo esc_html__( 'No Cost', THEME_DOMAIN ); ?></button>
	</div>
	<div class="action-option" id="opt--optimole"<#=this.state === 'optimole' ? ' style="display: block"' : '' #>>
		<div class="ttd-performance-card no-top-left-corner">
			<p class="ttd-bold mt-15 mb-0"><?php echo esc_html__( 'Fully Automated Image Optimization', THEME_DOMAIN ); ?></p>
			<p class="mt-20 pfs-15 mb-15">
				<?php echo esc_html__( 'Thrive Themes has a full integration with Optimole. Optimole handles image compression, displays images at exactly the right dimensions and includes a CDN for fast loading times.', THEME_DOMAIN ); ?>
				<br><strong><?php echo esc_html__( 'The service is also free up to 5,000 hits per month.', THEME_DOMAIN ); ?></strong>
			</p>
		</div>
		<#= this.renderPluginCard( 'optimole', {recommended: true} ) #>
	</div>
	<div class="action-option" id="opt--smush"<#=this.state === 'smush' ? ' style="display: block"' : '' #>>
		<div class="ttd-performance-card no-top-left-corner">
			<p class="ttd-bold mt-15 mb-0"><?php echo esc_html__( 'Full Image Optimization', THEME_DOMAIN ); ?></p>
			<p class="mt-20 pfs-15 mb-15"><?php echo esc_html__( "Smush allows you to compress an unlimited number of images on their free plan (good for beginners and those on a budget). You'll need to upgrade to their pro plan for adaptive images and CDN support.", THEME_DOMAIN ); ?></p>
		</div>
		<#= this.renderPluginCard( 'smush', {}) #>
	</div>
	<# } else if ( this.plugins.smush.active ) { #>
	<p class="ttd-normal"><?php echo esc_html__( 'Image Optimization Activated', THEME_DOMAIN ); ?></p>
	<#= this.renderPluginCard( 'smush' ) #>
	<# } else if ( this.plugins.optimole.active ) { #>
	<p class="ttd-normal"><?php echo esc_html__( 'Fully Automated Image Optimization Activated', THEME_DOMAIN ); ?></p>
	<#= this.renderPluginCard( 'optimole' ) #>
	<# } #>
</div>


