<?php
/**
 * Segment add/edit form template
 *
 * @link       https://personalizewp.com/
 * @since      3.2.0 Merged into PWP
 * @since      1.0.0
 *
 * @package    PersonalizeWP
 * @subpackage PersonalizeWP/Admin
 *
 * @var PersonalizeWP\Model\Segment $segment The instance of the Segment class.
 * @var array                       $data    Submitted sanitized form data
 */

defined( 'ABSPATH' ) || exit; // Exit if accessed directly.

use PersonalizeWP\Admin\PageSegments;
use PersonalizeWP\Admin\Utils;

if ( $this->getError( 'form' ) ) :
	?>
	<div class="alert alert-danger" role="alert">
		<?php echo implode( '<br>', array_map( 'esc_html', $this->getError( 'form' ) ) ); ?>
	</div>
	<?php
endif;
?>
<input type="hidden" name="pwp_form[is_active]" value="<?php echo (int) ( $segment->ID ? $segment->is_active : 1 ); ?>" />

<div class="row mb-3">
	<div class="col-12 col-lg-6">
		<div class="form-group mb-2">
			<label for="pwp_form[name]"><?php esc_html_e( 'Segment Name', 'personalizewp' ); ?></label>

			<input type="text" required id="pwp_form[name]" name="pwp_form[name]" value="<?php echo esc_attr( $segment->name ); ?>"
				class="form-control <?php echo ( $this->getError( 'name' ) ? esc_attr( 'is-invalid' ) : '' ); ?>" />

			<?php if ( $this->getError( 'name' ) ) : ?>
				<div class="invalid-feedback">
					<span class="dashicons dashicons-warning"></span>
					<?php echo esc_html( implode( ', ', $this->getError( 'name' ) ) ); ?>
				</div>
			<?php endif; ?>
		</div>
	</div>
</div>


<div class="row mb-3">
	<div class="col-12 col-lg-6">
		<div class="form-group mb-2 category-dropdown">
			<label for="pwp_form_type"><?php esc_html_e( 'Type', 'personalizewp' ); ?></label>

			<select required name="pwp_form[type]" id="pwp_form_type" class="form-control <?php echo ( $this->getError( 'type' ) ? esc_attr( 'is-invalid' ) : '' ); ?>">
				<?php
				$options = [ '' => __( '-- Select segment type --', 'personalizewp' ) ] + PageSegments::get_segment_types();
				foreach ( $options as $opt_val => $opt_label ) {
					printf(
						'<option value="%1$s" %2$s>%3$s</option>',
						esc_attr( $opt_val ),
						selected( $segment->type === $opt_val, true, false ),
						esc_html( $opt_label )
					);
				}
				?>
			</select>

			<?php if ( $this->getError( 'type' ) ) : ?>
				<div class="invalid-feedback">
					<span class="dashicons dashicons-warning"></span>
					<?php echo esc_html( implode( ', ', $this->getError( 'type' ) ) ); ?>
				</div>
			<?php endif; ?>
		</div>
	</div>
</div>

<div class="row" id="condition-operator" hidden>
	<div class="col-12 col-lg-6">
		<div class="form-group mb-2 category-dropdown">

			<label for="condition-operator-select"><?php esc_html_e( 'Condition Matching', 'personalizewp' ); ?></label>
			<p class="description"><?php esc_html_e( 'Add the visitor to the segment if:', 'personalizewp' ); ?></p>
			<select name="pwp_form[operator]" id="condition-operator-select">
				<option value="ANY" <?php selected( 'ANY', strtoupper( $segment->operator ) ); ?>><?php esc_html_e( 'Any of the conditions match (OR logic)', 'personalizewp' ); ?></option>
				<option value="ALL" <?php selected( 'ALL', strtoupper( $segment->operator ) ); ?>><?php esc_html_e( 'All of the conditions match (AND logic)', 'personalizewp' ); ?></option>
			</select>

		</div>
	</div>
</div>

