<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use WP_PowerSuite\Core\OptionStoreModuleSettingsRepository;

if ( ! function_exists( 'wp_powersuite_is_license_valid' ) || ! wp_powersuite_is_license_valid() ) {
	$license_page_url = admin_url( 'admin.php?page=powersuite-license' );
	?>
	<div class="wp-powersuite-module-settings wpps-settings-panel" data-module-id="<?php echo esc_attr( $module_id ?? 'password-protection' ); ?>">
		<div class="notice notice-warning inline" style="margin:0;">
			<p>
				<?php esc_html_e( 'Password Protection requires an active license. Activate your license to configure site access.', 'wp-powersuite' ); ?>
				<a href="<?php echo esc_url( $license_page_url ); ?>"><?php esc_html_e( 'Activate license', 'wp-powersuite' ); ?></a>
			</p>
		</div>
	</div>
	<?php
	return;
}

$settings     = OptionStoreModuleSettingsRepository::forModule( $module_id )->all( [] );
if ( ! is_array( $settings ) ) {
	$settings = [];
}

$site_password_display = '';
if ( ! empty( $settings['site_password_hash'] ) || ! empty( $settings['site_password'] ) ) {
	$site_password_display = '••••••••••••';
}
$form_title = $settings['form_title'] ?? '';
$form_message = $settings['form_message'] ?? '';
$button_text = $settings['button_text'] ?? '';
$logo_url = $settings['logo_url'] ?? '';
$logo_width = $settings['logo_width'] ?? '200';
$background_image = $settings['background_image'] ?? '';
$overlay_color = $settings['overlay_color'] ?? '#000000';
$overlay_opacity = $settings['overlay_opacity'] ?? '0.5';
$background_color = $settings['background_color'] ?? '#f5f5f5';
$form_bg_color = $settings['form_bg_color'] ?? '#ffffff';
$button_color = $settings['button_color'] ?? '#2271b1';
$button_hover_color = $settings['button_hover_color'] ?? '#135e96';

