<?php
/**
 * Custom Fields - single field row renderer (used server-side and as JS template).
 *
 * @package CustomFields
 * @since 1.0.0
 */

namespace CustomFields;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( ! function_exists( __NAMESPACE__ . '\\cf_tip' ) ) {
	/**
	 * Render a small help tooltip (shared viewport-aware tooltip pattern).
	 *
	 * @param string $text Help copy.
	 */
	function cf_tip( string $text ): void {
		echo '<span class="wpps-cf-accordion-tooltip" aria-label="' . esc_attr__( 'Help', 'wppowersuite-lite' ) . '">';
		echo '<span class="wpps-cf-accordion-tooltip-trigger">?</span>';
		echo '<span class="wpps-cf-accordion-tooltip-panel">' . esc_html( $text ) . '</span>';
		echo '</span>';
	}
}

if ( ! function_exists( __NAMESPACE__ . '\\cf_render_field_row' ) ) {
	/**
	 * Render one field row.
	 *
	 * @param int|string           $index Field index (or '__INDEX__' for the JS template).
	 * @param array<string, mixed> $field Field definition.
	 */
	function cf_render_field_row( int|string $index, array $field, array $post_types = [], array $taxonomies = [], string $group_key = '', array $field_targets = [], array $field_key_opts = [], array $clone_targets = [], array $taxonomy_terms = [] ): void {
		$field = array_merge( Config::defaultField(), $field );

		if ( $post_types === [] ) {
			$excluded      = [
				'attachment', 'wp_block', 'wp_navigation', 'wp_template', 'wp_template_part', 'wp_font_family', 'wp_font_face',
				'elementor_library', 'e-floating-buttons', 'e-landing-page', 'elementor_snippet', 'elementor_font', 'elementor_icons', 'elementor-hf',
				'cartflows_step', 'cartflows_flow', 'sureforms_form',
			];
			$builder_types = class_exists( '\\CptBuilder\\Storage' ) ? ( new \CptBuilder\Storage() )->all() : [];
			foreach ( get_post_types( [ 'show_ui' => true ], 'objects' ) as $pt ) {
				if ( in_array( $pt->name, $excluded, true ) ) {
					continue;
				}
				if ( ! isset( $builder_types[ $pt->name ] ) && ( ! $pt->public || ! $pt->show_in_nav_menus ) ) {
					continue;
				}
				$post_types[ $pt->name ] = (string) ( $pt->labels->singular_name ?? $pt->name );
			}
		}
		if ( $taxonomies === [] ) {
			$tax_excluded  = [ 'post_format', 'nav_menu', 'link_category', 'wp_theme', 'wp_template_part_area' ];
			$builder_taxes = class_exists( '\\CptBuilder\\TaxonomyStorage' ) ? ( new \CptBuilder\TaxonomyStorage() )->all() : [];
			foreach ( get_taxonomies( [ 'show_ui' => true ], 'objects' ) as $tax ) {
				if ( in_array( $tax->name, $tax_excluded, true ) ) {
					continue;
				}
				if ( ! $tax->public && ! isset( $builder_taxes[ $tax->name ] ) ) {
					continue;
				}
				$taxonomies[ $tax->name ] = (string) ( $tax->labels->singular_name ?? $tax->name );
			}
		}
		if ( $taxonomy_terms === [] ) {
			foreach ( array_keys( $taxonomies ) as $taxonomy_key ) {
				$tax_object = get_taxonomy( $taxonomy_key );
				$tax_label  = $tax_object instanceof \WP_Taxonomy && isset( $tax_object->labels->singular_name )
					? (string) $tax_object->labels->singular_name
					: (string) $taxonomy_key;
				$terms = get_terms(
					[
						'taxonomy'   => $taxonomy_key,
						'hide_empty' => false,
						'number'     => 50,
						'orderby'    => 'name',
						'fields'     => 'all',
					]
				);
				if ( ! is_array( $terms ) ) {
					continue;
				}
				foreach ( $terms as $term ) {
					if ( $term instanceof \WP_Term ) {
						$taxonomy_terms[ (string) $term->term_id ] = $tax_label . ': ' . $term->name;
					}
				}
			}
		}
		$user_roles = [];
		foreach ( get_editable_roles() as $role_key => $role ) {
			$user_roles[ (string) $role_key ] = translate_user_role( (string) ( $role['name'] ?? $role_key ) );
		}

		$i                 = (string) $index;
		$name_prefix       = 'fields[' . $i . ']';
		$id_prefix         = 'cf-field-' . preg_replace( '/[^a-z0-9_]/i', '_', $i );
		$type              = (string) $field['type'];
		$label             = (string) $field['label'];
		$is_choice         = in_array( $type, Config::choiceTypes(), true );
		$is_media          = in_array( $type, Config::mediaTypes(), true );
		$is_multiple_type  = in_array( $type, Config::multipleTypes(), true );
		$supports_default  = Config::typeSupports( $type, 'default' );
		$uses_multi_default = $type === 'checkbox' || ( $type === 'select' && ! empty( $field['multiple'] ) );
		$uses_toggle_default = $type === 'toggle';
		$taxonomy_value    = (string) ( $field['taxonomy'] ?? '' );
		$taxonomy_field_type_value = (string) ( $field['taxonomy_field_type'] ?? 'checkbox' );
		if ( $type === 'term' && $taxonomy_value === '' ) {
			$taxonomy_value = 'category';
		}
		$show_allow_null   = Config::typeSupports( $type, 'allow_null' ) && ! ( $type === 'term' && $taxonomy_field_type_value === 'checkbox' );
		$is_message        = $type === 'message';
		$is_output         = $type === 'output';
		$field_post_types  = isset( $field['post_types'] ) && is_array( $field['post_types'] ) ? array_map( 'strval', $field['post_types'] ) : [];
		$field_post_statuses = isset( $field['post_statuses'] ) && is_array( $field['post_statuses'] ) ? array_map( 'strval', $field['post_statuses'] ) : [];
		$field_taxonomy_terms = isset( $field['taxonomy_terms'] ) && is_array( $field['taxonomy_terms'] ) ? array_map( 'strval', $field['taxonomy_terms'] ) : [];
		$field_user_roles  = isset( $field['user_roles'] ) && is_array( $field['user_roles'] ) ? array_map( 'strval', $field['user_roles'] ) : [];
		$label_text        = $label !== '' ? $label : __( 'Untitled field', 'wppowersuite-lite' );
		$field_width       = (string) ( $field['width'] ?? '100' );
		$width_labels      = Config::fieldWidths();
		$field_key         = (string) ( $field['key'] ?? '' );
		if ( $field_key === '' && Config::storesValue( $type ) ) {
			$field_key = (string) ( $field['name'] ?? '' );
			if ( $field_key === '' && $label !== '' ) {
				$field_key = KeyGenerator::generateFieldKey( $label );
			}
			if ( $field_key !== '' ) {
				$field['key'] = $field_key;
			}
		}
		if ( $field_key !== '' && (string) ( $field['name'] ?? '' ) === '' ) {
			$field['name'] = $field_key;
		}
		$field_key_locked  = $field_key !== '';
		$storage_key       = Config::storesValue( $type ) ? MetaKeys::resolve( $group_key, $field ) : '';
		$is_group          = $type === 'group';
		$is_repeater       = $type === 'repeater';
		$is_flexible       = $type === 'flexible_content';
		$is_clone          = $type === 'clone';
		$is_nested         = in_array( $type, Config::nestedTypes(), true );
		$is_display_only   = in_array( $type, Config::displayOnlyTypes(), true );
		$is_public_output  = FieldOutput::fieldIsPubliclyRenderable( [ 'type' => $type ] );
		$is_relational     = in_array( $type, Config::relationalTypes(), true );
		$hide_storage      = $is_display_only;
		$hide_required     = $is_display_only;
		$hide_show_list    = ! $is_public_output;
		$conditional       = isset( $field['conditional'] ) && is_array( $field['conditional'] ) ? $field['conditional'] : Config::defaultField()['conditional'];
		$sub_fields        = isset( $field['sub_fields'] ) && is_array( $field['sub_fields'] ) ? $field['sub_fields'] : [];
		$layouts           = isset( $field['layouts'] ) && is_array( $field['layouts'] ) ? $field['layouts'] : [];
		$allowed_sub_types = NestedFields::allowedSubFieldTypes();
		$image_sizes       = array_unique( array_merge( [ 'thumbnail', 'medium', 'medium_large', 'large', 'full' ], get_intermediate_image_sizes() ) );
		$post_statuses     = Config::relationalPostStatuses();
		$grouped_types     = [];
		foreach ( Config::fieldTypes() as $ft_key => $ft ) {
			$grouped_types[ $ft['group'] ][ $ft_key ] = $ft['label'];
		}
		?>
		<div class="cf-field-row collapsed" data-index="<?php echo esc_attr( $i ); ?>" data-field-type="<?php echo esc_attr( $type ); ?>">
			<div class="cf-field-row__head">
				<span class="cf-field-row__handle dashicons dashicons-menu" aria-hidden="true"></span>
				<button type="button" class="cf-field-row__toggle" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle field', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span></button>
				<span class="cf-field-row__title"><?php echo esc_html( $label_text ); ?></span>
				<span class="cf-field-row__type"><?php echo esc_html( Config::fieldTypes()[ $type ]['label'] ?? $type ); ?></span>
				<?php if ( ! $is_display_only && $field_width !== '100' && isset( $width_labels[ $field_width ] ) ) : ?>
					<span class="cf-field-row__width-badge"><?php echo esc_html( $width_labels[ $field_width ] ); ?></span>
				<?php endif; ?>
				<span class="cf-field-row__actions">
					<button type="button" class="cf-field-row__duplicate" aria-label="<?php esc_attr_e( 'Duplicate field', 'wppowersuite-lite' ); ?>" title="<?php esc_attr_e( 'Duplicate field', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-admin-page" aria-hidden="true"></span></button>
					<button type="button" class="cf-field-row__remove" aria-label="<?php esc_attr_e( 'Remove field', 'wppowersuite-lite' ); ?>" title="<?php esc_attr_e( 'Remove field', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-trash" aria-hidden="true"></span></button>
				</span>
			</div>
			<div class="cf-field-row__body">
				<input type="hidden" class="cf-field-key-input" name="<?php echo esc_attr( $name_prefix ); ?>[key]" value="<?php echo esc_attr( $field_key ); ?>"<?php echo $field_key_locked ? ' data-cf-persisted="1"' : ''; ?>>
				<?php if ( Config::storesValue( $type ) ) : ?>
					<input type="hidden" class="cf-field-name-input" name="<?php echo esc_attr( $name_prefix ); ?>[name]" value="<?php echo esc_attr( (string) ( $field['name'] ?? '' ) ); ?>">
				<?php endif; ?>

				<div class="cf-field-editor-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Field settings sections', 'wppowersuite-lite' ); ?>">
					<button type="button" class="cf-field-editor-tab is-active" data-cf-field-tab="basic" role="tab" aria-selected="true"><?php esc_html_e( 'Basics', 'wppowersuite-lite' ); ?></button>
					<button type="button" class="cf-field-editor-tab" data-cf-field-tab="display" role="tab" aria-selected="false"><?php esc_html_e( 'Display', 'wppowersuite-lite' ); ?></button>
					<button type="button" class="cf-field-editor-tab" data-cf-field-tab="logic" role="tab" aria-selected="false"><?php esc_html_e( 'Logic', 'wppowersuite-lite' ); ?></button>
				</div>

				<div class="cf-field-editor-panel is-active" data-cf-field-panel="basic" role="tabpanel">
				<div class="cf-field-grid cf-field-grid--basics">
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-type"><?php esc_html_e( 'Type', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-type" class="cf-field-type-input" name="<?php echo esc_attr( $name_prefix ); ?>[type]">
							<?php foreach ( $grouped_types as $group_label => $types_in_group ) : ?>
								<optgroup label="<?php echo esc_attr( $group_label ); ?>">
									<?php foreach ( $types_in_group as $ft_key => $ft_label ) : ?>
										<option value="<?php echo esc_attr( $ft_key ); ?>" <?php selected( $type, $ft_key ); ?>><?php echo esc_html( $ft_label ); ?></option>
									<?php endforeach; ?>
								</optgroup>
							<?php endforeach; ?>
						</select>
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-label"><?php esc_html_e( 'Label', 'wppowersuite-lite' ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-label" class="regular-text cf-field-label-input" name="<?php echo esc_attr( $name_prefix ); ?>[label]" value="<?php echo esc_attr( $label ); ?>">
					</p>
					<p class="cf-field-control cf-field-storage"<?php echo $hide_storage ? ' hidden' : ''; ?>>
						<span class="cf-field-control__label"><?php esc_html_e( 'Field key', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Created from the label when you add the field. Used when saving and in templates.', 'wppowersuite-lite' ) ); ?></span>
						<?php if ( $field_key_locked ) : ?>
							<code class="cf-field-key-readonly"><?php echo esc_html( $field_key ); ?></code>
							<?php if ( $storage_key !== '' && $storage_key !== $field_key ) : ?>
								<span class="description"><?php esc_html_e( 'Saved as:', 'wppowersuite-lite' ); ?> <code><?php echo esc_html( $storage_key ); ?></code></span>
							<?php endif; ?>
						<?php else : ?>
							<span class="description cf-field-key-preview"><?php esc_html_e( 'Field key:', 'wppowersuite-lite' ); ?> <code>—</code></span>
						<?php endif; ?>
					</p>
				</div>

				<p class="cf-field-control">
					<label for="<?php echo esc_attr( $id_prefix ); ?>-instructions"><?php esc_html_e( 'Instructions', 'wppowersuite-lite' ); ?></label>
					<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-instructions" class="widefat" name="<?php echo esc_attr( $name_prefix ); ?>[instructions]" value="<?php echo esc_attr( (string) $field['instructions'] ); ?>">
				</p>

				<div class="cf-field-grid cf-field-grid--primary-values">
					<p class="cf-field-control cf-field-placeholder"<?php echo Config::typeSupports( $type, 'placeholder' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-placeholder"><?php esc_html_e( 'Placeholder', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Hint text shown inside the empty input on the edit screen.', 'wppowersuite-lite' ) ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-placeholder" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[placeholder]" value="<?php echo esc_attr( (string) $field['placeholder'] ); ?>">
					</p>
					<p class="cf-field-control cf-field-default"<?php echo $supports_default ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-default"><?php esc_html_e( 'Default value', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Shown when nothing has been saved yet. For checkbox and multi-select fields, enter one value per line.', 'wppowersuite-lite' ) ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-default" class="regular-text cf-field-default-input" name="<?php echo esc_attr( $name_prefix ); ?>[default]" value="<?php echo esc_attr( (string) $field['default'] ); ?>"<?php echo ! $supports_default || $uses_multi_default || $uses_toggle_default ? ' hidden disabled' : ''; ?>>
						<textarea id="<?php echo esc_attr( $id_prefix ); ?>-default-list" class="widefat code cf-field-default-textarea" rows="3" name="<?php echo esc_attr( $name_prefix ); ?>[default]"<?php echo $supports_default && $uses_multi_default ? '' : ' hidden disabled'; ?>><?php echo esc_textarea( (string) $field['default'] ); ?></textarea>
						<label class="cf-check-label cf-field-default-toggle"<?php echo $supports_default && $uses_toggle_default ? '' : ' hidden'; ?>>
							<input type="hidden" name="<?php echo esc_attr( $name_prefix ); ?>[default]" value="0"<?php echo $supports_default && $uses_toggle_default ? '' : ' disabled'; ?>>
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[default]" value="1" <?php checked( (string) ( $field['default'] ?? '' ), '1' ); ?><?php echo $supports_default && $uses_toggle_default ? '' : ' disabled'; ?>>
							<?php esc_html_e( 'Checked by default', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<p class="cf-field-control cf-field-choices"<?php echo $is_choice ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-choices"><?php esc_html_e( 'Choices', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'One option per line. Use value : Label when the saved value should differ from what is shown.', 'wppowersuite-lite' ) ); ?></label>
					<textarea id="<?php echo esc_attr( $id_prefix ); ?>-choices" class="widefat code" rows="4" name="<?php echo esc_attr( $name_prefix ); ?>[choices]" placeholder="value : Label"><?php echo esc_textarea( (string) $field['choices'] ); ?></textarea>
					<span class="description"><?php esc_html_e( 'One choice per line. Use "value : Label" to set a separate stored value.', 'wppowersuite-lite' ); ?></span>
				</p>

				<p class="cf-field-control cf-field-message"<?php echo $is_message ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-message"><?php esc_html_e( 'Message content', 'wppowersuite-lite' ); ?></label>
					<textarea id="<?php echo esc_attr( $id_prefix ); ?>-message" class="widefat" rows="4" name="<?php echo esc_attr( $name_prefix ); ?>[message_content]"><?php echo esc_textarea( (string) ( $field['message_content'] ?? '' ) ); ?></textarea>
					<span class="description"><?php esc_html_e( 'Display-only text shown to editors. Supports basic HTML.', 'wppowersuite-lite' ); ?></span>
				</p>

				<p class="cf-field-control cf-field-output"<?php echo $is_output ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-output"><?php esc_html_e( 'Output HTML', 'wppowersuite-lite' ); ?></label>
					<textarea id="<?php echo esc_attr( $id_prefix ); ?>-output" class="widefat code" rows="4" name="<?php echo esc_attr( $name_prefix ); ?>[output_content]"><?php echo esc_textarea( (string) ( $field['output_content'] ?? '' ) ); ?></textarea>
					<span class="description"><?php esc_html_e( 'Display-only HTML shown to editors. Unsafe tags are removed on save.', 'wppowersuite-lite' ); ?></span>
				</p>

				</div>
				<div class="cf-field-editor-panel" data-cf-field-panel="display" role="tabpanel" hidden>
				<div class="cf-field-grid cf-field-bounds"<?php echo Config::typeSupports( $type, 'bounds' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-min"><?php esc_html_e( 'Minimum', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Lowest accepted value. For Date / Time fields use the same format as the field (e.g. 2026-01-31).', 'wppowersuite-lite' ) ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-min" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[min]" value="<?php echo esc_attr( (string) ( $field['min'] ?? '' ) ); ?>" step="any">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-max"><?php esc_html_e( 'Maximum', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-max" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[max]" value="<?php echo esc_attr( (string) ( $field['max'] ?? '' ) ); ?>" step="any">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-step"><?php esc_html_e( 'Step', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-step" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[step]" value="<?php echo esc_attr( (string) ( $field['step'] ?? '' ) ); ?>" min="0" step="any">
					</p>
				</div>

				<p class="cf-field-control cf-field-multiple"<?php echo $is_multiple_type ? '' : ' hidden'; ?>>
					<label>
						<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[multiple]" value="1" <?php checked( $type === 'relationship' || ! empty( $field['multiple'] ) ); ?><?php disabled( $type === 'relationship' ); ?>>
						<?php esc_html_e( 'Allow multiple selections', 'wppowersuite-lite' ); ?>
					</label>
				</p>

				<div class="cf-field-grid cf-field-count"<?php echo Config::typeSupports( $type, 'count' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-count-min"><?php esc_html_e( 'Minimum items', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Minimum number of selected posts, rows, or layouts.', 'wppowersuite-lite' ) ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-count-min" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[min]" value="<?php echo esc_attr( (string) ( $field['min'] ?? '' ) ); ?>" min="0">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-count-max"><?php esc_html_e( 'Maximum items', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-count-max" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[max]" value="<?php echo esc_attr( (string) ( $field['max'] ?? '' ) ); ?>" min="0">
					</p>
				</div>

				<p class="cf-field-control cf-field-button-label"<?php echo Config::typeSupports( $type, 'button_label' ) ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-button-label"><?php esc_html_e( 'Add button label', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Button text shown when editors add another row or layout.', 'wppowersuite-lite' ) ); ?></label>
					<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-button-label" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[button_label]" value="<?php echo esc_attr( (string) ( $field['button_label'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'Add Row', 'wppowersuite-lite' ); ?>">
				</p>

				<p class="cf-field-control cf-field-nested-layout"<?php echo Config::typeSupports( $type, 'nested_layout' ) ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-nested-layout"><?php esc_html_e( 'Layout', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Controls how nested fields are arranged for editors using block, table, or row layouts.', 'wppowersuite-lite' ) ); ?></label>
					<?php $nested_layout_default = $type === 'repeater' ? 'table' : 'block'; ?>
					<select id="<?php echo esc_attr( $id_prefix ); ?>-nested-layout" name="<?php echo esc_attr( $name_prefix ); ?>[nested_layout]">
						<option value="block" <?php selected( (string) ( $field['nested_layout'] ?? $nested_layout_default ), 'block' ); ?>><?php esc_html_e( 'Block', 'wppowersuite-lite' ); ?></option>
						<option value="table" <?php selected( (string) ( $field['nested_layout'] ?? $nested_layout_default ), 'table' ); ?>><?php esc_html_e( 'Table', 'wppowersuite-lite' ); ?></option>
						<option value="row" <?php selected( (string) ( $field['nested_layout'] ?? $nested_layout_default ), 'row' ); ?>><?php esc_html_e( 'Row', 'wppowersuite-lite' ); ?></option>
					</select>
				</p>

				<p class="cf-field-control cf-field-repeater-collapsed"<?php echo Config::typeSupports( $type, 'repeater_collapsed' ) ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-collapsed"><?php esc_html_e( 'Collapsed preview', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Choose a sub field to show in collapsed repeater rows.', 'wppowersuite-lite' ) ); ?></label>
					<select id="<?php echo esc_attr( $id_prefix ); ?>-collapsed" name="<?php echo esc_attr( $name_prefix ); ?>[collapsed]">
						<option value=""><?php esc_html_e( 'Row number only', 'wppowersuite-lite' ); ?></option>
						<?php
						$collapsed_value  = (string) ( $field['collapsed'] ?? '' );
						$collapsed_exists = $collapsed_value === '';
						foreach ( array_values( $sub_fields ) as $sub ) :
							if ( ! is_array( $sub ) ) {
								continue;
							}
							$sub_name = sanitize_key( (string) ( $sub['name'] ?? ( $sub['key'] ?? '' ) ) );
							if ( $sub_name === '' ) {
								continue;
							}
							$collapsed_exists = $collapsed_exists || $sub_name === $collapsed_value;
							?>
							<option value="<?php echo esc_attr( $sub_name ); ?>" <?php selected( $collapsed_value, $sub_name ); ?>><?php echo esc_html( (string) ( $sub['label'] ?? $sub_name ) ); ?></option>
						<?php endforeach; ?>
						<?php if ( ! $collapsed_exists ) : ?>
							<option value="<?php echo esc_attr( $collapsed_value ); ?>" selected><?php echo esc_html( $collapsed_value ); ?></option>
						<?php endif; ?>
					</select>
				</p>

				<p class="cf-field-control cf-field-repeater-pagination"<?php echo Config::typeSupports( $type, 'repeater_pagination' ) ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-rows-per-page"><?php esc_html_e( 'Rows per page', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Large repeaters are paged in the editor after this many rows.', 'wppowersuite-lite' ) ); ?></label>
					<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-rows-per-page" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[rows_per_page]" value="<?php echo esc_attr( (string) ( $field['rows_per_page'] ?? 20 ) ); ?>" min="1">
				</p>

				<?php /* div, not p: a fieldset inside p gets hoisted out by the HTML parser and escapes the hidden wrapper. */ ?>
				<div class="cf-field-control cf-field-post-types"<?php echo in_array( $type, [ 'post_object', 'relationship', 'page_link' ], true ) ? '' : ' hidden'; ?>>
					<span class="cf-field-control__label"><?php esc_html_e( 'Filter by post types', 'wppowersuite-lite' ); ?></span>
					<span class="description"><?php esc_html_e( 'Leave empty to include all public post types.', 'wppowersuite-lite' ); ?></span>
					<fieldset class="cf-checkbox-grid cf-checkbox-grid--compact">
						<?php foreach ( $post_types as $pt_key => $pt_label ) : ?>
							<label class="cf-check">
								<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[post_types][]" value="<?php echo esc_attr( $pt_key ); ?>" <?php checked( in_array( $pt_key, $field_post_types, true ) ); ?>>
								<span><?php echo esc_html( $pt_label ); ?></span>
							</label>
						<?php endforeach; ?>
					</fieldset>
				</div>

				<div class="cf-field-control cf-field-post-statuses"<?php echo Config::typeSupports( $type, 'post_status_filter' ) ? '' : ' hidden'; ?>>
					<span class="cf-field-control__label"><?php esc_html_e( 'Filter by post status', 'wppowersuite-lite' ); ?></span>
					<span class="description"><?php esc_html_e( 'Leave empty to include any status the editor can read.', 'wppowersuite-lite' ); ?></span>
					<fieldset class="cf-checkbox-grid cf-checkbox-grid--compact">
						<?php foreach ( $post_statuses as $status_key => $status_label ) : ?>
							<label class="cf-check">
								<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[post_statuses][]" value="<?php echo esc_attr( $status_key ); ?>" <?php checked( in_array( $status_key, $field_post_statuses, true ) ); ?>>
								<span><?php echo esc_html( $status_label ); ?></span>
							</label>
						<?php endforeach; ?>
					</fieldset>
				</div>

				<p class="cf-field-control cf-field-allow-archives"<?php echo Config::typeSupports( $type, 'allow_archives' ) ? '' : ' hidden'; ?>>
					<label class="cf-check-label">
						<input type="hidden" name="<?php echo esc_attr( $name_prefix ); ?>[allow_archives]" value="0">
						<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[allow_archives]" value="1" <?php checked( ! empty( $field['allow_archives'] ) ); ?>>
						<?php esc_html_e( 'Allow archive links', 'wppowersuite-lite' ); ?>
						<?php cf_tip( __( 'Adds Home and public post type archive URLs to Page Link choices.', 'wppowersuite-lite' ) ); ?>
					</label>
				</p>

				<p class="cf-field-control cf-field-taxonomy"<?php echo $type === 'term' ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-taxonomy"><?php esc_html_e( 'Taxonomy', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'For term fields, this is the source taxonomy. For post relationship fields, it restricts choices to posts that have terms in this taxonomy.', 'wppowersuite-lite' ) ); ?></label>
					<select id="<?php echo esc_attr( $id_prefix ); ?>-taxonomy" name="<?php echo esc_attr( $name_prefix ); ?>[taxonomy]">
						<option value="">&mdash;</option>
						<?php foreach ( $taxonomies as $tx_key => $tx_label ) : ?>
							<option value="<?php echo esc_attr( $tx_key ); ?>" <?php selected( $taxonomy_value, $tx_key ); ?>><?php echo esc_html( $tx_label ); ?></option>
						<?php endforeach; ?>
					</select>
				</p>
				<div class="cf-field-control cf-field-taxonomy-terms"<?php echo in_array( $type, [ 'post_object', 'relationship', 'page_link' ], true ) ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-taxonomy-terms"><?php esc_html_e( 'Filter by taxonomy terms', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Leave empty to include all terms. Select one or more terms to limit relational choices.', 'wppowersuite-lite' ) ); ?></label>
					<select id="<?php echo esc_attr( $id_prefix ); ?>-taxonomy-terms" class="cf-taxonomy-term-filter" name="<?php echo esc_attr( $name_prefix ); ?>[taxonomy_terms][]" multiple size="6">
						<?php if ( (string) ( $field['taxonomy'] ?? '' ) !== '' && $field_taxonomy_terms === [] ) : ?>
							<option value="<?php echo esc_attr( (string) $field['taxonomy'] ); ?>" selected><?php echo esc_html( (string) $field['taxonomy'] ); ?></option>
						<?php endif; ?>
						<?php foreach ( $taxonomy_terms as $term_id => $term_label ) : ?>
							<option value="<?php echo esc_attr( (string) $term_id ); ?>" <?php selected( in_array( (string) $term_id, $field_taxonomy_terms, true ) ); ?>><?php echo esc_html( (string) $term_label ); ?></option>
						<?php endforeach; ?>
					</select>
					<span class="description"><?php esc_html_e( 'Matches posts assigned to any selected term.', 'wppowersuite-lite' ); ?></span>
				</div>
				<p class="cf-field-control cf-field-taxonomy-type"<?php echo Config::typeSupports( $type, 'taxonomy_field_type' ) ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-taxonomy-field-type"><?php esc_html_e( 'Selection UI', 'wppowersuite-lite' ); ?></label>
					<select id="<?php echo esc_attr( $id_prefix ); ?>-taxonomy-field-type" name="<?php echo esc_attr( $name_prefix ); ?>[taxonomy_field_type]">
						<option value="select" <?php selected( $taxonomy_field_type_value, 'select' ); ?>><?php esc_html_e( 'Select', 'wppowersuite-lite' ); ?></option>
						<option value="multi_select" <?php selected( $taxonomy_field_type_value, 'multi_select' ); ?>><?php esc_html_e( 'Multi Select', 'wppowersuite-lite' ); ?></option>
						<option value="radio" <?php selected( $taxonomy_field_type_value, 'radio' ); ?>><?php esc_html_e( 'Radio Buttons', 'wppowersuite-lite' ); ?></option>
						<option value="checkbox" <?php selected( $taxonomy_field_type_value, 'checkbox' ); ?>><?php esc_html_e( 'Checkboxes', 'wppowersuite-lite' ); ?></option>
					</select>
				</p>
				<div class="cf-field-grid cf-field-taxonomy-sync"<?php echo Config::typeSupports( $type, 'taxonomy_term_sync' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[taxonomy_save_terms]" value="1" <?php checked( ! empty( $field['taxonomy_save_terms'] ) ); ?>>
							<?php esc_html_e( 'Save selected terms to the post', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[taxonomy_load_terms]" value="1" <?php checked( ! empty( $field['taxonomy_load_terms'] ) ); ?>>
							<?php esc_html_e( 'Load value from post terms', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-taxonomy-create"<?php echo Config::typeSupports( $type, 'taxonomy_term_create' ) ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[taxonomy_add_terms]" value="1" <?php checked( ! empty( $field['taxonomy_add_terms'] ) ); ?>>
							<?php esc_html_e( 'Allow creating new terms while editing', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<div class="cf-field-control cf-field-user-roles"<?php echo Config::typeSupports( $type, 'user_role' ) ? '' : ' hidden'; ?>>
					<span class="cf-field-control__label"><?php esc_html_e( 'Filter by roles', 'wppowersuite-lite' ); ?></span>
					<span class="description"><?php esc_html_e( 'Leave empty to include all users you can list.', 'wppowersuite-lite' ); ?></span>
					<fieldset class="cf-checkbox-grid cf-checkbox-grid--compact">
						<?php foreach ( $user_roles as $role_key => $role_label ) : ?>
							<label class="cf-check">
								<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[user_roles][]" value="<?php echo esc_attr( $role_key ); ?>" <?php checked( in_array( $role_key, $field_user_roles, true ) ); ?>>
								<span><?php echo esc_html( $role_label ); ?></span>
							</label>
						<?php endforeach; ?>
					</fieldset>
				</div>

				<div class="cf-field-grid cf-field-appearance">
					<p class="cf-field-control cf-field-rows"<?php echo Config::typeSupports( $type, 'rows' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-rows"><?php esc_html_e( 'Rows', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Height of the editor on the edit screen, in text rows.', 'wppowersuite-lite' ) ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-rows" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[rows]" value="<?php echo esc_attr( (string) ( $field['rows'] ?? 4 ) ); ?>" min="2" max="20">
					</p>
					<p class="cf-field-control cf-field-maxlength"<?php echo Config::typeSupports( $type, 'maxlength' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-maxlength"><?php esc_html_e( 'Character limit', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Maximum number of characters editors can enter.', 'wppowersuite-lite' ) ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-maxlength" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[maxlength]" value="<?php echo esc_attr( (string) ( $field['maxlength'] ?? '' ) ); ?>" min="1">
					</p>
					<p class="cf-field-control cf-field-new-lines"<?php echo Config::typeSupports( $type, 'new_lines' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-new-lines"><?php esc_html_e( 'New Lines', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'How line breaks are formatted when this textarea is output.', 'wppowersuite-lite' ) ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-new-lines" name="<?php echo esc_attr( $name_prefix ); ?>[new_lines]">
							<option value="" <?php selected( (string) ( $field['new_lines'] ?? '' ), '' ); ?>><?php esc_html_e( 'No formatting', 'wppowersuite-lite' ); ?></option>
							<option value="br" <?php selected( (string) ( $field['new_lines'] ?? '' ), 'br' ); ?>><?php esc_html_e( 'Convert to <br>', 'wppowersuite-lite' ); ?></option>
							<option value="wpautop" <?php selected( (string) ( $field['new_lines'] ?? '' ), 'wpautop' ); ?>><?php esc_html_e( 'Add paragraphs', 'wppowersuite-lite' ); ?></option>
						</select>
					</p>
					<p class="cf-field-control cf-field-before-after"<?php echo Config::typeSupports( $type, 'before_after' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-before"><?php esc_html_e( 'Text before', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Short text printed just before the input, e.g. a currency symbol.', 'wppowersuite-lite' ) ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-before" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[before]" value="<?php echo esc_attr( (string) ( $field['before'] ?? '' ) ); ?>">
					</p>
					<p class="cf-field-control cf-field-before-after"<?php echo Config::typeSupports( $type, 'before_after' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-after"><?php esc_html_e( 'Text after', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Short text printed just after the input, e.g. a unit like “kg”.', 'wppowersuite-lite' ) ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-after" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[after]" value="<?php echo esc_attr( (string) ( $field['after'] ?? '' ) ); ?>">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-width"><?php esc_html_e( 'Width', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'How wide this field is on the edit screen. Two half-width fields sit side by side.', 'wppowersuite-lite' ) ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-width" name="<?php echo esc_attr( $name_prefix ); ?>[width]">
							<?php foreach ( Config::fieldWidths() as $width_key => $width_label ) : ?>
								<option value="<?php echo esc_attr( $width_key ); ?>" <?php selected( (string) ( $field['width'] ?? '100' ), $width_key ); ?>><?php echo esc_html( $width_label ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
				</div>

				<div class="cf-field-grid cf-field-date-display"<?php echo Config::typeSupports( $type, 'date_display' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-display-format"><?php esc_html_e( 'Display format', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'PHP date format used when this value is rendered by shortcodes and helper output.', 'wppowersuite-lite' ) ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-display-format" class="regular-text code" name="<?php echo esc_attr( $name_prefix ); ?>[display_format]" value="<?php echo esc_attr( (string) ( $field['display_format'] ?? '' ) ); ?>" placeholder="<?php echo esc_attr( $type === 'time' ? 'g:i a' : ( $type === 'datetime' ? 'F j, Y g:i a' : 'F j, Y' ) ); ?>">
					</p>
					<p class="cf-field-control cf-field-date-save-format"<?php echo Config::typeSupports( $type, 'date_save_format' ) && (string) ( $field['save_format'] ?? '' ) !== '' ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-save-format"><?php esc_html_e( 'Save format', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'PHP date format used for stored values. Leave blank to store as Y-m-d.', 'wppowersuite-lite' ) ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-save-format" class="regular-text code" name="<?php echo esc_attr( $name_prefix ); ?>[save_format]" value="<?php echo esc_attr( (string) ( $field['save_format'] ?? '' ) ); ?>" placeholder="Y-m-d">
					</p>
					<p class="cf-field-control cf-field-first-day"<?php echo Config::typeSupports( $type, 'date_first_day' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-first-day"><?php esc_html_e( 'First day of week', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-first-day" name="<?php echo esc_attr( $name_prefix ); ?>[first_day]">
							<?php foreach ( [ 0 => __( 'Sunday', 'wppowersuite-lite' ), 1 => __( 'Monday', 'wppowersuite-lite' ), 2 => __( 'Tuesday', 'wppowersuite-lite' ), 3 => __( 'Wednesday', 'wppowersuite-lite' ), 4 => __( 'Thursday', 'wppowersuite-lite' ), 5 => __( 'Friday', 'wppowersuite-lite' ), 6 => __( 'Saturday', 'wppowersuite-lite' ) ] as $day_key => $day_label ) : ?>
								<option value="<?php echo esc_attr( (string) $day_key ); ?>" <?php selected( (int) ( $field['first_day'] ?? 1 ), $day_key ); ?>><?php echo esc_html( $day_label ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
					<p class="cf-field-control cf-field-default-current"<?php echo Config::typeSupports( $type, 'default_current' ) ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[default_current]" value="1" <?php checked( ! empty( $field['default_current'] ) ); ?>>
							<?php esc_html_e( 'Default to current date/time', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<div class="cf-field-grid cf-field-color-options"<?php echo Config::typeSupports( $type, 'color_options' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[enable_opacity]" value="1" <?php checked( ! empty( $field['enable_opacity'] ) ); ?>>
							<?php esc_html_e( 'Enable opacity', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="hidden" name="<?php echo esc_attr( $name_prefix ); ?>[show_color_wheel]" value="0">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[show_color_wheel]" value="1" <?php checked( ! isset( $field['show_color_wheel'] ) || ! empty( $field['show_color_wheel'] ) ); ?>>
							<?php esc_html_e( 'Show color wheel', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-palette-source"><?php esc_html_e( 'Palette source', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-palette-source" name="<?php echo esc_attr( $name_prefix ); ?>[custom_palette_source]">
							<option value="" <?php selected( (string) ( $field['custom_palette_source'] ?? '' ), '' ); ?>><?php esc_html_e( 'Default', 'wppowersuite-lite' ); ?></option>
							<option value="custom" <?php selected( (string) ( $field['custom_palette_source'] ?? '' ), 'custom' ); ?>><?php esc_html_e( 'Custom', 'wppowersuite-lite' ); ?></option>
							<option value="themejson" <?php selected( (string) ( $field['custom_palette_source'] ?? '' ), 'themejson' ); ?>><?php esc_html_e( 'theme.json', 'wppowersuite-lite' ); ?></option>
						</select>
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-palette-colors"><?php esc_html_e( 'Palette colors', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Optional comma-separated hex or rgba colors shown as editor presets when Palette source is Custom.', 'wppowersuite-lite' ) ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-palette-colors" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[palette_colors]" value="<?php echo esc_attr( (string) ( $field['palette_colors'] ?? '' ) ); ?>" placeholder="#2271b1, #d63638">
					</p>
				</div>

				<div class="cf-field-grid cf-field-toggle-options"<?php echo Config::typeSupports( $type, 'toggle_options' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control cf-field-control--wide">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-toggle-message"><?php esc_html_e( 'Message', 'wppowersuite-lite' ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-toggle-message" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[toggle_message]" value="<?php echo esc_attr( (string) ( $field['toggle_message'] ?? '' ) ); ?>">
					</p>
					<p class="cf-field-control cf-field-toggle-ui">
						<label class="cf-check-label">
							<input type="hidden" name="<?php echo esc_attr( $name_prefix ); ?>[toggle_ui]" value="0">
							<input type="checkbox" class="cf-field-toggle-ui-input" name="<?php echo esc_attr( $name_prefix ); ?>[toggle_ui]" value="1" <?php checked( ! empty( $field['toggle_ui'] ) ); ?>>
							<?php esc_html_e( 'Stylized UI', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-toggle-ui-text">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-toggle-on-text"><?php esc_html_e( 'On text', 'wppowersuite-lite' ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-toggle-on-text" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[toggle_on_text]" value="<?php echo esc_attr( (string) ( $field['toggle_on_text'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'Yes', 'wppowersuite-lite' ); ?>">
					</p>
					<p class="cf-field-control cf-field-toggle-ui-text">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-toggle-off-text"><?php esc_html_e( 'Off text', 'wppowersuite-lite' ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-toggle-off-text" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[toggle_off_text]" value="<?php echo esc_attr( (string) ( $field['toggle_off_text'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'No', 'wppowersuite-lite' ); ?>">
					</p>
				</div>

				<div class="cf-field-grid cf-field-icon-tabs"<?php echo Config::typeSupports( $type, 'icon_tabs' ) ? '' : ' hidden'; ?>>
					<?php
					$icon_tabs = isset( $field['icon_tabs'] ) && is_array( $field['icon_tabs'] ) ? $field['icon_tabs'] : [ 'dashicons', 'media_library', 'url' ];
					$icon_tab_options = [
						'dashicons'      => __( 'Dashicons', 'wppowersuite-lite' ),
						'media_library'  => __( 'Media library', 'wppowersuite-lite' ),
						'url'            => __( 'URL', 'wppowersuite-lite' ),
					];
					?>
					<p class="cf-field-control cf-field-control--wide">
						<span class="cf-field-control__label"><?php esc_html_e( 'Icon sources', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Choose which icon sources editors can use for this field.', 'wppowersuite-lite' ) ); ?></span>
						<span class="cf-inline-checks">
							<?php foreach ( $icon_tab_options as $icon_tab_key => $icon_tab_label ) : ?>
								<label>
									<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[icon_tabs][]" value="<?php echo esc_attr( $icon_tab_key ); ?>" <?php checked( in_array( $icon_tab_key, $icon_tabs, true ) ); ?>>
									<?php echo esc_html( $icon_tab_label ); ?>
								</label>
							<?php endforeach; ?>
						</span>
					</p>
				</div>

				<div class="cf-field-grid cf-field-oembed-dimensions"<?php echo Config::typeSupports( $type, 'oembed_dimensions' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-oembed-width"><?php esc_html_e( 'Embed width', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-oembed-width" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[oembed_width]" value="<?php echo esc_attr( (string) ( $field['oembed_width'] ?? '' ) ); ?>" min="1">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-oembed-height"><?php esc_html_e( 'Embed height', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-oembed-height" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[oembed_height]" value="<?php echo esc_attr( (string) ( $field['oembed_height'] ?? '' ) ); ?>" min="1">
					</p>
				</div>

				<div class="cf-field-grid cf-field-google-map-defaults"<?php echo Config::typeSupports( $type, 'google_map_defaults' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-map-center-lat"><?php esc_html_e( 'Center latitude', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-map-center-lat" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[map_center_lat]" value="<?php echo esc_attr( (string) ( $field['map_center_lat'] ?? '' ) ); ?>" min="-90" max="90" step="any" placeholder="-37.81411">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-map-center-lng"><?php esc_html_e( 'Center longitude', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-map-center-lng" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[map_center_lng]" value="<?php echo esc_attr( (string) ( $field['map_center_lng'] ?? '' ) ); ?>" min="-180" max="180" step="any" placeholder="144.96328">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-map-zoom"><?php esc_html_e( 'Zoom', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-map-zoom" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[map_zoom]" value="<?php echo esc_attr( (string) ( $field['map_zoom'] ?? '14' ) ); ?>" min="1" max="22">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-map-height"><?php esc_html_e( 'Map height', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-map-height" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[map_height]" value="<?php echo esc_attr( (string) ( $field['map_height'] ?? '400' ) ); ?>" min="120" max="1200" placeholder="400">
					</p>
				</div>

				<div class="cf-field-grid cf-field-message-options"<?php echo Config::typeSupports( $type, 'message_options' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-message-new-lines"><?php esc_html_e( 'New lines', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-message-new-lines" name="<?php echo esc_attr( $name_prefix ); ?>[message_new_lines]">
							<option value="" <?php selected( (string) ( $field['message_new_lines'] ?? '' ), '' ); ?>><?php esc_html_e( 'No formatting', 'wppowersuite-lite' ); ?></option>
							<option value="br" <?php selected( (string) ( $field['message_new_lines'] ?? '' ), 'br' ); ?>><?php esc_html_e( 'Convert to <br>', 'wppowersuite-lite' ); ?></option>
							<option value="wpautop" <?php selected( (string) ( $field['message_new_lines'] ?? '' ), 'wpautop' ); ?>><?php esc_html_e( 'Add paragraphs', 'wppowersuite-lite' ); ?></option>
						</select>
					</p>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[message_escape_html]" value="1" <?php checked( ! empty( $field['message_escape_html'] ) ); ?>>
							<?php esc_html_e( 'Escape HTML', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<div class="cf-field-grid cf-field-tab-options"<?php echo Config::typeSupports( $type, 'tab_options' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-tab-placement"><?php esc_html_e( 'Placement', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-tab-placement" name="<?php echo esc_attr( $name_prefix ); ?>[tab_placement]">
							<option value="top" <?php selected( (string) ( $field['tab_placement'] ?? 'top' ), 'top' ); ?>><?php esc_html_e( 'Top aligned', 'wppowersuite-lite' ); ?></option>
							<option value="left" <?php selected( (string) ( $field['tab_placement'] ?? 'top' ), 'left' ); ?>><?php esc_html_e( 'Left aligned', 'wppowersuite-lite' ); ?></option>
						</select>
					</p>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[tab_endpoint]" value="1" <?php checked( ! empty( $field['tab_endpoint'] ) ); ?>>
							<?php esc_html_e( 'Start a new tab group', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<div class="cf-field-grid cf-field-accordion-options"<?php echo Config::typeSupports( $type, 'accordion_options' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[accordion_open]" value="1" <?php checked( ! empty( $field['accordion_open'] ) ); ?>>
							<?php esc_html_e( 'Open by default', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[accordion_multi_expand]" value="1" <?php checked( ! empty( $field['accordion_multi_expand'] ) ); ?>>
							<?php esc_html_e( 'Allow multiple open', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[accordion_endpoint]" value="1" <?php checked( ! empty( $field['accordion_endpoint'] ) ); ?>>
							<?php esc_html_e( 'Endpoint', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<div class="cf-field-grid cf-field-wysiwyg-options"<?php echo Config::typeSupports( $type, 'wysiwyg_options' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control cf-field-wysiwyg-tabs-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-wysiwyg-tabs"><?php esc_html_e( 'Tabs', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-wysiwyg-tabs" name="<?php echo esc_attr( $name_prefix ); ?>[wysiwyg_tabs]">
							<option value="all" <?php selected( (string) ( $field['wysiwyg_tabs'] ?? 'all' ), 'all' ); ?>><?php esc_html_e( 'Visual and Text', 'wppowersuite-lite' ); ?></option>
							<option value="visual" <?php selected( (string) ( $field['wysiwyg_tabs'] ?? 'all' ), 'visual' ); ?>><?php esc_html_e( 'Visual only', 'wppowersuite-lite' ); ?></option>
							<option value="text" <?php selected( (string) ( $field['wysiwyg_tabs'] ?? 'all' ), 'text' ); ?>><?php esc_html_e( 'Text only', 'wppowersuite-lite' ); ?></option>
						</select>
					</p>
					<p class="cf-field-control cf-field-wysiwyg-toolbar-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-wysiwyg-toolbar"><?php esc_html_e( 'Toolbar', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-wysiwyg-toolbar" name="<?php echo esc_attr( $name_prefix ); ?>[wysiwyg_toolbar]">
							<option value="full" <?php selected( (string) ( $field['wysiwyg_toolbar'] ?? 'full' ), 'full' ); ?>><?php esc_html_e( 'Full', 'wppowersuite-lite' ); ?></option>
							<option value="basic" <?php selected( (string) ( $field['wysiwyg_toolbar'] ?? 'full' ), 'basic' ); ?>><?php esc_html_e( 'Basic', 'wppowersuite-lite' ); ?></option>
						</select>
					</p>
					<p class="cf-field-control cf-field-wysiwyg-media-control">
						<label class="cf-check-label">
							<input type="hidden" name="<?php echo esc_attr( $name_prefix ); ?>[wysiwyg_media_upload]" value="0">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[wysiwyg_media_upload]" value="1" <?php checked( ! empty( $field['wysiwyg_media_upload'] ) ); ?>>
							<?php esc_html_e( 'Show media upload button', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-wysiwyg-delay-control">
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[wysiwyg_delay]" value="1" <?php checked( ! empty( $field['wysiwyg_delay'] ) ); ?>>
							<?php esc_html_e( 'Delay editor initialization', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<div class="cf-field-grid cf-field-selection-settings">
					<p class="cf-field-control cf-field-allow-null"<?php echo $show_allow_null ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[allow_null]" value="1" <?php checked( ! empty( $field['allow_null'] ) ); ?>>
							<?php esc_html_e( 'Allow empty value', 'wppowersuite-lite' ); ?>
							<?php cf_tip( __( 'Adds a blank option for single-select relational and choice fields.', 'wppowersuite-lite' ) ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-choice-layout"<?php echo Config::typeSupports( $type, 'choice_layout' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-choice-layout"><?php esc_html_e( 'Choice layout', 'wppowersuite-lite' ); ?></label>
						<?php $choice_layout_default = $type === 'button_group' ? 'horizontal' : 'vertical'; ?>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-choice-layout" name="<?php echo esc_attr( $name_prefix ); ?>[choice_layout]">
							<option value="vertical" <?php selected( (string) ( $field['choice_layout'] ?? $choice_layout_default ), 'vertical' ); ?>><?php esc_html_e( 'Vertical', 'wppowersuite-lite' ); ?></option>
							<option value="horizontal" <?php selected( (string) ( $field['choice_layout'] ?? $choice_layout_default ), 'horizontal' ); ?>><?php esc_html_e( 'Horizontal', 'wppowersuite-lite' ); ?></option>
						</select>
					</p>
					<p class="cf-field-control cf-field-checkbox-toggle"<?php echo Config::typeSupports( $type, 'checkbox_toggle' ) ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[checkbox_toggle]" value="1" <?php checked( ! empty( $field['checkbox_toggle'] ) ); ?>>
							<?php esc_html_e( 'Show toggle all', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-choice-custom"<?php echo Config::typeSupports( $type, 'choice_custom' ) ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" class="cf-field-allow-custom-input" name="<?php echo esc_attr( $name_prefix ); ?>[allow_custom]" value="1" <?php checked( ! empty( $field['allow_custom'] ) ); ?>>
							<?php echo $type === 'radio' ? esc_html__( 'Allow other choice', 'wppowersuite-lite' ) : esc_html__( 'Allow custom values', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-choice-save-custom"<?php echo Config::typeSupports( $type, 'choice_custom' ) && ! empty( $field['allow_custom'] ) ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[save_custom]" value="1" <?php checked( ! empty( $field['save_custom'] ) ); ?>>
							<?php echo $type === 'radio' ? esc_html__( 'Save other choices', 'wppowersuite-lite' ) : esc_html__( 'Save custom values', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<div class="cf-field-grid cf-field-select-options"<?php echo Config::typeSupports( $type, 'select_options' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-select-placeholder"><?php esc_html_e( 'Placeholder', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Shown for empty single-select fields when Allow Null is enabled.', 'wppowersuite-lite' ) ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-select-placeholder" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[placeholder]" value="<?php echo esc_attr( (string) ( $field['placeholder'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'Select', 'wppowersuite-lite' ); ?>">
					</p>
					<p class="cf-field-control">
						<label class="cf-check-label">
							<input type="checkbox" class="cf-field-select-ui-input" name="<?php echo esc_attr( $name_prefix ); ?>[select_ui]" value="1" <?php checked( ! empty( $field['select_ui'] ) ); ?>>
							<?php esc_html_e( 'Enhanced UI', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-select-ajax"<?php echo ! empty( $field['select_ui'] ) ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[select_ajax]" value="1" <?php checked( ! empty( $field['select_ajax'] ) ); ?>>
							<?php esc_html_e( 'Use AJAX loading', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-select-create"<?php echo ! empty( $field['select_ui'] ) ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" class="cf-field-select-create-input" name="<?php echo esc_attr( $name_prefix ); ?>[select_create_options]" value="1" <?php checked( ! empty( $field['select_create_options'] ) ); ?>>
							<?php esc_html_e( 'Create new options', 'wppowersuite-lite' ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-select-save"<?php echo ! empty( $field['select_ui'] ) && ! empty( $field['select_create_options'] ) ? '' : ' hidden'; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[select_save_options]" value="1" <?php checked( ! empty( $field['select_save_options'] ) ); ?>>
							<?php esc_html_e( 'Save new options', 'wppowersuite-lite' ); ?>
						</label>
					</p>
				</div>

				<div class="cf-field-grid cf-field-nav-menu-options"<?php echo Config::typeSupports( $type, 'nav_menu_container' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-nav-menu-container"><?php esc_html_e( 'Menu container', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'HTML wrapper used when return format is rendered menu HTML.', 'wppowersuite-lite' ) ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-nav-menu-container" name="<?php echo esc_attr( $name_prefix ); ?>[nav_menu_container]">
							<?php $selected_container = (string) ( $field['nav_menu_container'] ?? 'div' ); ?>
							<?php $selected_container = $selected_container === 'none' ? '0' : $selected_container; ?>
							<?php foreach ( [ 'div', 'nav', '0' ] as $container ) : ?>
								<option value="<?php echo esc_attr( $container ); ?>" <?php selected( $selected_container, $container ); ?>><?php echo esc_html( $container === '0' ? __( 'None', 'wppowersuite-lite' ) : '<' . $container . '>' ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
				</div>

				<p class="cf-field-control cf-field-return"<?php echo Config::typeSupports( $type, 'return_format' ) ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-return"><?php esc_html_e( 'Return format', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'How helper output should format this stored value.', 'wppowersuite-lite' ) ); ?></label>
					<select id="<?php echo esc_attr( $id_prefix ); ?>-return" name="<?php echo esc_attr( $name_prefix ); ?>[return]">
						<?php foreach ( Config::returnFormatOptions()[ $type ] ?? [ 'id' => __( 'ID', 'wppowersuite-lite' ) ] as $return_key => $return_label ) : ?>
							<option value="<?php echo esc_attr( $return_key ); ?>" <?php selected( (string) $field['return'], (string) $return_key ); ?>><?php echo esc_html( $return_label ); ?></option>
						<?php endforeach; ?>
					</select>
				</p>

				<div class="cf-field-control cf-field-media-library"<?php echo Config::typeSupports( $type, 'media_library' ) ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-media-library"><?php esc_html_e( 'Library', 'wppowersuite-lite' ); ?></label>
					<select id="<?php echo esc_attr( $id_prefix ); ?>-media-library" name="<?php echo esc_attr( $name_prefix ); ?>[media_library]">
						<option value="all" <?php selected( (string) ( $field['media_library'] ?? 'all' ), 'all' ); ?>><?php esc_html_e( 'All media', 'wppowersuite-lite' ); ?></option>
						<option value="uploaded_to" <?php selected( (string) ( $field['media_library'] ?? 'all' ), 'uploaded_to' ); ?>><?php esc_html_e( 'Uploaded to current post', 'wppowersuite-lite' ); ?></option>
					</select>
				</div>

				<div class="cf-field-grid cf-field-media-size"<?php echo Config::typeSupports( $type, 'media_size' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-min-size"><?php esc_html_e( 'Min file size (MB)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-min-size" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[min_size]" value="<?php echo esc_attr( (string) ( $field['min_size'] ?? '' ) ); ?>" min="0" step="0.1">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-max-size"><?php esc_html_e( 'Max file size (MB)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-max-size" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[max_size]" value="<?php echo esc_attr( (string) ( $field['max_size'] ?? '' ) ); ?>" min="0" step="0.1">
					</p>
					<p class="cf-field-control cf-field-media-mime"<?php echo Config::typeSupports( $type, 'media_mime' ) ? '' : ' hidden'; ?>>
						<label for="<?php echo esc_attr( $id_prefix ); ?>-mime-types"><?php esc_html_e( 'Allowed file types', 'wppowersuite-lite' ); ?></label>
						<input type="text" id="<?php echo esc_attr( $id_prefix ); ?>-mime-types" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[mime_types]" value="<?php echo esc_attr( (string) ( $field['mime_types'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'jpg, png, pdf', 'wppowersuite-lite' ); ?>">
					</p>
				</div>

				<div class="cf-field-grid cf-field-image-dimensions"<?php echo Config::typeSupports( $type, 'image_dimensions' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-min-width"><?php esc_html_e( 'Min width', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-min-width" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[min_width]" value="<?php echo esc_attr( (string) ( $field['min_width'] ?? '' ) ); ?>" min="1">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-min-height"><?php esc_html_e( 'Min height', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-min-height" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[min_height]" value="<?php echo esc_attr( (string) ( $field['min_height'] ?? '' ) ); ?>" min="1">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-max-width"><?php esc_html_e( 'Max width', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-max-width" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[max_width]" value="<?php echo esc_attr( (string) ( $field['max_width'] ?? '' ) ); ?>" min="1">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-max-height"><?php esc_html_e( 'Max height', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-max-height" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[max_height]" value="<?php echo esc_attr( (string) ( $field['max_height'] ?? '' ) ); ?>" min="1">
					</p>
				</div>

				<div class="cf-field-grid cf-field-image-preview-size"<?php echo Config::typeSupports( $type, 'image_preview_size' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-image-preview-size"><?php esc_html_e( 'Preview size', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-image-preview-size" name="<?php echo esc_attr( $name_prefix ); ?>[image_preview_size]">
							<?php foreach ( $image_sizes as $size ) : ?>
								<option value="<?php echo esc_attr( $size ); ?>" <?php selected( (string) ( $field['image_preview_size'] ?? 'medium' ), $size ); ?>><?php echo esc_html( ucwords( str_replace( [ '-', '_' ], ' ', $size ) ) ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
				</div>

				<div class="cf-field-grid cf-field-gallery-display"<?php echo Config::typeSupports( $type, 'gallery_display' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-gallery-preview-size"><?php esc_html_e( 'Preview size', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-gallery-preview-size" name="<?php echo esc_attr( $name_prefix ); ?>[gallery_preview_size]">
							<?php foreach ( $image_sizes as $size ) : ?>
								<option value="<?php echo esc_attr( $size ); ?>" <?php selected( (string) ( $field['gallery_preview_size'] ?? 'medium' ), $size ); ?>><?php echo esc_html( ucwords( str_replace( [ '-', '_' ], ' ', $size ) ) ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-gallery-insert"><?php esc_html_e( 'Insert new images', 'wppowersuite-lite' ); ?></label>
						<select id="<?php echo esc_attr( $id_prefix ); ?>-gallery-insert" name="<?php echo esc_attr( $name_prefix ); ?>[gallery_insert]">
							<option value="append" <?php selected( (string) ( $field['gallery_insert'] ?? 'append' ), 'append' ); ?>><?php esc_html_e( 'Append to the end', 'wppowersuite-lite' ); ?></option>
							<option value="prepend" <?php selected( (string) ( $field['gallery_insert'] ?? 'append' ), 'prepend' ); ?>><?php esc_html_e( 'Prepend to the beginning', 'wppowersuite-lite' ); ?></option>
						</select>
					</p>
				</div>

				<div class="cf-field-grid cf-field-gallery-count"<?php echo Config::typeSupports( $type, 'gallery_count' ) ? '' : ' hidden'; ?>>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-gallery-min"><?php esc_html_e( 'Min images', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-gallery-min" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[min]" value="<?php echo esc_attr( (string) ( $field['min'] ?? '' ) ); ?>" min="0">
					</p>
					<p class="cf-field-control">
						<label for="<?php echo esc_attr( $id_prefix ); ?>-gallery-max"><?php esc_html_e( 'Max images', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="<?php echo esc_attr( $id_prefix ); ?>-gallery-max" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[max]" value="<?php echo esc_attr( (string) ( $field['max'] ?? '' ) ); ?>" min="0">
					</p>
				</div>

				<div class="cf-field-grid cf-field-relationship-ui"<?php echo Config::typeSupports( $type, 'relationship_filters' ) ? '' : ' hidden'; ?>>
					<div class="cf-field-control">
						<span class="cf-field-control__label"><?php esc_html_e( 'Filters', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Controls shown above the relationship picker.', 'wppowersuite-lite' ) ); ?></span>
						<fieldset class="cf-checkbox-grid cf-checkbox-grid--compact">
							<?php
							$relationship_filters = isset( $field['relationship_filters'] ) && is_array( $field['relationship_filters'] ) ? array_map( 'strval', $field['relationship_filters'] ) : [];
							if ( $relationship_filters === [] ) {
								$relationship_filters = [ 'search', 'post_type', 'taxonomy' ];
							}
							foreach ( [ 'search' => __( 'Search', 'wppowersuite-lite' ), 'post_type' => __( 'Post type', 'wppowersuite-lite' ), 'taxonomy' => __( 'Taxonomy', 'wppowersuite-lite' ) ] as $filter_key => $filter_label ) :
								?>
								<label class="cf-check">
									<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[relationship_filters][]" value="<?php echo esc_attr( $filter_key ); ?>" <?php checked( in_array( $filter_key, $relationship_filters, true ) ); ?>>
									<span><?php echo esc_html( $filter_label ); ?></span>
								</label>
							<?php endforeach; ?>
						</fieldset>
					</div>
					<div class="cf-field-control">
						<span class="cf-field-control__label"><?php esc_html_e( 'Elements', 'wppowersuite-lite' ); ?></span>
						<fieldset class="cf-checkbox-grid cf-checkbox-grid--compact">
							<?php $relationship_elements = isset( $field['relationship_elements'] ) && is_array( $field['relationship_elements'] ) ? array_map( 'strval', $field['relationship_elements'] ) : []; ?>
							<label class="cf-check">
								<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[relationship_elements][]" value="featured_image" <?php checked( in_array( 'featured_image', $relationship_elements, true ) ); ?>>
								<span><?php esc_html_e( 'Featured image', 'wppowersuite-lite' ); ?></span>
							</label>
						</fieldset>
					</div>
				</div>

				<div class="cf-field-grid cf-field-flags">
					<p class="cf-field-control cf-field-required"<?php echo $hide_required ? ' hidden' : ''; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[required]" value="1" <?php checked( ! empty( $field['required'] ) ); ?>>
							<?php esc_html_e( 'Required', 'wppowersuite-lite' ); ?>
							<?php cf_tip( __( 'Editors must fill in this field before saving.', 'wppowersuite-lite' ) ); ?>
						</label>
					</p>
					<p class="cf-field-control cf-field-show-list"<?php echo $hide_show_list ? ' hidden' : ''; ?>>
						<label class="cf-check-label">
							<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[show_in_list]" value="1" <?php checked( ! empty( $field['show_in_list'] ) ); ?>>
							<?php esc_html_e( 'Show in admin list table', 'wppowersuite-lite' ); ?>
							<?php cf_tip( __( 'Adds a column with this value to the posts list.', 'wppowersuite-lite' ) ); ?>
						</label>
					</p>
				</div>
				</div>
				<div class="cf-field-editor-panel" data-cf-field-panel="logic" role="tabpanel" hidden>
				<div class="cf-field-control cf-field-nested cf-field-repeater"<?php echo ( $is_group || $is_repeater ) ? '' : ' hidden'; ?>>
					<span class="cf-field-control__label"><?php esc_html_e( 'Sub fields', 'wppowersuite-lite' ); ?></span>
					<div class="cf-subfields-list" data-prefix="<?php echo esc_attr( $name_prefix ); ?>">
						<?php foreach ( array_values( $sub_fields ) as $si => $sub ) : ?>
							<?php if ( ! is_array( $sub ) ) { continue; } ?>
							<div class="cf-subfield-row" data-index="<?php echo esc_attr( (string) $si ); ?>">
								<label class="cf-subfield-row__control">
									<span><?php esc_html_e( 'Type', 'wppowersuite-lite' ); ?></span>
									<select name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][type]">
										<?php foreach ( $allowed_sub_types as $st ) : ?>
											<option value="<?php echo esc_attr( $st ); ?>" <?php selected( (string) ( $sub['type'] ?? 'text' ), $st ); ?>><?php echo esc_html( Config::fieldTypes()[ $st ]['label'] ?? $st ); ?></option>
										<?php endforeach; ?>
									</select>
								</label>
								<label class="cf-subfield-row__control">
									<span><?php esc_html_e( 'Label', 'wppowersuite-lite' ); ?></span>
									<input type="text" class="cf-subfield-label-input" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][label]" value="<?php echo esc_attr( (string) ( $sub['label'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'Label', 'wppowersuite-lite' ); ?>">
								</label>
								<span class="cf-subfield-row__control cf-subfield-key-display">
									<span><?php esc_html_e( 'Field key', 'wppowersuite-lite' ); ?></span>
									<code><?php echo esc_html( (string) ( $sub['key'] ?? 'field' ) ); ?></code>
								</span>
								<input type="hidden" class="cf-subfield-key-input" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][key]" value="<?php echo esc_attr( (string) ( $sub['key'] ?? '' ) ); ?>"<?php echo (string) ( $sub['key'] ?? '' ) !== '' ? ' data-cf-persisted="1"' : ''; ?>>
								<input type="hidden" class="cf-subfield-name-input" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][name]" value="<?php echo esc_attr( (string) ( $sub['name'] ?? $sub['key'] ?? '' ) ); ?>">
								<button type="button" class="button-link cf-subfield-remove" aria-label="<?php esc_attr_e( 'Remove sub field', 'wppowersuite-lite' ); ?>">&times;</button>
								<div class="cf-subfield-row__details">
									<label class="cf-subfield-row__control cf-subfield-instructions">
										<span><?php esc_html_e( 'Instructions', 'wppowersuite-lite' ); ?></span>
										<input type="text" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][instructions]" value="<?php echo esc_attr( (string) ( $sub['instructions'] ?? '' ) ); ?>">
									</label>
									<label class="cf-subfield-row__control cf-subfield-placeholder">
										<span><?php esc_html_e( 'Placeholder', 'wppowersuite-lite' ); ?></span>
										<input type="text" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][placeholder]" value="<?php echo esc_attr( (string) ( $sub['placeholder'] ?? '' ) ); ?>">
									</label>
									<label class="cf-subfield-row__control cf-subfield-default">
										<span><?php esc_html_e( 'Default value', 'wppowersuite-lite' ); ?></span>
										<input type="text" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][default]" value="<?php echo esc_attr( (string) ( $sub['default'] ?? '' ) ); ?>">
									</label>
									<label class="cf-subfield-row__control cf-subfield-rows">
										<span><?php esc_html_e( 'Rows', 'wppowersuite-lite' ); ?></span>
										<input type="number" min="1" max="30" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][rows]" value="<?php echo esc_attr( (string) ( $sub['rows'] ?? 4 ) ); ?>">
									</label>
									<label class="cf-subfield-row__control cf-subfield-new-lines">
										<span><?php esc_html_e( 'New lines', 'wppowersuite-lite' ); ?></span>
										<select name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][new_lines]">
											<option value="" <?php selected( (string) ( $sub['new_lines'] ?? '' ), '' ); ?>><?php esc_html_e( 'No formatting', 'wppowersuite-lite' ); ?></option>
											<option value="br" <?php selected( (string) ( $sub['new_lines'] ?? '' ), 'br' ); ?>><?php esc_html_e( 'Convert to <br>', 'wppowersuite-lite' ); ?></option>
											<option value="wpautop" <?php selected( (string) ( $sub['new_lines'] ?? '' ), 'wpautop' ); ?>><?php esc_html_e( 'Convert to paragraphs', 'wppowersuite-lite' ); ?></option>
										</select>
									</label>
									<label class="cf-subfield-row__control cf-subfield-width">
										<span><?php esc_html_e( 'Width', 'wppowersuite-lite' ); ?></span>
										<select name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][width]">
											<?php foreach ( $width_labels as $width_value => $width_label ) : ?>
												<option value="<?php echo esc_attr( (string) $width_value ); ?>" <?php selected( (string) ( $sub['width'] ?? '100' ), (string) $width_value ); ?>><?php echo esc_html( $width_label ); ?></option>
											<?php endforeach; ?>
										</select>
									</label>
									<label class="cf-subfield-row__control cf-subfield-choices">
										<span><?php esc_html_e( 'Choices', 'wppowersuite-lite' ); ?></span>
										<textarea rows="3" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][choices]" placeholder="value : Label"><?php echo esc_textarea( (string) ( $sub['choices'] ?? '' ) ); ?></textarea>
									</label>
									<label class="cf-check-label cf-subfield-required">
										<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[sub_fields][<?php echo esc_attr( (string) $si ); ?>][required]" value="1" <?php checked( ! empty( $sub['required'] ) ); ?>>
										<?php esc_html_e( 'Required', 'wppowersuite-lite' ); ?>
									</label>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
					<p><button type="button" class="button button-small cf-add-subfield"><?php esc_html_e( 'Add sub field', 'wppowersuite-lite' ); ?></button></p>
				</div>

				<div class="cf-field-control cf-field-nested cf-field-flexible"<?php echo $is_flexible ? '' : ' hidden'; ?>>
					<span class="cf-field-control__label"><?php esc_html_e( 'Layouts', 'wppowersuite-lite' ); ?></span>
					<div class="cf-layouts-list" data-prefix="<?php echo esc_attr( $name_prefix ); ?>">
						<?php foreach ( array_values( $layouts ) as $li => $layout ) : ?>
							<?php if ( ! is_array( $layout ) ) { continue; } ?>
							<div class="cf-layout-row" data-index="<?php echo esc_attr( (string) $li ); ?>">
								<div class="cf-layout-row__head">
									<label class="cf-layout-row__control">
										<span><?php esc_html_e( 'Layout label', 'wppowersuite-lite' ); ?></span>
										<input type="text" class="cf-layout-label-input" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][label]" value="<?php echo esc_attr( (string) ( $layout['label'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'Layout label', 'wppowersuite-lite' ); ?>">
									</label>
									<label class="cf-layout-row__control">
										<span><?php esc_html_e( 'Layout key', 'wppowersuite-lite' ); ?></span>
										<input type="text" class="cf-layout-key-input" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][key]" value="<?php echo esc_attr( (string) ( $layout['key'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'Layout key', 'wppowersuite-lite' ); ?>">
									</label>
									<label class="cf-layout-row__control">
										<span><?php esc_html_e( 'Display', 'wppowersuite-lite' ); ?></span>
										<select name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][display]">
											<option value="block" <?php selected( (string) ( $layout['display'] ?? 'block' ), 'block' ); ?>><?php esc_html_e( 'Block', 'wppowersuite-lite' ); ?></option>
											<option value="table" <?php selected( (string) ( $layout['display'] ?? 'block' ), 'table' ); ?>><?php esc_html_e( 'Table', 'wppowersuite-lite' ); ?></option>
											<option value="row" <?php selected( (string) ( $layout['display'] ?? 'block' ), 'row' ); ?>><?php esc_html_e( 'Row', 'wppowersuite-lite' ); ?></option>
										</select>
									</label>
									<label class="cf-layout-row__control">
										<span><?php esc_html_e( 'Min', 'wppowersuite-lite' ); ?></span>
										<input type="number" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][min]" value="<?php echo esc_attr( (string) ( $layout['min'] ?? 0 ) ); ?>" min="0">
									</label>
									<label class="cf-layout-row__control">
										<span><?php esc_html_e( 'Max', 'wppowersuite-lite' ); ?></span>
										<input type="number" class="small-text" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][max]" value="<?php echo esc_attr( (string) ( $layout['max'] ?? 0 ) ); ?>" min="0">
									</label>
									<button type="button" class="button-link cf-layout-remove" aria-label="<?php esc_attr_e( 'Remove layout', 'wppowersuite-lite' ); ?>">&times;</button>
								</div>
								<div class="cf-layout-row__fields">
									<span class="cf-field-control__label"><?php esc_html_e( 'Layout sub fields', 'wppowersuite-lite' ); ?></span>
									<div class="cf-subfields-list cf-layout-subfields-list" data-prefix="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>]">
										<?php
										$layout_subs = isset( $layout['sub_fields'] ) && is_array( $layout['sub_fields'] ) ? $layout['sub_fields'] : [];
										foreach ( array_values( $layout_subs ) as $lsi => $sub ) :
											if ( ! is_array( $sub ) ) {
												continue;
											}
											?>
											<div class="cf-subfield-row" data-index="<?php echo esc_attr( (string) $lsi ); ?>">
												<label class="cf-subfield-row__control">
													<span><?php esc_html_e( 'Type', 'wppowersuite-lite' ); ?></span>
													<select name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][type]">
														<?php foreach ( $allowed_sub_types as $st ) : ?>
															<option value="<?php echo esc_attr( $st ); ?>" <?php selected( (string) ( $sub['type'] ?? 'text' ), $st ); ?>><?php echo esc_html( Config::fieldTypes()[ $st ]['label'] ?? $st ); ?></option>
														<?php endforeach; ?>
													</select>
												</label>
												<label class="cf-subfield-row__control">
													<span><?php esc_html_e( 'Label', 'wppowersuite-lite' ); ?></span>
													<input type="text" class="cf-subfield-label-input" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][label]" value="<?php echo esc_attr( (string) ( $sub['label'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'Label', 'wppowersuite-lite' ); ?>">
												</label>
												<span class="cf-subfield-row__control cf-subfield-key-display">
													<span><?php esc_html_e( 'Field key', 'wppowersuite-lite' ); ?></span>
													<code><?php echo esc_html( (string) ( $sub['key'] ?? 'field' ) ); ?></code>
												</span>
												<input type="hidden" class="cf-subfield-key-input" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][key]" value="<?php echo esc_attr( (string) ( $sub['key'] ?? '' ) ); ?>"<?php echo (string) ( $sub['key'] ?? '' ) !== '' ? ' data-cf-persisted="1"' : ''; ?>>
												<input type="hidden" class="cf-subfield-name-input" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][name]" value="<?php echo esc_attr( (string) ( $sub['name'] ?? $sub['key'] ?? '' ) ); ?>">
												<button type="button" class="button-link cf-subfield-remove" aria-label="<?php esc_attr_e( 'Remove sub field', 'wppowersuite-lite' ); ?>">&times;</button>
												<div class="cf-subfield-row__details">
													<label class="cf-subfield-row__control cf-subfield-instructions">
														<span><?php esc_html_e( 'Instructions', 'wppowersuite-lite' ); ?></span>
														<input type="text" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][instructions]" value="<?php echo esc_attr( (string) ( $sub['instructions'] ?? '' ) ); ?>">
													</label>
													<label class="cf-subfield-row__control cf-subfield-placeholder">
														<span><?php esc_html_e( 'Placeholder', 'wppowersuite-lite' ); ?></span>
														<input type="text" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][placeholder]" value="<?php echo esc_attr( (string) ( $sub['placeholder'] ?? '' ) ); ?>">
													</label>
													<label class="cf-subfield-row__control cf-subfield-default">
														<span><?php esc_html_e( 'Default value', 'wppowersuite-lite' ); ?></span>
														<input type="text" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][default]" value="<?php echo esc_attr( (string) ( $sub['default'] ?? '' ) ); ?>">
													</label>
													<label class="cf-subfield-row__control cf-subfield-rows">
														<span><?php esc_html_e( 'Rows', 'wppowersuite-lite' ); ?></span>
														<input type="number" min="1" max="30" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][rows]" value="<?php echo esc_attr( (string) ( $sub['rows'] ?? 4 ) ); ?>">
													</label>
													<label class="cf-subfield-row__control cf-subfield-new-lines">
														<span><?php esc_html_e( 'New lines', 'wppowersuite-lite' ); ?></span>
														<select name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][new_lines]">
															<option value="" <?php selected( (string) ( $sub['new_lines'] ?? '' ), '' ); ?>><?php esc_html_e( 'No formatting', 'wppowersuite-lite' ); ?></option>
															<option value="br" <?php selected( (string) ( $sub['new_lines'] ?? '' ), 'br' ); ?>><?php esc_html_e( 'Convert to <br>', 'wppowersuite-lite' ); ?></option>
															<option value="wpautop" <?php selected( (string) ( $sub['new_lines'] ?? '' ), 'wpautop' ); ?>><?php esc_html_e( 'Convert to paragraphs', 'wppowersuite-lite' ); ?></option>
														</select>
													</label>
													<label class="cf-subfield-row__control cf-subfield-width">
														<span><?php esc_html_e( 'Width', 'wppowersuite-lite' ); ?></span>
														<select name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][width]">
															<?php foreach ( $width_labels as $width_value => $width_label ) : ?>
																<option value="<?php echo esc_attr( (string) $width_value ); ?>" <?php selected( (string) ( $sub['width'] ?? '100' ), (string) $width_value ); ?>><?php echo esc_html( $width_label ); ?></option>
															<?php endforeach; ?>
														</select>
													</label>
													<label class="cf-subfield-row__control cf-subfield-choices">
														<span><?php esc_html_e( 'Choices', 'wppowersuite-lite' ); ?></span>
														<textarea rows="3" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][choices]" placeholder="value : Label"><?php echo esc_textarea( (string) ( $sub['choices'] ?? '' ) ); ?></textarea>
													</label>
													<label class="cf-check-label cf-subfield-required">
														<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[layouts][<?php echo esc_attr( (string) $li ); ?>][sub_fields][<?php echo esc_attr( (string) $lsi ); ?>][required]" value="1" <?php checked( ! empty( $sub['required'] ) ); ?>>
														<?php esc_html_e( 'Required', 'wppowersuite-lite' ); ?>
													</label>
												</div>
											</div>
										<?php endforeach; ?>
									</div>
									<button type="button" class="button button-small cf-add-layout-subfield"><?php esc_html_e( 'Add sub field', 'wppowersuite-lite' ); ?></button>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
					<p><button type="button" class="button button-small cf-add-layout"><?php esc_html_e( 'Add layout', 'wppowersuite-lite' ); ?></button></p>
				</div>

				<div class="cf-field-control cf-field-clone"<?php echo $is_clone ? '' : ' hidden'; ?>>
					<label for="<?php echo esc_attr( $id_prefix ); ?>-clone-picker"><?php esc_html_e( 'Clone source', 'wppowersuite-lite' ); ?><?php cf_tip( __( 'Choose one or more fields or groups to reuse without duplicating their settings.', 'wppowersuite-lite' ) ); ?></label>
					<?php
					$clone_source_raw = (string) ( $field['clone_source'] ?? '' );
					$clone_selected   = array_filter( array_map( 'trim', explode( ',', $clone_source_raw ) ) );
					?>
					<select id="<?php echo esc_attr( $id_prefix ); ?>-clone-picker" class="cf-clone-source-picker" name="<?php echo esc_attr( $name_prefix ); ?>[clone_source][]" multiple size="6">
						<?php foreach ( $clone_targets as $tkey => $tlabel ) : ?>
							<?php if ( (string) $tkey === $group_key ) { continue; } ?>
							<option value="<?php echo esc_attr( $tkey ); ?>" <?php selected( in_array( (string) $tkey, $clone_selected, true ) ); ?>><?php echo esc_html( $tlabel ); ?></option>
						<?php endforeach; ?>
						<?php foreach ( $clone_selected as $selected_key ) : ?>
							<?php if ( ! isset( $clone_targets[ $selected_key ] ) ) : ?>
								<option value="<?php echo esc_attr( $selected_key ); ?>" selected><?php echo esc_html( $selected_key ); ?></option>
							<?php endif; ?>
						<?php endforeach; ?>
					</select>
					<div class="cf-field-grid cf-clone-settings">
						<p class="cf-field-control">
							<label for="<?php echo esc_attr( $id_prefix ); ?>-clone-display"><?php esc_html_e( 'Display', 'wppowersuite-lite' ); ?></label>
							<select id="<?php echo esc_attr( $id_prefix ); ?>-clone-display" name="<?php echo esc_attr( $name_prefix ); ?>[clone_display]">
								<option value="group" <?php selected( (string) ( $field['clone_display'] ?? 'group' ), 'group' ); ?>><?php esc_html_e( 'Group', 'wppowersuite-lite' ); ?></option>
								<option value="seamless" <?php selected( (string) ( $field['clone_display'] ?? 'group' ), 'seamless' ); ?>><?php esc_html_e( 'Seamless', 'wppowersuite-lite' ); ?></option>
							</select>
						</p>
						<p class="cf-field-control">
							<label for="<?php echo esc_attr( $id_prefix ); ?>-clone-layout"><?php esc_html_e( 'Layout', 'wppowersuite-lite' ); ?></label>
							<select id="<?php echo esc_attr( $id_prefix ); ?>-clone-layout" name="<?php echo esc_attr( $name_prefix ); ?>[clone_layout]">
								<option value="block" <?php selected( (string) ( $field['clone_layout'] ?? 'block' ), 'block' ); ?>><?php esc_html_e( 'Block', 'wppowersuite-lite' ); ?></option>
								<option value="table" <?php selected( (string) ( $field['clone_layout'] ?? 'block' ), 'table' ); ?>><?php esc_html_e( 'Table', 'wppowersuite-lite' ); ?></option>
								<option value="row" <?php selected( (string) ( $field['clone_layout'] ?? 'block' ), 'row' ); ?>><?php esc_html_e( 'Row', 'wppowersuite-lite' ); ?></option>
							</select>
						</p>
						<p class="cf-field-control">
							<label class="cf-check-label">
								<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[clone_prefix_label]" value="1" <?php checked( ! empty( $field['clone_prefix_label'] ) ); ?>>
								<?php esc_html_e( 'Prefix labels', 'wppowersuite-lite' ); ?>
							</label>
						</p>
						<p class="cf-field-control">
							<label class="cf-check-label">
								<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[clone_prefix_name]" value="1" <?php checked( ! empty( $field['clone_prefix_name'] ) ); ?>>
								<?php esc_html_e( 'Prefix names', 'wppowersuite-lite' ); ?>
							</label>
						</p>
					</div>
				</div>

				<div class="cf-field-control cf-field-bidirectional"<?php echo $is_relational ? '' : ' hidden'; ?>>
					<label class="cf-check-label">
						<input type="checkbox" name="<?php echo esc_attr( $name_prefix ); ?>[bidirectional]" value="1" <?php checked( ! empty( $field['bidirectional'] ) ); ?>>
						<?php esc_html_e( 'Bidirectional', 'wppowersuite-lite' ); ?>
						<?php cf_tip( __( 'Keeps linked items in sync both ways when you connect posts, terms, or users.', 'wppowersuite-lite' ) ); ?>
					</label>
					<input type="text" class="regular-text" name="<?php echo esc_attr( $name_prefix ); ?>[bidirectional_target]" value="<?php echo esc_attr( (string) ( $field['bidirectional_target'] ?? '' ) ); ?>" placeholder="<?php esc_attr_e( 'group_key|field_key', 'wppowersuite-lite' ); ?>" list="<?php echo esc_attr( $id_prefix ); ?>-bio-list">
					<datalist id="<?php echo esc_attr( $id_prefix ); ?>-bio-list">
						<?php foreach ( $field_targets as $tkey => $tlabel ) : ?>
							<option value="<?php echo esc_attr( $tkey ); ?>"><?php echo esc_html( $tlabel ); ?></option>
						<?php endforeach; ?>
					</datalist>
				</div>

				<div class="cf-field-control cf-field-conditional"<?php echo $is_display_only ? ' hidden' : ''; ?>>
					<label class="cf-check-label">
						<input type="checkbox" class="cf-conditional-enable" name="<?php echo esc_attr( $name_prefix ); ?>[conditional][enabled]" value="1" <?php checked( ! empty( $conditional['enabled'] ) ); ?>>
						<?php esc_html_e( 'Conditional logic', 'wppowersuite-lite' ); ?>
						<?php cf_tip( __( 'Show or hide this field based on another field in the same group.', 'wppowersuite-lite' ) ); ?>
					</label>
					<div class="cf-conditional-panel"<?php echo empty( $conditional['enabled'] ) ? ' hidden' : ''; ?>>
						<div class="cf-conditional-match">
							<span class="cf-conditional-match__label"><?php esc_html_e( 'Show this field when', 'wppowersuite-lite' ); ?></span>
							<select class="cf-conditional-match-select" name="<?php echo esc_attr( $name_prefix ); ?>[conditional][match]">
								<option value="all" <?php selected( (string) ( $conditional['match'] ?? 'all' ), 'all' ); ?>><?php esc_html_e( 'All rules match (AND)', 'wppowersuite-lite' ); ?></option>
								<option value="any" <?php selected( (string) ( $conditional['match'] ?? 'all' ), 'any' ); ?>><?php esc_html_e( 'Any rule matches (OR)', 'wppowersuite-lite' ); ?></option>
							</select>
						</div>
						<div class="cf-conditional-rules">
							<?php foreach ( array_values( (array) ( $conditional['rules'] ?? [] ) ) as $ci => $crule ) : ?>
								<?php if ( ! is_array( $crule ) ) { continue; } ?>
								<div class="cf-conditional-rule-row">
									<select name="<?php echo esc_attr( $name_prefix ); ?>[conditional][rules][<?php echo esc_attr( (string) $ci ); ?>][field]">
										<option value="">&mdash;</option>
										<?php foreach ( $field_key_opts as $fkey => $flabel ) : ?>
											<option value="<?php echo esc_attr( $fkey ); ?>" <?php selected( (string) ( $crule['field'] ?? '' ), $fkey ); ?>><?php echo esc_html( $flabel ); ?></option>
										<?php endforeach; ?>
									</select>
									<select name="<?php echo esc_attr( $name_prefix ); ?>[conditional][rules][<?php echo esc_attr( (string) $ci ); ?>][operator]">
										<?php foreach ( Config::conditionalOperators() as $cop => $cop_label ) : ?>
											<option value="<?php echo esc_attr( $cop ); ?>" <?php selected( (string) ( $crule['operator'] ?? '==' ), $cop ); ?>><?php echo esc_html( $cop_label ); ?></option>
										<?php endforeach; ?>
									</select>
									<span class="cf-conditional-value-wrap" data-cf-name="<?php echo esc_attr( $name_prefix ); ?>[conditional][rules][<?php echo esc_attr( (string) $ci ); ?>][value]" data-cf-selected="<?php echo esc_attr( (string) ( $crule['value'] ?? '' ) ); ?>">
										<input type="text" class="regular-text cf-conditional-value" name="<?php echo esc_attr( $name_prefix ); ?>[conditional][rules][<?php echo esc_attr( (string) $ci ); ?>][value]" value="<?php echo esc_attr( (string) ( $crule['value'] ?? '' ) ); ?>">
									</span>
									<button type="button" class="button-link cf-conditional-rule-remove" aria-label="<?php esc_attr_e( 'Remove condition', 'wppowersuite-lite' ); ?>">&times;</button>
								</div>
							<?php endforeach; ?>
						</div>
						<button type="button" class="button button-secondary button-small cf-add-conditional-rule"><span class="dashicons dashicons-plus-alt2" aria-hidden="true"></span><?php esc_html_e( 'Add condition', 'wppowersuite-lite' ); ?></button>
					</div>
				</div>
				</div>
			</div>
		</div>
		<?php
	}
}

if ( ! function_exists( __NAMESPACE__ . '\\cf_render_field_row_template' ) ) {
	/**
	 * Render the JS row template with an __INDEX__ placeholder.
	 *
	 * @param array<string, string> $post_types Post type choices for relational fields.
	 * @param array<string, string> $taxonomies Taxonomy choices for term fields.
	 * @param array<string, string> $field_targets Relationship target options.
	 * @param array<string, string> $clone_targets Clone target options.
	 */
	function cf_render_field_row_template( array $post_types = [], array $taxonomies = [], array $field_targets = [], array $clone_targets = [], array $taxonomy_terms = [] ): void {
		cf_render_field_row( '__INDEX__', Config::defaultField(), $post_types, $taxonomies, '', $field_targets, [], $clone_targets, $taxonomy_terms );
	}
}
