<?php
/**
 * Custom Fields - add/edit view (field group builder).
 *
 * Layout: group identity first, the fields builder front and center, and a
 * collapsible Settings section (Location / Presentation / Usage tabs) below.
 *
 * @package CustomFields
 *
 * @var \CustomFields\Admin                     $admin
 * @var array<string, mixed>                    $definition
 * @var bool                                    $is_edit
 * @var array{type: string, text: string}|null  $notice
 * @var array<int, string>                      $errors
 * @var array<string, string>                   $post_types
 * @var array<string, string>                   $taxonomies
 * @var array<string, string>                   $page_templates
 */

namespace CustomFields;

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

require_once __DIR__ . '/field-row.php';

$definition = isset( $definition ) && is_array( $definition ) ? $definition : Config::defaultGroup();
$is_edit    = ! empty( $is_edit );
$errors     = isset( $errors ) && is_array( $errors ) ? $errors : [];
$post_types = isset( $post_types ) && is_array( $post_types ) ? $post_types : [];
$taxonomies     = isset( $taxonomies ) && is_array( $taxonomies ) ? $taxonomies : [];
$page_templates = isset( $page_templates ) && is_array( $page_templates ) ? $page_templates : [];

$key         = (string) ( $definition['key'] ?? '' );
$title       = (string) ( $definition['title'] ?? '' );
$enabled     = ! empty( $definition['enabled'] );
$position    = (string) ( $definition['position'] ?? 'normal' );
$priority    = (string) ( $definition['priority'] ?? 'default' );
$style       = (string) ( $definition['style'] ?? 'default' );
$location    = isset( $definition['location'] ) && is_array( $definition['location'] ) ? $definition['location'] : [];
$location_rules = LocationRules::get( $definition );
$loc_screen     = (string) ( $location_rules['screen'] ?? 'post' );
$loc_match      = (string) ( $location_rules['match'] ?? 'all' );
$loc_rules      = isset( $location_rules['rules'] ) && is_array( $location_rules['rules'] ) ? $location_rules['rules'] : [];
$fields         = isset( $definition['fields'] ) && is_array( $definition['fields'] ) ? $definition['fields'] : [];
$usage_fields   = [];
if ( $is_edit && $key !== '' ) {
	foreach ( array_values( $fields ) as $field ) {
		if ( ! is_array( $field ) ) {
			continue;
		}
		$type = (string) ( $field['type'] ?? 'text' );
		if ( ! Config::storesValue( $type ) ) {
			continue;
		}
		$storage_key = (string) ( $field['name'] ?? '' );
		if ( $storage_key === '' ) {
			$storage_key = (string) ( $field['key'] ?? '' );
		}
		if ( $storage_key === '' ) {
			continue;
		}
		$usage_fields[] = [
			'label' => (string) ( $field['label'] ?? $storage_key ),
			'key'   => $storage_key,
		];
	}
}
$usage_sample_key = $usage_fields[0]['key'] ?? 'field_key';
$field_targets  = isset( $field_targets ) && is_array( $field_targets ) ? $field_targets : [];
$field_key_opts = isset( $field_key_opts ) && is_array( $field_key_opts ) ? $field_key_opts : [];
$rule_value_choices = isset( $rule_value_choices ) && is_array( $rule_value_choices ) ? $rule_value_choices : [];

/**
 * Render the rule value control: a dropdown when the parameter has a known
 * set of values, a text input otherwise. Both controls are always present;
 * the inactive one is hidden and disabled so it never submits. JS swaps
 * them when the parameter changes.
 *
 * @param string $param Rule parameter.
 * @param string $value Current value.
 * @param string $name  Input name attribute.
 */