?>
<div class="wp-powersuite-module-settings" data-module-id="<?php echo esc_attr( $module_id ); ?>">
	<div class="wpps-pwd-prot-modal-header">
		<h3><?php esc_html_e( 'Password Protection Settings', 'wp-powersuite' ); ?></h3>
		<div class="wpps-pwd-prot-modal-header__actions">
			<span id="<?php echo esc_attr( $module_id ); ?>_clear_lockouts_msg" class="description" aria-live="polite"></span>
			<button
				type="button"
				class="button button-secondary"
				id="<?php echo esc_attr( $module_id ); ?>_clear_lockouts"
				title="<?php esc_attr_e( 'Remove temporary lockouts from failed password attempts on the public form.', 'wp-powersuite' ); ?>"
			><?php esc_html_e( 'Clear lockouts', 'wp-powersuite' ); ?></button>
		</div>
	</div>
	<script type="text/javascript">
	(function() {
		var btn = document.getElementById('<?php echo esc_js( $module_id ); ?>_clear_lockouts');
		var msg = document.getElementById('<?php echo esc_js( $module_id ); ?>_clear_lockouts_msg');
		if (!btn || !window.wpPowerSuite) return;
		btn.addEventListener('click', function() {
			btn.disabled = true;
			if (msg) msg.textContent = '';
			var fd = new FormData();
			fd.append('action', 'wp_powersuite_clear_password_gate_lockouts');
			fd.append('nonce', window.wpPowerSuite.nonce);
			fetch(window.wpPowerSuite.ajaxUrl, { method: 'POST', body: fd, credentials: 'same-origin' })
				.then(function(r) { return r.json(); })
				.then(function(data) {
					if (msg) {
						msg.textContent = (data.success && data.data && data.data.message)
							? data.data.message
							: ((data.data && data.data.message) || '<?php echo esc_js( __( 'Request failed.', 'wp-powersuite' ) ); ?>');
					}
				})
				.catch(function() {
					if (msg) msg.textContent = '<?php echo esc_js( __( 'Request failed.', 'wp-powersuite' ) ); ?>';
				})
				.finally(function() { btn.disabled = false; });
		});
	})();
	</script>
	<p class="description">
		<?php esc_html_e( 'Protect your entire site with a password. Perfect for staging sites, work-in-progress sites, or temporary private access.', 'wp-powersuite' ); ?>
	</p>

	<form class="wp-powersuite-module-settings-form" data-module-id="<?php echo esc_attr( $module_id ); ?>">
		<?php wp_nonce_field( 'wp_powersuite_save_module_settings_' . $module_id, 'wp_powersuite_nonce' ); ?>


	<table class="form-table" role="presentation">
		<tbody>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_site_password">
						<?php esc_html_e( 'Site Password', 'wp-powersuite' ); ?>
					</label>
					<?php
					wpps_render_modal_settings_tip(
						__( 'Help: site password', 'wp-powersuite' ),
						__( 'Stored as a hash; leave mask unchanged to keep the current secret. Administrators always bypass the gate.', 'wp-powersuite' )
					);
					?>
				</th>
				<td>
					<div style="position: relative; display: inline-block; width: 100%; max-width: 400px;">
						<input
							type="password"
							id="<?php echo esc_attr( $module_id ); ?>_site_password"
							name="<?php echo esc_attr( $module_id ); ?>[site_password]"
							value="<?php echo esc_attr( $site_password_display ); ?>"
							class="regular-text wp-powersuite-advanced-setting"
							data-setting-key="site_password"
							placeholder="<?php esc_attr_e( 'Enter password to protect site', 'wp-powersuite' ); ?>"
							style="padding-right: 35px;"
						/>
						<button type="button" class="wpps-admin-password-toggle" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px; color: #646970;" aria-label="<?php esc_attr_e( 'Show password', 'wp-powersuite' ); ?>">
							<span class="dashicons dashicons-visibility" style="font-size: 20px; width: 20px; height: 20px;"></span>
						</button>
					</div>
					<p class="description">
						<?php esc_html_e( 'Enter a password to protect your site. Leave empty to disable protection. The password is stored as a secure hash.', 'wp-powersuite' ); ?>
					</p>
					<script type="text/javascript">
					(function() {
						var toggle = document.querySelector('.wpps-admin-password-toggle');
						var passwordInput = document.getElementById('<?php echo esc_js( $module_id ); ?>_site_password');
						if (!toggle || !passwordInput) return;

						toggle.addEventListener('click', function() {
							if (passwordInput.type === 'password') {
								passwordInput.type = 'text';
								toggle.querySelector('.dashicons').classList.remove('dashicons-visibility');
								toggle.querySelector('.dashicons').classList.add('dashicons-hidden');
								toggle.setAttribute('aria-label', '<?php echo esc_js( __( 'Hide password', 'wp-powersuite' ) ); ?>');
							} else {
								passwordInput.type = 'password';
								toggle.querySelector('.dashicons').classList.remove('dashicons-hidden');
								toggle.querySelector('.dashicons').classList.add('dashicons-visibility');
								toggle.setAttribute('aria-label', '<?php echo esc_js( __( 'Show password', 'wp-powersuite' ) ); ?>');
							}
						});
					})();
					</script>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_form_title">
						<?php esc_html_e( 'Form Title', 'wp-powersuite' ); ?>
					</label>
					<?php
					wpps_render_modal_settings_tip(
						__( 'Help: form title', 'wp-powersuite' ),
						__( 'Heading shown on the public gate form; empty uses the default.', 'wp-powersuite' )
					);
					?>
				</th>
				<td>
					<input
						type="text"
						id="<?php echo esc_attr( $module_id ); ?>_form_title"
						name="<?php echo esc_attr( $module_id ); ?>[form_title]"
						value="<?php echo esc_attr( $form_title ); ?>"
						class="regular-text wp-powersuite-advanced-setting"
						data-setting-key="form_title"
						placeholder="<?php esc_attr_e( 'Password Protected', 'wp-powersuite' ); ?>"
					/>
					<p class="description">
						<?php esc_html_e( 'Custom title shown on the password form. Leave empty for default.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_form_message">
						<?php esc_html_e( 'Form Message', 'wp-powersuite' ); ?>
					</label>
					<?php
					wpps_render_modal_settings_tip(
						__( 'Help: form message', 'wp-powersuite' ),
						__( 'Introductory text under the title on the gate screen.', 'wp-powersuite' )
					);
					?>
				</th>
				<td>
					<textarea
						id="<?php echo esc_attr( $module_id ); ?>_form_message"
						name="<?php echo esc_attr( $module_id ); ?>[form_message]"
						class="large-text wp-powersuite-advanced-setting"
						data-setting-key="form_message"
						rows="3"
						placeholder="<?php esc_attr_e( 'This site is password protected. Please enter the password to continue.', 'wp-powersuite' ); ?>"
					><?php echo esc_textarea( $form_message ); ?></textarea>
					<p class="description">
						<?php esc_html_e( 'Custom message shown on the password form. Leave empty for default.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_button_text">
						<?php esc_html_e( 'Button Text', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<input
						type="text"
						id="<?php echo esc_attr( $module_id ); ?>_button_text"
						name="<?php echo esc_attr( $module_id ); ?>[button_text]"
						value="<?php echo esc_attr( $button_text ); ?>"
						class="regular-text wp-powersuite-advanced-setting"
						data-setting-key="button_text"
						placeholder="<?php esc_attr_e( 'Submit', 'wp-powersuite' ); ?>"
					/>
					<p class="description">
						<?php esc_html_e( 'Custom text for the submit button. Leave empty for default.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_logo_url">
						<?php esc_html_e( 'Logo', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<div id="<?php echo esc_attr( $module_id ); ?>_logo_preview" style="margin-bottom: 10px;">
						<?php if ( ! empty( $logo_url ) ) : ?>
							<img src="<?php echo esc_url( $logo_url ); ?>" alt="Logo Preview" style="max-width: 80px; height: auto; border: 1px solid #ddd; padding: 5px; background: #fff; display: block;" />
							<button type="button" class="button-link" id="<?php echo esc_attr( $module_id ); ?>_remove_logo" style="margin-top: 5px; display: inline-block;"><?php esc_html_e( 'Remove', 'wp-powersuite' ); ?></button>
						<?php endif; ?>
					</div>
					<input
						type="url"
						id="<?php echo esc_attr( $module_id ); ?>_logo_url"
						name="<?php echo esc_attr( $module_id ); ?>[logo_url]"
						value="<?php echo esc_url( $logo_url ); ?>"
						class="regular-text wp-powersuite-advanced-setting"
						data-setting-key="logo_url"
						placeholder="https://example.com/logo.png"
					/>
					<button type="button" class="button" id="<?php echo esc_attr( $module_id ); ?>_upload_logo">
						<?php esc_html_e( 'Select Logo', 'wp-powersuite' ); ?>
					</button>
					<p class="description">
						<?php esc_html_e( 'Upload or enter URL of a logo to display above the password form.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_logo_width">
						<?php esc_html_e( 'Logo Width', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<input
						type="number"
						id="<?php echo esc_attr( $module_id ); ?>_logo_width"
						name="<?php echo esc_attr( $module_id ); ?>[logo_width]"
						value="<?php echo esc_attr( $logo_width ); ?>"
						class="small-text wp-powersuite-advanced-setting"
						data-setting-key="logo_width"
						min="50"
						max="500"
						step="10"
					/>
					<span class="description"><?php esc_html_e( 'px', 'wp-powersuite' ); ?></span>
					<p class="description">
						<?php esc_html_e( 'Width of the logo in pixels. Default is 200px.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_background_image">
						<?php esc_html_e( 'Background Image', 'wp-powersuite' ); ?>
					</label>
					<?php
					wpps_render_modal_settings_tip(
						__( 'Help: background image', 'wp-powersuite' ),
						__( 'Full-screen backdrop for the gate; when set, overlay color/opacity apply on top.', 'wp-powersuite' )
					);
					?>
				</th>
				<td>
					<input
						type="url"
						id="<?php echo esc_attr( $module_id ); ?>_background_image"
						name="<?php echo esc_attr( $module_id ); ?>[background_image]"
						value="<?php echo esc_url( $background_image ); ?>"
						class="regular-text wp-powersuite-advanced-setting"
						data-setting-key="background_image"
						placeholder="https://example.com/background.jpg"
					/>
					<button type="button" class="button" id="<?php echo esc_attr( $module_id ); ?>_upload_background">
						<?php esc_html_e( 'Select Image', 'wp-powersuite' ); ?>
					</button>
					<p class="description">
						<?php esc_html_e( 'Upload or enter URL of a background image for the password form page. When using background image, background color will be overridden.', 'wp-powersuite' ); ?>
					</p>
					<?php if ( ! empty( $background_image ) ) : ?>
						<div style="margin-top: 10px;">
							<img src="<?php echo esc_url( $background_image ); ?>" alt="Background Preview" style="max-width: 300px; height: auto; border: 1px solid #ddd; padding: 5px; background: #fff;" />
							<button type="button" class="button-link" id="<?php echo esc_attr( $module_id ); ?>_remove_background" style="margin-left: 10px;"><?php esc_html_e( 'Remove', 'wp-powersuite' ); ?></button>
						</div>
					<?php endif; ?>
				</td>
			</tr>
			<tr class="wpps-overlay-options" style="<?php echo empty( $background_image ) ? 'display: none;' : ''; ?>">
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_overlay_color">
						<?php esc_html_e( 'Overlay Color', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<input
						type="color"
						id="<?php echo esc_attr( $module_id ); ?>_overlay_color"
						name="<?php echo esc_attr( $module_id ); ?>[overlay_color]"
						value="<?php echo esc_attr( $overlay_color ); ?>"
						class="wp-powersuite-advanced-setting wpps-color-picker-circle"
						data-setting-key="overlay_color"
					/>
					<div style="display: inline-block; position: relative; margin-left: 10px;">
						<input
							type="text"
							class="wpps-color-code-input regular-text wp-powersuite-advanced-setting"
							data-setting-key="overlay_color"
							data-color-input="<?php echo esc_attr( $module_id ); ?>_overlay_color"
							data-default-color="#000000"
							value="<?php echo esc_attr( $overlay_color ); ?>"
							style="width: 100px; padding-right: 25px;"
							placeholder="#000000"
							maxlength="7"
						/>
						<button type="button" class="wpps-color-reset button-link" data-default-color="#000000" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: #646970;" title="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>">
							<span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span>
						</button>
					</div>
					<p class="description">
						<?php esc_html_e( 'Color of the overlay that appears on top of the background image.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr class="wpps-overlay-options" style="<?php echo empty( $background_image ) ? 'display: none;' : ''; ?>">
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_overlay_opacity">
						<?php esc_html_e( 'Overlay Opacity', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<input
						type="range"
						id="<?php echo esc_attr( $module_id ); ?>_overlay_opacity"
						name="<?php echo esc_attr( $module_id ); ?>[overlay_opacity]"
						value="<?php echo esc_attr( $overlay_opacity ); ?>"
						class="wp-powersuite-advanced-setting"
						data-setting-key="overlay_opacity"
						min="0"
						max="1"
						step="0.1"
						style="width: 200px;"
					/>
					<span id="<?php echo esc_attr( $module_id ); ?>_overlay_opacity_display" style="margin-left: 10px; color: #646970;"><?php echo esc_html( floatval( $overlay_opacity ) * 100 ); ?>%</span>
					<p class="description">
						<?php esc_html_e( 'Opacity of the overlay (0 = transparent, 1 = opaque).', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_background_color">
						<?php esc_html_e( 'Background Color', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<input
						type="color"
						id="<?php echo esc_attr( $module_id ); ?>_background_color"
						name="<?php echo esc_attr( $module_id ); ?>[background_color]"
						value="<?php echo esc_attr( $background_color ); ?>"
						class="wp-powersuite-advanced-setting wpps-color-picker-circle"
						data-setting-key="background_color"
					/>
					<div style="display: inline-block; position: relative; margin-left: 10px;">
						<input
							type="text"
							class="wpps-color-code-input regular-text wp-powersuite-advanced-setting"
							data-setting-key="background_color"
							data-color-input="<?php echo esc_attr( $module_id ); ?>_background_color"
							data-default-color="#f5f5f5"
							value="<?php echo esc_attr( $background_color ); ?>"
							style="width: 100px; padding-right: 25px;"
							placeholder="#f5f5f5"
							maxlength="7"
						/>
						<button type="button" class="wpps-color-reset button-link" data-default-color="#f5f5f5" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: #646970;" title="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>">
							<span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span>
						</button>
					</div>
					<p class="description">
						<?php esc_html_e( 'Background color of the password form page.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_form_bg_color">
						<?php esc_html_e( 'Form Container Color', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<input
						type="color"
						id="<?php echo esc_attr( $module_id ); ?>_form_bg_color"
						name="<?php echo esc_attr( $module_id ); ?>[form_bg_color]"
						value="<?php echo esc_attr( $form_bg_color ); ?>"
						class="wp-powersuite-advanced-setting wpps-color-picker-circle"
						data-setting-key="form_bg_color"
					/>
					<div style="display: inline-block; position: relative; margin-left: 10px;">
						<input
							type="text"
							class="wpps-color-code-input regular-text wp-powersuite-advanced-setting"
							data-setting-key="form_bg_color"
							data-color-input="<?php echo esc_attr( $module_id ); ?>_form_bg_color"
							data-default-color="#ffffff"
							value="<?php echo esc_attr( $form_bg_color ); ?>"
							style="width: 100px; padding-right: 25px;"
							placeholder="#ffffff"
							maxlength="7"
						/>
						<button type="button" class="wpps-color-reset button-link" data-default-color="#ffffff" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: #646970;" title="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>">
							<span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span>
						</button>
					</div>
					<p class="description">
						<?php esc_html_e( 'Background color of the password form container box.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_button_color">
						<?php esc_html_e( 'Button Color', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<input
						type="color"
						id="<?php echo esc_attr( $module_id ); ?>_button_color"
						name="<?php echo esc_attr( $module_id ); ?>[button_color]"
						value="<?php echo esc_attr( $button_color ); ?>"
						class="wp-powersuite-advanced-setting wpps-color-picker-circle"
						data-setting-key="button_color"
					/>
					<div style="display: inline-block; position: relative; margin-left: 10px;">
						<input
							type="text"
							class="wpps-color-code-input regular-text wp-powersuite-advanced-setting"
							data-setting-key="button_color"
							data-color-input="<?php echo esc_attr( $module_id ); ?>_button_color"
							data-default-color="#2271b1"
							value="<?php echo esc_attr( $button_color ); ?>"
							style="width: 100px; padding-right: 25px;"
							placeholder="#2271b1"
							maxlength="7"
						/>
						<button type="button" class="wpps-color-reset button-link" data-default-color="#2271b1" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: #646970;" title="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>">
							<span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span>
						</button>
					</div>
					<p class="description">
						<?php esc_html_e( 'Background color of the submit button.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
			<tr>
				<th scope="row">
					<label for="<?php echo esc_attr( $module_id ); ?>_button_hover_color">
						<?php esc_html_e( 'Button Hover Color', 'wp-powersuite' ); ?>
					</label>
				</th>
				<td>
					<input
						type="color"
						id="<?php echo esc_attr( $module_id ); ?>_button_hover_color"
						name="<?php echo esc_attr( $module_id ); ?>[button_hover_color]"
						value="<?php echo esc_attr( $button_hover_color ); ?>"
						class="wp-powersuite-advanced-setting wpps-color-picker-circle"
						data-setting-key="button_hover_color"
					/>
					<div style="display: inline-block; position: relative; margin-left: 10px;">
						<input
							type="text"
							class="wpps-color-code-input regular-text wp-powersuite-advanced-setting"
							data-setting-key="button_hover_color"
							data-color-input="<?php echo esc_attr( $module_id ); ?>_button_hover_color"
							data-default-color="#135e96"
							value="<?php echo esc_attr( $button_hover_color ); ?>"
							style="width: 100px; padding-right: 25px;"
							placeholder="#135e96"
							maxlength="7"
						/>
						<button type="button" class="wpps-color-reset button-link" data-default-color="#135e96" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: #646970;" title="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>">
							<span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span>
						</button>
					</div>
					<p class="description">
						<?php esc_html_e( 'Background color of the submit button on hover.', 'wp-powersuite' ); ?>
					</p>
				</td>
			</tr>
		</tbody>
	</table>

	<div class="wp-powersuite-info-box" style="background: #f0f6fc; border-left: 4px solid #2271b1; padding: 12px; margin: 20px 0;">
		<p style="margin: 0;">
			<strong><?php esc_html_e( 'How it works', 'wp-powersuite' ); ?></strong>
		</p>
		<ul style="margin: 8px 0 0 18px; padding: 0;">
			<li><?php esc_html_e( 'Only the public site is gated—wp-admin and wp-login.php always work so you can sign in. Logged-in users can use admin-ajax.php; anonymous AJAX is blocked until unlocked.', 'wp-powersuite' ); ?></li>
			<li><?php esc_html_e( 'Visitors without the site-password cookie see the gate on front-end pages; anonymous REST API and XML-RPC access are blocked until unlocked.', 'wp-powersuite' ); ?></li>
			<li><?php esc_html_e( 'After a correct password, access lasts for the browser session (tab closed = password required again).', 'wp-powersuite' ); ?></li>
			<li><?php esc_html_e( 'Logged-in administrators bypass the gate; all other visitors need the site password on the front end.', 'wp-powersuite' ); ?></li>
		</ul>
	</div>

	<div class="wp-powersuite-info-box" style="background: #fcf0f1; border-left: 4px solid #d63638; padding: 12px; margin: 20px 0;">
		<p style="margin: 0;">
			<strong><?php esc_html_e( 'Important limitations', 'wp-powersuite' ); ?></strong>
		</p>
		<ul style="margin: 8px 0 0 18px; padding: 0;">
			<li><?php esc_html_e( 'This gate protects WordPress front-end routes only. Direct media URLs (for example /wp-content/uploads/) are not blocked by PHP and may still be reachable if someone has the link.', 'wp-powersuite' ); ?></li>
			<li><?php esc_html_e( 'If you use a page cache or CDN, exclude gated pages from cache or vary cache by the wpps_pwd_access cookie so unlocked content is not served to everyone.', 'wp-powersuite' ); ?></li>
			<li><?php esc_html_e( 'The gate page is marked noindex for search engines, but sitemap URLs may still appear until the site is public.', 'wp-powersuite' ); ?></li>
		</ul>
	</div>
</form>
</div>

<style type="text/css">
.wpps-pwd-prot-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	flex-wrap: wrap;
	margin: 0 0 8px;
}
.wpps-pwd-prot-modal-header h3 {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.wpps-pwd-prot-modal-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
	max-width: 100%;
}
.wpps-pwd-prot-modal-header__actions .description {
	margin: 0;
	max-width: min(240px, 40vw);
	text-align: right;
	font-size: 12px;
	line-height: 1.35;
}
/* Color picker circle styling - hide default rectangle and make fully colored circle */
.wpps-color-picker-circle {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: 2px solid #ddd !important;
	padding: 0 !important;
	cursor: pointer;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	overflow: hidden;
	vertical-align: middle;
}

.wpps-color-picker-circle::-webkit-color-swatch-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
}

.wpps-color-picker-circle::-webkit-color-swatch {
	border: none !important;
	border-radius: 50% !important;
	width: 100% !important;
	height: 100% !important;
}

.wpps-color-picker-circle::-moz-color-swatch {
	border: none !important;
	border-radius: 50% !important;
	width: 100% !important;
	height: 100% !important;
}
</style>

<script type="text/javascript">
(function() {
	var logoFileFrame, backgroundFileFrame;
	var moduleId = '<?php echo esc_js( $module_id ); ?>';
	
	function initMediaUploaders() {
		if (typeof jQuery === 'undefined' || typeof wp === 'undefined' || typeof wp.media === 'undefined') {
			setTimeout(initMediaUploaders, 100);
			return;
		}
		
		var $ = jQuery;
		
		// Logo uploader
		$(document).off('click', '#' + moduleId + '_upload_logo').on('click', '#' + moduleId + '_upload_logo', function(e) {
			e.preventDefault();
			
			if (logoFileFrame) {
				logoFileFrame.open();
				return false;
			}
			
			logoFileFrame = wp.media({
				title: '<?php esc_html_e( 'Select Logo', 'wp-powersuite' ); ?>',
				button: { text: '<?php esc_html_e( 'Use this logo', 'wp-powersuite' ); ?>' },
				library: { type: 'image' },
				multiple: false
			});
			
			logoFileFrame.on('select', function() {
				var attachment = logoFileFrame.state().get('selection').first().toJSON();
				$('#' + moduleId + '_logo_url').val(attachment.url).trigger('change');
				
				var preview = $('#' + moduleId + '_logo_preview');
				if (preview.find('img').length) {
					preview.find('img').attr('src', attachment.url);
				} else {
					preview.html('<img src="' + attachment.url + '" alt="Logo Preview" style="max-width: 80px; height: auto; border: 1px solid #ddd; padding: 5px; background: #fff; display: block;" /><button type="button" class="button-link" id="' + moduleId + '_remove_logo" style="margin-top: 5px; display: inline-block;"><?php esc_html_e( 'Remove', 'wp-powersuite' ); ?></button>');
				}
			});
			
			logoFileFrame.open();
			return false;
		});
		
		$(document).off('click', '#' + moduleId + '_remove_logo').on('click', '#' + moduleId + '_remove_logo', function(e) {
			e.preventDefault();
			$('#' + moduleId + '_logo_url').val('').trigger('change');
			$('#' + moduleId + '_logo_preview').html('');
		});
		
		// Background image uploader
		$(document).off('click', '#' + moduleId + '_upload_background').on('click', '#' + moduleId + '_upload_background', function(e) {
			e.preventDefault();
			
			if (backgroundFileFrame) {
				backgroundFileFrame.open();
				return false;
			}
			
			backgroundFileFrame = wp.media({
				title: '<?php esc_html_e( 'Select Background Image', 'wp-powersuite' ); ?>',
				button: { text: '<?php esc_html_e( 'Use this image', 'wp-powersuite' ); ?>' },
				library: { type: 'image' },
				multiple: false
			});
			
			backgroundFileFrame.on('select', function() {
				var attachment = backgroundFileFrame.state().get('selection').first().toJSON();
				$('#' + moduleId + '_background_image').val(attachment.url).trigger('change');
				
				var container = $('#' + moduleId + '_background_image').closest('td');
				if (container.find('div > img').length) {
					container.find('div > img').attr('src', attachment.url);
				} else {
					container.find('.description').after('<div style="margin-top: 10px;"><img src="' + attachment.url + '" alt="Background Preview" style="max-width: 300px; height: auto; border: 1px solid #ddd; padding: 5px; background: #fff;" /><button type="button" class="button-link" id="' + moduleId + '_remove_background" style="margin-left: 10px;"><?php esc_html_e( 'Remove', 'wp-powersuite' ); ?></button></div>');
				}
				
				$('.wpps-overlay-options').show();
			});
			
			backgroundFileFrame.open();
			return false;
		});
		
		$(document).off('click', '#' + moduleId + '_remove_background').on('click', '#' + moduleId + '_remove_background', function(e) {
			e.preventDefault();
			$('#' + moduleId + '_background_image').val('').trigger('change');
			$(this).closest('div').remove();
			$('.wpps-overlay-options').hide();
		});
		
		$('#' + moduleId + '_background_image').on('change', function() {
			if ($(this).val()) {
				$('.wpps-overlay-options').show();
			} else {
				$('.wpps-overlay-options').hide();
			}
		});
		
		$('#' + moduleId + '_overlay_opacity').on('input', function() {
			$('#' + moduleId + '_overlay_opacity_display').text(Math.round($(this).val() * 100) + '%');
		});
		
		$(document).on('input change', '.wpps-color-code-input', function() {
			var $textInput = $(this);
			var colorInputId = $textInput.data('color-input');
			var $colorInput = $('#' + colorInputId);
			var colorValue = $textInput.val().trim();
			
			if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(colorValue)) {
				$colorInput.val(colorValue);
				$textInput.css('border-color', '');
			} else if (colorValue === '') {
				$colorInput.val('');
				$textInput.css('border-color', '');
			} else {
				$textInput.css('border-color', '#d63638');
			}
		});
		
		$(document).on('input change', '.wpps-color-picker-circle', function() {
			var $colorInput = $(this);
			var colorInputId = $colorInput.attr('id');
			var $textInput = $('.wpps-color-code-input[data-color-input="' + colorInputId + '"]');
			if ($textInput.length) {
				$textInput.val($colorInput.val());
				$textInput.css('border-color', '');
			}
		});
		
		$(document).on('click', '.wpps-color-reset', function(e) {
			e.preventDefault();
			var $resetButton = $(this);
			var defaultColor = $resetButton.data('default-color');
			var $textInput = $resetButton.prev('.wpps-color-code-input');
			var colorInputId = $textInput.data('color-input');
			var $colorInput = $('#' + colorInputId);
			
			$textInput.val(defaultColor);
			$colorInput.val(defaultColor);
			$textInput.css('border-color', '');
			$textInput.trigger('change');
		});
	}
	
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', initMediaUploaders);
	} else {
		initMediaUploaders();
	}
	
	if (typeof jQuery !== 'undefined') {
		jQuery(document).on('wp-powersuite-modal-loaded', function() {
			logoFileFrame = null;
			backgroundFileFrame = null;
			setTimeout(initMediaUploaders, 100);
		});
	}
})();
</script>
