<?php
namespace GPLSCorePro\GPLS_PLUGIN_WMFW;

defined( 'ABSPATH' ) || exit();

?>
<div class="col-md-12 watermark-template-auto-apply-wrapper <?php echo esc_attr( $plugin_info['classes_prefix'] . '-disabled' ); ?>">
	<h1 class="display-4 border shadow-sm mt-3 p-4 d-flex align-items-center"><?php esc_html_e( 'Auto resize watermarks in ( auto / bulk ) watermarking', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?>
		<span class="<?php echo esc_attr( $plugin_info['classes_prefix'] . '-new-keyword' ); ?> ms-2" style="padding: 5px 10px;border-radius: 5px;background: #e17b7b;color: #FFF;"><?php esc_html_e( 'New', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></span><?php $core->pro_btn(); ?>
	</h1>
	<h6 class="mt-3"><?php esc_html_e( 'Image watermarks size and text watermarks fontsize will be resized proportionally with the image size', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></h6>
	<!-- Auto Apply Options -->
	<div class="auto-apply-options my-5">
		<!-- Width Reference -->
		<div class="row my-3">
			<div class="col-3 mb-2 d-flex align-items-center">
				<label class="me-1 fw-bold" for="auto-resize-img-width-ref"><?php esc_html_e( 'Reference width ', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></label>
			</div>
			<div class="col-9 mb-2">
				<div class="input-wrapper">
					<input type="number" disabled id="auto-resize-img-ref" class="auto-resize-img-ref"  value="1000" >
					<span class="ms-1">px</span>
				</div>
				<span class="muted d-block my-1"><?php esc_html_e( 'This is the reference width to use watermarks at without resizing.', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></span>
			</div>
		</div>
		<!-- Auto resize Image watermark -->
		<div class="row my-3">
			<div class="col-3 mb-2 d-flex align-items-center">
				<label class="me-1 fw-bold" for="auto-resize-img-width-ref"><?php esc_html_e( 'Image watermark resize percentage', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></label>
			</div>
			<div class="col-9 mb-2">
				<div class="apply-type step-3">
					<!-- Image Percentage -->
					<div class="apply-type-select apply-type-select-new my-4">
						<label for="auto-resize-watermark-type-percentage">
							<input disabled data-bs-target="#auto-resize-watermark-type-percentage-field" data-bs-toggle="collapse" type="checkbox" name="auto-resize-watermark-type" class="auto-resize-watermark-type" id="auto-resize-watermark-type-percentage" value="percentage" >
							<strong><?php esc_html_e( 'Image width percentage', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></strong>
						</label>
						<small class="d-block mt-2 subtitle"><?php esc_html_e( 'The image watermarks dimensions will be equal to the percentage of the image width.', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></small>

						<div class="auto-resize-watermark-type-percentage-field-wrapper subtitle m-3" id="auto-resize-watermark-type-percentage-field" >
							<div class="p-3">
								<input value="30" disabled type="number" name="auto-resize-watermark-type-percentage-value" class="auto-resize-watermark-type-percentage-value" ><span class="ms-1">%</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Scale Offsets -->
		<div class="row my-3">
			<div class="col-3 mb-2 d-flex align-items-center">
				<label class="me-1 fw-bold" for="auto-resize-img-width-ref"><?php esc_html_e( 'Auto scale offsets', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></label>
			</div>
			<div class="col-9 mb-2">
				<div class="input-wrapper">
					<input disabled type="checkbox" id="auto-resize-scale-offset" class="auto-resize-scale-offset" name="auto-resize-scale-offset" >
					<span class="muted ms-1 my-1"><?php esc_html_e( 'Auto scale repeat axis offset.', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></span>
					<span class="muted ms-1 my-1 d-block"><?php esc_html_e( 'The repeat offset values in x and y will be scaled up/down depending on the image width relative to the reference width.', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></span>
				</div>
			</div>
		</div>
		<!-- Context Select -->
		<div class="row my-3">
			<div class="col-3 mb-2 d-flex align-items-center">
				<label class="me-1 fw-bold" for="auto-resize-img-width-ref"><?php esc_html_e( 'Auto resize context', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></label>
			</div>
			<div class="col-9 mb-2">
				<div class="form-check my-1 ps-0">
					<input type="checkbox" disabled checked="checked" id="auto-resize-context" class="m-0 auto-resize-context me-2" value="auto" >
					<label for="auto-apply-context"><?php esc_html_e( 'Auto watermarking', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></label>
				</div>
				<div class="form-check my-1 ps-0">
					<input type="checkbox" disabled checked="checked" id="auto-resize-context" class="m-0 auto-resize-context me-2" value="bulk" >
					<label for="auto-apply-context"><?php esc_html_e( 'Bulk watermarking', 'watermark-images-for-wp-and-woo-grandpluginswp' ); ?></label>
				</div>
			</div>
		</div>
	</div>
</div>