<div class="row js">
	<div class="col-12 col-xl-10">
		<div class="form-group mb-2">
			<?php
			$conditions = ! empty( $segment->conditions ) ? json_decode( $segment->conditions, true ) : [];
			$cons_count = count( $conditions );

			// We output all form variants for all segment types. JS then selectively changes what
			// "conditions" are shown based on type; as well as creating new rows from a <template>
			// specific to each condition type, or deleting rows as needed.
			?>

			<div <?php echo ( 'lead_score' !== $segment->type ) ? 'hidden' : ''; ?>
					data-condition-count="<?php echo (int) ( 'lead_score' === $segment->type ? $cons_count : 0 ); ?>"
					data-condition-type="lead_score" class="conditions-container">

				<?php
				$min_score = 0;
				$max_score = 0;
				// Re-populate form with incorrect submissions
				if ( 'lead_score' === $segment->type && ! empty( $data['lead_score'] ) ) :
					list( 'min' => $min_score, 'max' => $max_score ) = $data['lead_score'];
				elseif ( 'lead_score' === $segment->type && ! empty( $conditions ) ) :
					// Else populate with stored Segment conditions.
					list( 'min' => $min_score, 'max' => $max_score ) = $conditions;
				endif;
				// Ensure type.
				$min_score = (int) $min_score;
				$max_score = (int) $max_score;
				?>
				<div data-condition="row" class="condition mb-3 mb-sm-3">
					<div class="text-field-wrapper">
						<label for="pwp_form_lead_score_min"><?php esc_html_e( 'Min Score', 'personalizewp' ); ?></label>
						<input data-type="lead_score" required type="number" inputmode="numeric" name="pwp_form[lead_score][min]" id="pwp_form_lead_score_min" class="form-control medium-input"
							placeholder="<?php esc_attr_e( 'Enter minimum', 'personalizewp' ); ?>" value="<?php echo (int) $min_score; ?>" maxlength="20" />
					</div>
					<div class="text-field-wrapper">
						<label for="pwp_form_lead_score_max"><?php esc_html_e( 'Max Score', 'personalizewp' ); ?></label>
						<input data-type="lead_score" type="number" inputmode="numeric" name="pwp_form[lead_score][max]" id="pwp_form_lead_score_max" class="form-control medium-input"
							placeholder="<?php esc_attr_e( 'Enter maximum', 'personalizewp' ); ?>" value="<?php echo ( $max_score ) ? (int) $max_score : ''; ?>" maxlength="20" />
					</div>
				</div>
				<p class="description"><?php esc_html_e( 'Enter a minimum score for when a visitor will be put into the segment. And an optional maximum to create a valid range, outside of which they will be removed from the segment.', 'personalizewp' ); ?></p>
			</div><!-- .conditions-container -->

			<div <?php echo ( 'location' !== $segment->type ) ? 'hidden' : ''; ?>
					data-condition-count="<?php echo (int) ( 'location' === $segment->type ? $cons_count : 0 ); ?>"
					data-condition-type="location" class="conditions-container">
				<label><?php esc_html_e( 'Country', 'personalizewp' ); ?></label>
				<p class="description"><?php esc_html_e( 'Choose a location from the dropdown', 'personalizewp' ); ?></p>
				<?php
				$country_opts = [ '' => __( '-- Select a country --', 'personalizewp' ) ] + \personalizewp()->get_countries();
				?>

				<template hidden>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<select required data-type="location" name="pwp_form[location][]" class="form-control chosen-select">
							<?php
							foreach ( $country_opts as $opt_val => $opt_label ) :
								printf(
									'<option value="%1$s">%2$s</option>',
									esc_attr( $opt_val ),
									esc_html( $opt_label )
								);
							endforeach;
							?>
						</select>
						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
				</template>

				<?php
				// Always show a single entry if no pre-existing conditions
				$locations = ( 'location' === $segment->type && ! empty( $conditions ) ) ? $conditions : [ '' ];
				foreach ( $locations as $location ) :
					?>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<select required data-type="location" name="pwp_form[location][]" class="form-control chosen-select">
							<?php
							foreach ( $country_opts as $opt_val => $opt_label ) :
								printf(
									'<option value="%1$s" %2$s>%3$s</option>',
									esc_attr( $opt_val ),
									selected( $location === $opt_val, true, false ),
									esc_html( $opt_label )
								);
							endforeach;
							?>
						</select>
						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
					<?php
				endforeach;
				?>
			</div><!-- .conditions-container -->

			<!-- Post types -->
			<?php
			$public_post_types = get_post_types( array( 'public' => true ), 'objects' );
			$post_type_opts    = [ '' => __( '-- Select a post type --', 'personalizewp' ) ];
			foreach ( $public_post_types as $cpt ) {
				$post_type_opts[ $cpt->name ] = $cpt->label;
			}
			unset( $public_post_types, $cpt );
			?>
			<div <?php echo ( 'post_type' !== $segment->type ) ? 'hidden' : ''; ?>
				data-condition-count="<?php echo (int) ( 'post_type' === $segment->type ? $cons_count : 0 ); ?>"
				data-condition-type="post_type" class="conditions-container">
				<label><?php esc_html_e( 'Post Types', 'personalizewp' ); ?></label>

				<template hidden>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<select required data-type="post_type" name="pwp_form[post_type][]" class="form-control chosen-select">
							<?php
							foreach ( $post_type_opts as $opt_val => $opt_label ) :
								printf(
									'<option value="%1$s">%2$s</option>',
									esc_attr( $opt_val ),
									esc_html( $opt_label )
								);
							endforeach;
							?>
						</select>
						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
				</template>

				<?php
				// Always show a single entry if no pre-existing conditions
				$post_types = ( 'post_type' === $segment->type && ! empty( $conditions ) ) ? $conditions : [ '' ];
				// Looping through condition post types.
				foreach ( $post_types as $cpt_cond ) :
					?>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<select required data-type="post_type" name="pwp_form[post_type][]" class="form-control chosen-select">
							<?php
							foreach ( $post_type_opts as $opt_val => $opt_label ) :
								printf(
									'<option value="%1$s" %2$s>%3$s</option>',
									esc_attr( $opt_val ),
									selected( $cpt_cond === $opt_val, true, false ),
									esc_html( $opt_label )
								);
							endforeach;
							?>
						</select>
						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
					<?php
				endforeach;
				?>
			</div><!-- .conditions-container -->
			<!-- end post types -->

			<!-- Taxonomy -->
			<?php
			$public_taxes  = get_taxonomies(
				array(
					'public'  => true,
					'rewrite' => true,
				),
				'objects'
			);
			$taxonomy_opts = [ '' => __( '-- Select a taxonomy --', 'personalizewp' ) ];
			foreach ( $public_taxes as $public_tax ) {
				$taxonomy_opts[ $public_tax->name ] = $public_tax->label;
			}
			asort( $taxonomy_opts );
			unset( $public_taxes, $public_tax );

			$taxonomies = [];
			if ( 'taxonomy' === $segment->type && ! empty( $conditions ) ) :
				// Pre-process existing conditions to convert term IDs to value<=>label pairs
				foreach ( $conditions as $tax_cond => $maybe_term_ids ) :
					$taxonomies[ $tax_cond ] = [];
					if ( empty( $maybe_term_ids ) ) {
						continue; // Skip term IDs
					}
					// Sanitise term ids from db.
					$maybe_term_ids = array_unique( array_filter( array_map( 'intval', $maybe_term_ids ) ) );
					foreach ( $maybe_term_ids as $term_id ) :
						$term_cond = get_term( $term_id, $tax_cond );
						// For existing term and taxonomy.
						if ( is_a( $term_cond, '\WP_Term' ) ) :
							$taxonomies[ $tax_cond ][] = array(
								'value' => (string) $term_cond->term_id, // Web component standardises on strings
								'text'  => esc_html( $term_cond->name ),
							);
						endif;
					endforeach;
				endforeach;
			endif;
			?>
			<div <?php echo ( 'taxonomy' !== $segment->type ) ? 'hidden' : ''; ?>
				data-condition-count="<?php echo (int) ( 'taxonomy' === $segment->type ? $cons_count : 0 ); ?>"
				data-condition-type="taxonomy" class="conditions-container">
				<label><?php esc_html_e( 'Taxonomies', 'personalizewp' ); ?></label>

				<template hidden>
					<div data-condition="row">
						<div class="condition mb-3 mb-sm-3">
							<select required data-type="taxonomy" name="pwp_form[taxonomy][taxonomy][]" class="form-control chosen-select">
								<?php
								foreach ( $taxonomy_opts as $opt_val => $opt_label ) :
									printf(
										'<option value="%1$s">%2$s</option>',
										esc_attr( $opt_val ),
										esc_html( $opt_label )
									);
								endforeach;
								?>
							</select>
							<div class="button-conditions-wrapper">
								<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
									<?php Utils::svg_icon( 'bin' ); ?>
								</button>
							</div>
						</div>
						<div class="condition mb-3 mb-sm-3">
							<auto-complete
								mode="term" taxonomy="" disabled
								placeholder="<?php esc_attr_e( 'Search for a term', 'personalizewp' ); ?>">

								<template hidden>
									<input type="hidden" name="pwp_form[taxonomy][%TAXONOMY%][]" value="" />
									<span></span>
									<button type="button" class="button" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
										<?php Utils::svg_icon( 'cross' ); ?>
									</button>
								</template>
							</auto-complete>
						</div>
					</div>
				</template>

				<?php
				// Always show a single entry if no pre-existing conditions
				$taxonomies = ( 'taxonomy' === $segment->type && ! empty( $taxonomies ) ) ? $taxonomies : [ '' => [] ];
				// Looping through condition taxonomies, and optional terms.
				foreach ( $taxonomies as $tax_cond => $terms ) :
					?>
					<div data-condition="row">
						<div class="condition mb-3 mb-sm-3">
							<select data-type="taxonomy" name="pwp_form[taxonomy][taxonomy][]" class="form-control chosen-select">
								<?php
								foreach ( $taxonomy_opts as $opt_val => $opt_label ) :
									printf(
										'<option value="%1$s" %2$s>%3$s</option>',
										esc_attr( $opt_val ),
										selected( $tax_cond === $opt_val, true, false ),
										esc_html( $opt_label )
									);
								endforeach;
								?>
							</select>
							<div class="button-conditions-wrapper">
								<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
									<?php Utils::svg_icon( 'bin' ); ?>
								</button>
							</div>
						</div>
						<div class="condition mb-3 mb-sm-3">
							<auto-complete
								mode="term" taxonomy="<?php echo esc_attr( $tax_cond ); ?>"
								placeholder="<?php esc_attr_e( 'Search for a term', 'personalizewp' ); ?>"
								content="<?php echo esc_attr( wp_json_encode( $terms ) ); ?>">

								<template hidden>
									<input type="hidden" name="pwp_form[taxonomy][<?php echo esc_attr( ! empty( $tax_cond ) ? $tax_cond : '%TAXONOMY%' ); ?>][]" value="" />
									<span></span>
									<button type="button" class="button" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
										<?php Utils::svg_icon( 'cross' ); ?>
									</button>
								</template>
							</auto-complete>
						</div>
					</div>
					<?php
				endforeach;
				?>
			</div><!-- .conditions-container -->
			<!-- end Taxonomy -->

			<?php
			$products = [];
			if ( 'product' === $segment->type && ! empty( $conditions ) ) :
				foreach ( $conditions as $_con_plugin => $_con_args ) :
					foreach ( $_con_args as $_con_type => $_con_ids ) :
						foreach ( $_con_ids as $_con_id ) :
							if ( is_numeric( $_con_id ) ) :
								// e.g. `woocommerce:product:1`
								$_title     = Utils::get_product_title( $_con_id, $_con_type, $_con_plugin );
								$products[] = array(
									'value' => sprintf(
										'%1$s:%2$s:%3$d',
										$_con_plugin,
										$_con_type,
										$_con_id
									),
									'text'  => esc_html( ! empty( $_title ) ? $_title : __( 'Unknown', 'personalizewp' ) ),
								);
							endif;
						endforeach;
					endforeach;
				endforeach;
			endif;
			?>
			<div <?php echo ( 'product' !== $segment->type ) ? 'hidden' : ''; ?>
					data-condition-count="<?php echo (int) ( 'product' === $segment->type ? 1 : 0 ); ?>"
					data-condition-type="product" class="conditions-container">
				<label for="auto-complete-product"><?php esc_html_e( 'Product or Category', 'personalizewp' ); ?></label>
				<p class="description"><?php esc_html_e( 'Search for and add a category or product', 'personalizewp' ); ?></p>
				<div class="condition mb-3 mb-sm-3">
					<auto-complete
						mode="product" label-id="auto-complete-product"
						placeholder="<?php esc_attr_e( 'Search for a category or product', 'personalizewp' ); ?>"
						content="<?php echo esc_attr( wp_json_encode( $products ) ); ?>">

						<template hidden>
							<input type="hidden" name="pwp_form[product][]" value="" />
							<span></span>
							<button type="button" class="button" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'cross' ); ?>
							</button>
						</template>
					</auto-complete>
				</div>
			</div><!-- .conditions-container -->

			<div <?php echo ( 'referer' !== $segment->type ) ? 'hidden' : ''; ?>
					data-condition-count="<?php echo (int) ( 'referer' === $segment->type ? $cons_count : 0 ); ?>"
					data-condition-type="referer" class="conditions-container">
				<label><?php esc_html_e( 'URL', 'personalizewp' ); ?></label>
				<p class="description"><?php esc_html_e( 'Add the URL below that you want to match', 'personalizewp' ); ?></p>

				<template hidden>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<input type="text" required data-type="referer" name="pwp_form[referer][url][]" class="form-control <?php echo ( $this->getError( 'name' ) ? esc_attr( 'is-invalid' ) : '' ); ?>"
							value="" placeholder="<?php esc_attr_e( 'e.g. facebook.com', 'personalizewp' ); ?>" />

						<label for="pwp_form_referer_{{ID}}" class="nowrap">
							<input type="checkbox" data-type="referer" id="pwp_form_referer_{{ID}}" name="pwp_form[referer][regex][]" value="regex" class="form-control" />
							<?php esc_html_e( 'Is Regex?', 'personalizewp' ); ?>
						</label>
						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
				</template>

				<?php
				$row_count = 0;
				// Always show a single entry if no pre-existing conditions
				$referers = ( 'referer' === $segment->type && ! empty( $conditions ) ) ? $conditions : [ '' => '' ];
				foreach ( $referers as $referer_url => $referer_opts ) :
					$is_regex = ! empty( $referer_opts ) && 'regex' === $referer_opts;
					?>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<input type="text" required data-type="referer" name="pwp_form[referer][url][]" class="form-control <?php echo ( $this->getError( 'name' ) ? esc_attr( 'is-invalid' ) : '' ); ?>"
							value="<?php echo esc_attr( $referer_url ); ?>" placeholder="<?php esc_attr_e( 'e.g. facebook.com', 'personalizewp' ); ?>" />

						<label for="pwp_form_referer_<?php echo esc_attr( $row_count ); ?>" class="nowrap">
							<input type="checkbox" data-type="referer" id="pwp_form_referer_<?php echo esc_attr( $row_count ); ?>" name="pwp_form[referer][regex][]" value="regex" class="form-control"
							<?php checked( $is_regex ); ?> />
							<?php esc_html_e( 'Is Regex?', 'personalizewp' ); ?>
						</label>

						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
					<?php
				endforeach;
				?>
			</div><!-- .conditions-container -->

			<?php
			$forms = [];
			if ( 'form' === $segment->type && ! empty( $conditions ) ) :
				foreach ( $conditions as $form_id => $current_form_opts ) :
					if ( is_numeric( $form_id ) ) :
						// e.g. `gravityforms:1`
						$form_title = Utils::get_form_title( $form_id, $current_form_opts );
						$forms[]    = array(
							'value' => sprintf(
								'%1$s:%2$d',
								$current_form_opts,
								$form_id
							),
							'text'  => esc_html( ! empty( $form_title ) ? $form_title : __( 'Unknown', 'personalizewp' ) ),
						);
					endif;
				endforeach;
			endif;
			?>
			<div <?php echo ( 'form' !== $segment->type ) ? 'hidden' : ''; ?>
					data-condition-count="<?php echo (int) ( 'form' === $segment->type ? 1 : 0 ); ?>"
					data-condition-type="form" class="conditions-container">
				<label for="auto-complete-form"><?php esc_html_e( 'Form', 'personalizewp' ); ?></label>
				<p class="description"><?php esc_html_e( 'Search for and add an existing form', 'personalizewp' ); ?></p>
				<div class="condition mb-3 mb-sm-3">
					<auto-complete
						mode="form" label-id="auto-complete-form"
						placeholder="<?php esc_attr_e( 'Search for a form', 'personalizewp' ); ?>"
						content="<?php echo esc_attr( wp_json_encode( $forms ) ); ?>">

						<template hidden>
							<input type="hidden" name="pwp_form[form][]" value="" />
							<span></span>
							<button type="button" class="button" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'cross' ); ?>
							</button>
						</template>
					</auto-complete>
				</div>
			</div><!-- .conditions-container -->

			<div <?php echo ( 'query' !== $segment->type ) ? 'hidden' : ''; ?>
					data-condition-count="<?php echo (int) ( 'query' === $segment->type ? $cons_count : 0 ); ?>"
					data-condition-type="query" class="conditions-container">
				<label><?php esc_html_e( 'Key / Value', 'personalizewp' ); ?></label>
				<p class="description"><?php esc_html_e( 'Add a key / value pair that should appear in the query string', 'personalizewp' ); ?></p>

				<template hidden>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<input type="text" required data-type="page" name="pwp_form[query][key][]" class="form-control" placeholder="<?php esc_attr_e( 'Enter key', 'personalizewp' ); ?>" value="" />

						<input type="text" data-type="page" name="pwp_form[query][value][]" class="form-control" placeholder="<?php esc_attr_e( 'Enter optional value', 'personalizewp' ); ?>" value="" />

						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
				</template>

				<?php
				$queries = ( 'query' === $segment->type && ! empty( $conditions ) ) ? $conditions : [ '' => '' ];
				foreach ( $queries as $query_key => $query_values ) :
					foreach ( (array) $query_values as $query_value ) :
						?>
						<div data-condition="row" class="condition mb-3 mb-sm-3">
							<input type="text" required data-type="page" name="pwp_form[query][key][]" class="form-control" placeholder="<?php esc_attr_e( 'Enter key', 'personalizewp' ); ?>"
								value="<?php echo esc_attr( $query_key ); ?>" />

							<input type="text" data-type="page" name="pwp_form[query][value][]" class="form-control" placeholder="<?php esc_attr_e( 'Enter optional value', 'personalizewp' ); ?>"
								value="<?php echo esc_attr( $query_value ); ?>" />

							<div class="button-conditions-wrapper">
								<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
									<?php Utils::svg_icon( 'bin' ); ?>
								</button>
							</div>
						</div>
						<?php
					endforeach;
				endforeach;
				?>
			</div><!-- .conditions-container -->

			<?php
			$cpt_pages = ( 'page' === $segment->type && ! empty( $conditions ) ) ? $conditions : [ '' ];
			// Split conditions into IDs and strings.
			$page_ids  = [];
			$page_urls = [];
			foreach ( $cpt_pages as $index => $cpt_page ) :
				if ( is_numeric( $cpt_page ) ) :
					$page_ids[] = array(
						'value' => (string) $cpt_page, // Web component standardises on strings
						'text'  => get_the_title( $cpt_page ),
					);
				elseif ( is_numeric( $index ) && ! is_numeric( $cpt_page ) ) :
					// Legacy format of URL, without options.
					$page_urls[$cpt_page] = '';
				elseif ( ! is_numeric( $index ) && is_string( $index ) ) :
					// Newer format, index *is* URL.
					$page_urls[$index] = $cpt_page;
				endif;
			endforeach;
			if ( empty( $page_urls ) ) :
				// Always ensure we display at least 1 plain URL input
				$page_urls = [ '' => '' ];
			endif;
			?>
			<div <?php echo ( 'page' !== $segment->type ) ? 'hidden' : ''; ?>
					data-condition-count="<?php echo (int) ( 'page' === $segment->type ? count( $page_urls ) : 0 ); ?>"
					data-condition-type="page" class="conditions-container">
				<label for="auto-complete-page"><?php esc_html_e( 'Page / Post', 'personalizewp' ); ?></label>
				<p class="description"><?php esc_html_e( 'Search for and add an existing page or post', 'personalizewp' ); ?></p>
				<div class="condition mb-3 mb-sm-3">
					<auto-complete
						mode="post" label-id="auto-complete-page"
						placeholder="<?php esc_attr_e( 'Search for a post or page', 'personalizewp' ); ?>"
						content="<?php echo esc_attr( wp_json_encode( $page_ids ) ); ?>">

						<template hidden>
							<input type="hidden" name="pwp_form[page][id][]" value="" />
							<span></span>
							<button type="button" class="button" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'cross' ); ?>
							</button>
						</template>
					</auto-complete>
				</div>

				<p class="description"><?php esc_html_e( 'Or add your own URL in the plain text input below', 'personalizewp' ); ?></p>
				<?php
				$row_count = 0;
				foreach ( $page_urls as $page_url => $url_opts ) :
					$is_regex = ! empty( $url_opts ) && 'regex' === $url_opts;
					?>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<input type="text" data-type="page" name="pwp_form[page][url][]" class="form-control"
							value="<?php echo esc_attr( $page_url ); ?>" />

						<label for="pwp_form_url_regex_<?php echo esc_attr( $row_count ); ?>" class="nowrap">
							<input type="checkbox" data-type="referer" id="pwp_form_url_regex_<?php echo esc_attr( $row_count ); ?>" name="pwp_form[page][regex][]" value="regex" class="form-control"
							<?php checked( $is_regex ); ?> />
							<?php esc_html_e( 'Is Regex?', 'personalizewp' ); ?>
						</label>

						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
					<?php
				endforeach;
				?>
				<template hidden>
					<div data-condition="row" class="condition mb-3 mb-sm-3">
						<input type="text" data-type="page" name="pwp_form[page][url][]" class="form-control" value="" />

						<label for="pwp_form_url_regex_{{ID}}" class="nowrap">
							<input type="checkbox" data-type="referer" id="pwp_form_url_regex_{{ID}}" name="pwp_form[page][regex][]" value="regex" class="form-control" />
							<?php esc_html_e( 'Is Regex?', 'personalizewp' ); ?>
						</label>

						<div class="button-conditions-wrapper">
							<button type="button" value="remove" class="remove-condition" aria-label="<?php esc_attr_e( 'Remove item', 'personalizewp' ); ?>">
								<?php Utils::svg_icon( 'bin' ); ?>
							</button>
						</div>
					</div>
				</template>
			</div><!-- .conditions-container -->

			<?php
			$condition_errors = $this->getError( 'conditions' );
			if ( ! empty( $condition_errors ) ) :
				?>
				<div class="form-control is-invalid" style="display: none;"><!-- Used to show the next node --></div>
				<div class="invalid-feedback">
					<span class="dashicons dashicons-warning"></span>
					<?php echo esc_html( implode( ', ', $condition_errors ) ); ?>
				</div>
				<?php
			endif;
			?>
		</div>
	</div>
</div>

<div id="condition-addition" class="mb-3" hidden>
	<button type="button" value="add" class="add-condition">&plus; <?php esc_html_e( 'Add', 'personalizewp' ); ?></button>
</div>

<div id="form-actions">
	<?php if ( 0 !== (int) $segment->ID ) : ?>
		<button type="submit" value="save" class="primary btn"><?php esc_html_e( 'Save Changes', 'personalizewp' ); ?></button>
		<a href="<?php echo esc_url( admin_url( PageSegments::$index_url ) ); ?>" class="secondary btn"><?php esc_html_e( 'Cancel', 'personalizewp' ); ?></a>
	<?php else : ?>
		<button type="submit" value="create" class="primary btn"><?php esc_html_e( 'Create Segment', 'personalizewp' ); ?></button>
		<a href="<?php echo esc_url( admin_url( PageSegments::$index_url ) ); ?>" class="secondary btn"><?php esc_html_e( 'Cancel', 'personalizewp' ); ?></a>
	<?php endif; ?>
</div>