$cf_render_rule_value = static function ( string $param, string $value, string $name ) use ( $rule_value_choices ): void {
	$choices    = isset( $rule_value_choices[ $param ] ) && is_array( $rule_value_choices[ $param ] ) ? $rule_value_choices[ $param ] : [];
	$use_select = $choices !== [];
	?>
	<select class="cf-rule-value-select" name="<?php echo esc_attr( $name ); ?>"<?php echo $use_select ? '' : ' hidden disabled'; ?>>
		<?php if ( $value !== '' && ! isset( $choices[ $value ] ) ) : ?>
			<option value="<?php echo esc_attr( $value ); ?>" selected><?php echo esc_html( $value ); ?></option>
		<?php endif; ?>
		<?php foreach ( $choices as $c_val => $c_label ) : ?>
			<option value="<?php echo esc_attr( (string) $c_val ); ?>" <?php selected( $value, (string) $c_val ); ?>><?php echo esc_html( (string) $c_label ); ?></option>
		<?php endforeach; ?>
	</select>
	<input type="text" class="regular-text cf-rule-value" name="<?php echo esc_attr( $name ); ?>" value="<?php echo esc_attr( $use_select ? '' : $value ); ?>" placeholder="<?php esc_attr_e( 'Value', 'wp-powersuite' ); ?>"<?php echo $use_select ? ' hidden disabled' : ''; ?>>
	<?php
};
?>
<div class="wrap wpps-cf wpps-cf-edit">
	<hr class="wp-header-end" style="margin:0;padding:0;border:none;height:0;overflow:hidden;">
	<?php
	\WP_PowerSuite\Admin\PageHero::render_for_module(
		[
			'icon'    => 'dashicons-list-view',
			'title'   => $is_edit ? __( 'Edit Field Group', 'wp-powersuite' ) : __( 'Add Field Group', 'wp-powersuite' ),
			'tagline' => __( 'Define fields and choose where they appear.', 'wp-powersuite' ),
			'actions' => [
				[
					'label' => __( 'All Field Groups', 'wp-powersuite' ),
					'url'   => $admin->url(),
					'icon'  => 'dashicons-arrow-left-alt',
				],
			],
		]
	);
	?>

	<?php if ( $notice !== null ) : ?>
		<div class="notice notice-<?php echo esc_attr( $notice['type'] ); ?> is-dismissible">
			<p><?php echo esc_html( $notice['text'] ); ?></p>
		</div>
	<?php endif; ?>

	<?php
	$prefill_post_type = isset( $_GET['for_post_type'] ) ? sanitize_key( wp_unslash( (string) $_GET['for_post_type'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
	$prefill_taxonomy  = isset( $_GET['for_taxonomy'] ) ? sanitize_key( wp_unslash( (string) $_GET['for_taxonomy'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
	if ( ! $is_edit && $prefill_post_type !== '' && post_type_exists( $prefill_post_type ) ) :
		$pt_object = get_post_type_object( $prefill_post_type );
		$pt_label  = $pt_object instanceof \WP_Post_Type ? (string) $pt_object->labels->singular_name : $prefill_post_type;
		?>
		<div class="notice notice-info">
			<p>
				<?php
				printf(
					/* translators: %s: post type singular label. */
					esc_html__( 'Location rules are pre-filled for the “%s” post type. Add your fields and save the group.', 'wp-powersuite' ),
					esc_html( $pt_label )
				);
				?>
			</p>
		</div>
	<?php elseif ( ! $is_edit && $prefill_taxonomy !== '' && taxonomy_exists( $prefill_taxonomy ) ) : ?>
		<?php
		$tax_object = get_taxonomy( $prefill_taxonomy );
		$tax_label  = $tax_object instanceof \WP_Taxonomy ? (string) $tax_object->labels->singular_name : $prefill_taxonomy;
		?>
		<div class="notice notice-info">
			<p>
				<?php
				printf(
					/* translators: %s: taxonomy singular label. */
					esc_html__( 'Location rules are pre-filled for the “%s” taxonomy. Add your fields and save the group.', 'wp-powersuite' ),
					esc_html( $tax_label )
				);
				?>
			</p>
		</div>
	<?php endif; ?>

	<?php if ( $errors !== [] ) : ?>
		<div class="cf-error-box" role="alert">
			<p><strong><?php esc_html_e( 'Your changes were not saved. Please fix the following:', 'wp-powersuite' ); ?></strong></p>
			<ul class="cf-error-list">
				<?php foreach ( $errors as $error ) : ?>
					<li><?php echo esc_html( $error ); ?></li>
				<?php endforeach; ?>
			</ul>
		</div>
	<?php endif; ?>

	<form method="post" action="<?php echo esc_url( $admin->postEndpoint() ); ?>" class="cf-form" id="cf-form">
		<input type="hidden" name="action" value="wpps_cf_save">
		<?php wp_nonce_field( 'wpps_cf_save' ); ?>
		<input type="hidden" name="original_key" value="<?php echo esc_attr( $is_edit ? $key : '' ); ?>">

		<div class="cf-actions-bar">
			<label class="cf-enabled-toggle">
				<input type="checkbox" name="enabled" value="1" <?php checked( $enabled ); ?>>
				<?php esc_html_e( 'Enabled', 'wp-powersuite' ); ?>
			</label>
			<button type="submit" class="button button-primary">
				<?php echo $is_edit ? esc_html__( 'Save Changes', 'wp-powersuite' ) : esc_html__( 'Create Field Group', 'wp-powersuite' ); ?>
			</button>
		</div>

		<div class="cf-card cf-card--identity">
			<table class="form-table" role="presentation">
				<tbody>
					<tr>
						<th scope="row"><label for="cf-title"><?php esc_html_e( 'Title', 'wp-powersuite' ); ?> <span class="cf-req">*</span></label></th>
						<td>
							<input type="text" id="cf-title" name="title" value="<?php echo esc_attr( $title ); ?>" class="regular-text" placeholder="<?php esc_attr_e( 'e.g. Book Details', 'wp-powersuite' ); ?>" required>
							<p class="description"><?php esc_html_e( 'Heading shown on the edit screen.', 'wp-powersuite' ); ?></p>
						</td>
					</tr>
					<tr>
						<th scope="row"><label for="cf-key"><?php esc_html_e( 'Group key', 'wp-powersuite' ); ?> <span class="cf-req">*</span></label><?php cf_tip( __( 'A unique ID for this group. Used in shortcodes and templates. Created automatically and locked after you save.', 'wp-powersuite' ) ); ?></th>
						<td>
							<?php if ( $is_edit ) : ?>
								<code class="cf-key-readonly" id="cf-key" data-cf-group-key-readonly><?php echo esc_html( $key ); ?></code>
								<p class="description"><?php esc_html_e( 'This cannot be changed after the group is created.', 'wp-powersuite' ); ?></p>
							<?php else : ?>
								<input type="text" id="cf-key" name="key" value="<?php echo esc_attr( $key ); ?>" class="regular-text" maxlength="<?php echo esc_attr( (string) Config::MAX_KEY_LENGTH ); ?>" pattern="[a-z][a-z0-9_]*" required>
								<p class="description"><?php esc_html_e( 'Filled in automatically. You can edit it before saving for the first time.', 'wp-powersuite' ); ?></p>
							<?php endif; ?>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="cf-card">
			<h2><?php esc_html_e( 'Fields', 'wp-powersuite' ); ?></h2>
			<div class="cf-fields-list" id="cf-fields-list">
				<?php if ( $fields === [] ) : ?>
					<p class="cf-fields-empty"><?php esc_html_e( 'No fields yet. Add your first field below.', 'wp-powersuite' ); ?></p>
				<?php else : ?>
					<?php foreach ( array_values( $fields ) as $index => $field ) : ?>
						<?php cf_render_field_row( (int) $index, is_array( $field ) ? $field : [], $post_types, $taxonomies, $key, $field_targets, $field_key_opts ); ?>
					<?php endforeach; ?>
				<?php endif; ?>
			</div>
			<p>
				<button type="button" class="button button-secondary" id="cf-add-field">
					<span class="dashicons dashicons-plus-alt2" aria-hidden="true"></span>
					<?php esc_html_e( 'Add Field', 'wp-powersuite' ); ?>
				</button>
			</p>
		</div>

		<details class="cf-settings" id="cf-settings" open>
			<summary>
				<span class="dashicons dashicons-admin-generic" aria-hidden="true"></span>
				<?php esc_html_e( 'Settings', 'wp-powersuite' ); ?>
			</summary>
			<div class="cf-settings__inner">
				<nav class="cf-settings-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Field group settings', 'wp-powersuite' ); ?>">
					<button type="button" class="cf-settings-tab is-active" data-tab="location" role="tab" aria-selected="true"><?php esc_html_e( 'Location', 'wp-powersuite' ); ?></button>
					<button type="button" class="cf-settings-tab" data-tab="presentation" role="tab" aria-selected="false"><?php esc_html_e( 'Display', 'wp-powersuite' ); ?></button>
					<?php if ( $is_edit && $key !== '' ) : ?>
						<button type="button" class="cf-settings-tab" data-tab="usage" role="tab" aria-selected="false"><?php esc_html_e( 'Usage', 'wp-powersuite' ); ?></button>
					<?php endif; ?>
				</nav>

				<div class="cf-settings-panel is-active" id="cf-settings-tab-location" role="tabpanel">
					<p class="description"><?php esc_html_e( 'Choose where this field group appears. With “Match all”, every rule must pass. With “Match any”, one matching rule is enough.', 'wp-powersuite' ); ?></p>
					<table class="form-table" role="presentation">
						<tbody>
							<tr>
								<th scope="row"><label for="cf-loc-screen"><?php esc_html_e( 'Screen', 'wp-powersuite' ); ?></label><?php cf_tip( __( 'Show fields when editing posts and pages, or when editing categories and other terms.', 'wp-powersuite' ) ); ?></th>
								<td>
									<select id="cf-loc-screen" name="location_rules[screen]">
										<option value="post" <?php selected( $loc_screen, 'post' ); ?>><?php esc_html_e( 'Post / Page edit', 'wp-powersuite' ); ?></option>
										<option value="taxonomy" <?php selected( $loc_screen, 'taxonomy' ); ?>><?php esc_html_e( 'Term edit', 'wp-powersuite' ); ?></option>
									</select>
								</td>
							</tr>
							<tr>
								<th scope="row"><label for="cf-loc-match"><?php esc_html_e( 'Rule matching', 'wp-powersuite' ); ?></label></th>
								<td>
									<select id="cf-loc-match" name="location_rules[match]">
										<option value="all" <?php selected( $loc_match, 'all' ); ?>><?php esc_html_e( 'Match all rules (AND)', 'wp-powersuite' ); ?></option>
										<option value="any" <?php selected( $loc_match, 'any' ); ?>><?php esc_html_e( 'Match any rule (OR)', 'wp-powersuite' ); ?></option>
									</select>
								</td>
							</tr>
							<tr>
								<th scope="row"><?php esc_html_e( 'Rules', 'wp-powersuite' ); ?></th>
								<td>
									<div id="cf-location-rules-list" class="cf-rules-list">
										<?php if ( $loc_rules === [] ) : ?>
											<p class="cf-rules-empty"><?php esc_html_e( 'No rules yet.', 'wp-powersuite' ); ?></p>
										<?php else : ?>
											<?php foreach ( array_values( $loc_rules ) as $ri => $rule ) : ?>
												<?php if ( ! is_array( $rule ) ) { continue; } ?>
												<div class="cf-rule-row" data-index="<?php echo esc_attr( (string) $ri ); ?>">
													<select name="location_rules[rules][<?php echo esc_attr( (string) $ri ); ?>][param]" class="cf-rule-param">
														<?php foreach ( Config::locationRuleParams() as $p_key => $p_label ) : ?>
															<option value="<?php echo esc_attr( $p_key ); ?>" <?php selected( (string) ( $rule['param'] ?? '' ), $p_key ); ?>><?php echo esc_html( $p_label ); ?></option>
														<?php endforeach; ?>
													</select>
													<select name="location_rules[rules][<?php echo esc_attr( (string) $ri ); ?>][operator]" class="cf-rule-operator">
														<?php foreach ( Config::ruleOperators() as $op_key => $op_label ) : ?>
															<option value="<?php echo esc_attr( $op_key ); ?>" <?php selected( (string) ( $rule['operator'] ?? '==' ), $op_key ); ?>><?php echo esc_html( $op_label ); ?></option>
														<?php endforeach; ?>
													</select>
													<?php $cf_render_rule_value( (string) ( $rule['param'] ?? 'post_type' ), (string) ( $rule['value'] ?? '' ), 'location_rules[rules][' . (string) $ri . '][value]' ); ?>
													<button type="button" class="button-link cf-rule-remove">&times;</button>
												</div>
											<?php endforeach; ?>
										<?php endif; ?>
									</div>
									<p><button type="button" class="button button-secondary" id="cf-add-location-rule"><?php esc_html_e( 'Add rule', 'wp-powersuite' ); ?></button></p>
									<script type="text/html" id="cf-location-rule-template">
										<div class="cf-rule-row" data-index="__INDEX__">
											<select name="location_rules[rules][__INDEX__][param]" class="cf-rule-param">
												<?php foreach ( Config::locationRuleParams() as $p_key => $p_label ) : ?>
													<option value="<?php echo esc_attr( $p_key ); ?>"><?php echo esc_html( $p_label ); ?></option>
												<?php endforeach; ?>
											</select>
											<select name="location_rules[rules][__INDEX__][operator]" class="cf-rule-operator">
												<?php foreach ( Config::ruleOperators() as $op_key => $op_label ) : ?>
													<option value="<?php echo esc_attr( $op_key ); ?>"><?php echo esc_html( $op_label ); ?></option>
												<?php endforeach; ?>
											</select>
											<?php $cf_render_rule_value( 'post_type', '', 'location_rules[rules][__INDEX__][value]' ); ?>
											<button type="button" class="button-link cf-rule-remove">&times;</button>
										</div>
									</script>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="cf-settings-panel" id="cf-settings-tab-presentation" role="tabpanel" hidden>
					<table class="form-table" role="presentation">
						<tbody>
							<tr class="cf-position-row"<?php echo $loc_screen === 'post' ? '' : ' hidden'; ?>>
								<th scope="row"><label for="cf-position"><?php esc_html_e( 'Where to show', 'wp-powersuite' ); ?></label><?php cf_tip( __( 'Choose where fields appear on the post edit screen.', 'wp-powersuite' ) ); ?></th>
								<td>
									<select id="cf-position" name="position">
										<?php foreach ( Config::positions() as $pos_key => $pos_label ) : ?>
											<option value="<?php echo esc_attr( $pos_key ); ?>" <?php selected( $position === 'advanced' ? 'normal' : $position, $pos_key ); ?>><?php echo esc_html( $pos_label ); ?></option>
										<?php endforeach; ?>
									</select>
									<ul class="cf-position-notes description">
										<?php foreach ( Config::positionEditorNotes() as $pos_key => $note ) : ?>
											<li><strong><?php echo esc_html( Config::positions()[ $pos_key ] ?? $pos_key ); ?>:</strong> <?php echo esc_html( $note ); ?></li>
										<?php endforeach; ?>
									</ul>
								</td>
							</tr>
							<tr class="cf-style-row"<?php echo $loc_screen === 'post' ? '' : ' hidden'; ?>>
								<th scope="row"><label for="cf-style"><?php esc_html_e( 'Panel style', 'wp-powersuite' ); ?></label><?php cf_tip( __( 'Seamless removes the box border so fields blend into the page.', 'wp-powersuite' ) ); ?></th>
								<td>
									<select id="cf-style" name="style">
										<?php foreach ( Config::metaBoxStyles() as $style_key => $style_label ) : ?>
											<option value="<?php echo esc_attr( $style_key ); ?>" <?php selected( $style, $style_key ); ?>><?php echo esc_html( $style_label ); ?></option>
										<?php endforeach; ?>
									</select>
									<p class="description"><?php esc_html_e( 'Applies to the field panel on the edit screen.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr class="cf-priority-row"<?php echo $loc_screen === 'post' ? '' : ' hidden'; ?>>
								<th scope="row"><label for="cf-priority"><?php esc_html_e( 'Order', 'wp-powersuite' ); ?></label><?php cf_tip( __( 'High appears above other field groups in the same area. Low appears below them.', 'wp-powersuite' ) ); ?></th>
								<td>
									<select id="cf-priority" name="priority">
										<?php foreach ( Config::priorities() as $pri_key => $pri_label ) : ?>
											<option value="<?php echo esc_attr( $pri_key ); ?>" <?php selected( $priority, $pri_key ); ?>><?php echo esc_html( $pri_label ); ?></option>
										<?php endforeach; ?>
									</select>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<?php if ( $is_edit && $key !== '' ) : ?>
					<?php
					$usage_php       = "<?php echo esc_html( wps_cf_get_field( '" . $key . "', '" . $usage_sample_key . "' ) ); ?>";
					$usage_shortcode = '[wpps_cf group="' . $key . '" field="' . $usage_sample_key . '"]';
					$usage_dynamic   = '{wp_powersuite_cf:' . $key . ':' . $usage_sample_key . '}';
					$cf_usage_snippet = static function ( string $label, string $code ): void {
						?>
						<div class="cf-usage-snippet">
							<div class="cf-usage-snippet__head">
								<span class="cf-usage-snippet__label"><?php echo esc_html( $label ); ?></span>
								<button type="button" class="button button-small cf-usage-copy" data-copy="<?php echo esc_attr( $code ); ?>">
									<span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
									<?php esc_html_e( 'Copy', 'wp-powersuite' ); ?>
								</button>
							</div>
							<code class="cf-usage-snippet__code"><?php echo esc_html( $code ); ?></code>
						</div>
						<?php
					};
					?>
					<div class="cf-settings-panel" id="cf-settings-tab-usage" role="tabpanel" hidden>
						<p class="description"><?php esc_html_e( 'Use the group key and field keys below in your theme, blocks, or page builders.', 'wp-powersuite' ); ?></p>

						<div class="cf-usage-grid">
							<div class="cf-usage-block">
								<h3 class="cf-usage-block__title"><?php esc_html_e( 'Group key', 'wp-powersuite' ); ?></h3>
								<div class="cf-usage-snippet cf-usage-snippet--inline">
									<code class="cf-usage-snippet__code"><?php echo esc_html( $key ); ?></code>
									<button type="button" class="button button-small cf-usage-copy" data-copy="<?php echo esc_attr( $key ); ?>">
										<span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
										<?php esc_html_e( 'Copy', 'wp-powersuite' ); ?>
									</button>
								</div>
							</div>

							<?php if ( $usage_fields !== [] ) : ?>
								<div class="cf-usage-block">
									<h3 class="cf-usage-block__title"><?php esc_html_e( 'Fields', 'wp-powersuite' ); ?></h3>
									<table class="widefat striped cf-usage-fields">
										<thead>
											<tr>
												<th scope="col"><?php esc_html_e( 'Label', 'wp-powersuite' ); ?></th>
												<th scope="col"><?php esc_html_e( 'Field key', 'wp-powersuite' ); ?></th>
												<th scope="col" class="cf-usage-fields__action"><?php esc_html_e( 'Copy', 'wp-powersuite' ); ?></th>
											</tr>
										</thead>
										<tbody>
											<?php foreach ( $usage_fields as $usage_field ) : ?>
												<tr>
													<td><?php echo esc_html( $usage_field['label'] ); ?></td>
													<td><code><?php echo esc_html( $usage_field['key'] ); ?></code></td>
													<td class="cf-usage-fields__action">
														<?php /* translators: %s: string value. */ ?>
														<button type="button" class="button button-small cf-usage-copy" data-copy="<?php echo esc_attr( $usage_field['key'] ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Copy field key %s', 'wp-powersuite' ), $usage_field['key'] ) ); ?>">
															<span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
														</button>
													</td>
												</tr>
											<?php endforeach; ?>
										</tbody>
									</table>
								</div>

								<div class="cf-usage-block">
									<h3 class="cf-usage-block__title"><?php esc_html_e( 'Code examples', 'wp-powersuite' ); ?></h3>
									<p class="description cf-usage-block__intro"><?php esc_html_e( 'Examples use your first field key. Replace it with any key from the table above.', 'wp-powersuite' ); ?></p>
									<?php
									$cf_usage_snippet( __( 'PHP template', 'wp-powersuite' ), $usage_php );
									$cf_usage_snippet( __( 'Shortcode', 'wp-powersuite' ), $usage_shortcode );
									$cf_usage_snippet( __( 'Dynamic tag', 'wp-powersuite' ), $usage_dynamic );
									?>
								</div>
							<?php else : ?>
								<div class="cf-usage-empty">
									<p><?php esc_html_e( 'Add at least one field that saves data to see field keys and code examples here.', 'wp-powersuite' ); ?></p>
								</div>
							<?php endif; ?>

							<div class="cf-usage-block">
								<h3 class="cf-usage-block__title"><?php esc_html_e( 'Visual editors', 'wp-powersuite' ); ?></h3>
								<ul class="cf-usage-integrations">
									<li>
										<span class="cf-usage-integrations__name"><?php esc_html_e( 'Block editor', 'wp-powersuite' ); ?></span>
										<span class="cf-usage-integrations__detail"><?php esc_html_e( 'Insert the “PowerSuite Custom Field” block and choose this group.', 'wp-powersuite' ); ?></span>
									</li>
									<li>
										<span class="cf-usage-integrations__name"><?php esc_html_e( 'Page builders', 'wp-powersuite' ); ?></span>
										<span class="cf-usage-integrations__detail"><?php esc_html_e( 'Look for the “WP PowerSuite Fields” element or dynamic tag.', 'wp-powersuite' ); ?></span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				<?php endif; ?>
			</div>
		</details>

		<div class="cf-actions-bar cf-actions-bar--bottom">
			<?php if ( $is_edit ) : ?>
				<a href="<?php echo esc_url( $admin->actionUrl( 'wpps_cf_delete', 'wpps_cf_delete_' . $key, [ 'key' => $key ] ) ); ?>" class="button button-link-delete cf-delete">
					<?php esc_html_e( 'Delete Field Group', 'wp-powersuite' ); ?>
				</a>
			<?php endif; ?>
			<button type="submit" class="button button-primary">
				<?php echo $is_edit ? esc_html__( 'Save Changes', 'wp-powersuite' ) : esc_html__( 'Create Field Group', 'wp-powersuite' ); ?>
			</button>
		</div>
	</form>

	<script type="text/html" id="cf-field-row-template">
		<?php cf_render_field_row_template( $post_types, $taxonomies ); ?>
	</script>
	<script type="application/json" id="cf-rule-value-choices"><?php echo wp_json_encode( $rule_value_choices ); ?></script>
</div>

