<?php
/**
 * The dashboard: the menu, the form list, the templates, the entries, the
 * settings.
 *
 * Copyright (c) 2026 Quantum, Serbia. https://2ranq.com
 *
 * This program is free software: you can redistribute it and change it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 2 of the License, or any later version. The full
 * text is in LICENSE.txt, next to this file.
 *
 * @package Ranq_Forms
 */

defined( 'ABSPATH' ) || exit;

/**
 * Ranq_Forms_Admin
 */
class Ranq_Forms_Admin {

	/**
	 * The short names of our screens.
	 */
	const PAGE          = '2ranq-forms';
	const PAGE_NEW      = '2ranq-forms-new';
	const PAGE_ENTRIES  = '2ranq-forms-entries';
	const PAGE_SETTINGS = '2ranq-forms-settings';

	/**
	 * Hooks into the dashboard.
	 *
	 * @return void
	 */
	public static function hooks() {

		add_action( 'admin_menu', array( __CLASS__, 'menu' ) );
		add_action( 'admin_enqueue_scripts', array( __CLASS__, 'assets' ) );
		add_action( 'admin_init', array( __CLASS__, 'handle_actions' ) );
		add_filter( 'admin_body_class', array( __CLASS__, 'body_class' ) );
	}

	/**
	 * The menu. One main item and four under it.
	 *
	 * @return void
	 */
	public static function menu() {

		add_menu_page(
			__( '2ranq Forms', '2ranq-forms' ),
			__( '2ranq Forms', '2ranq-forms' ),
			'manage_options',
			self::PAGE,
			array( __CLASS__, 'render' ),
			'dashicons-feedback',
			30
		);

		$pages = array(
			self::PAGE          => __( 'All Forms', '2ranq-forms' ),
			self::PAGE_NEW      => __( 'Add New', '2ranq-forms' ),
			self::PAGE_ENTRIES  => __( 'Entries', '2ranq-forms' ),
			self::PAGE_SETTINGS => __( 'Settings', '2ranq-forms' ),
		);

		foreach ( $pages as $slug => $title ) {
			add_submenu_page(
				self::PAGE,
				$title,
				$title,
				'manage_options',
				$slug,
				array( __CLASS__, 'render' )
			);
		}
	}

	/**
	 * Which of our screens is open, or an empty string.
	 *
	 * @return string
	 */
	private static function current_page() {

		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- only recognising the screen, nothing is changed.
		$page = isset( $_GET['page'] ) ? sanitize_key( wp_unslash( $_GET['page'] ) ) : '';

		$ours = array( self::PAGE, self::PAGE_NEW, self::PAGE_ENTRIES, self::PAGE_SETTINGS );

		return in_array( $page, $ours, true ) ? $page : '';
	}

	/**
	 * The form id out of the address, or zero.
	 *
	 * @return int
	 */
	private static function requested_form_id() {

		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- reading only.
		return isset( $_GET['form_id'] ) ? absint( wp_unslash( $_GET['form_id'] ) ) : 0;
	}

	/**
	 * Whether we are in the builder.
	 *
	 * @return bool
	 */
	private static function is_builder() {

		return self::PAGE === self::current_page() && self::requested_form_id() > 0;
	}

	/**
	 * The builder takes the whole screen, as theirs does, because that is how you
	 * work without distraction.
	 *
	 * @param string $classes The existing classes.
	 *
	 * @return string
	 */
	public static function body_class( $classes ) {

		if ( self::is_builder() ) {
			return $classes . ' ranq-fullscreen';
		}

		// The form list, the templates, the entries and the settings run edge to edge,
		// the same as the head of the builder. Without this the head floats in
		// WordPress's own padding and stops being the edge of the screen.
		$edge = array( self::PAGE, self::PAGE_NEW, self::PAGE_ENTRIES, self::PAGE_SETTINGS );

		if ( in_array( self::current_page(), $edge, true ) ) {
			return $classes . ' ranq-edge';
		}

		return $classes;
	}

	/**
	 * The dashboard assets. Only on our screens.
	 *
	 * @return void
	 */
	public static function assets() {

		if ( ! self::current_page() ) {
			return;
		}

		// The small script of the settings screen: it shows only what the chosen
		// service asks for. It needs neither the builder nor the media library.
		wp_enqueue_script(
			'ranq-forms-admin',
			RANQ_FORMS_URL . 'assets/js/admin.js',
			array(),
			RANQ_FORMS_VERSION,
			true
		);

		wp_enqueue_style(
			'ranq-forms-admin',
			RANQ_FORMS_URL . 'assets/css/admin.css',
			array(),
			RANQ_FORMS_VERSION
		);

		if ( ! self::is_builder() ) {
			return;
		}

		// The same style sheet that goes to the site, so the preview is real and not near.
		wp_enqueue_style(
			'ranq-forms',
			RANQ_FORMS_URL . 'assets/css/form.css',
			array(),
			RANQ_FORMS_VERSION
		);

		// The builder ALWAYS needs the section style too, because the Full Widgets tab
		// shows a section. On the site it is sent only when a section really exists.
		wp_enqueue_style(
			'ranq-forms-sections',
			RANQ_FORMS_URL . 'assets/css/sections.css',
			array( 'ranq-forms' ),
			RANQ_FORMS_VERSION
		);

		// The Contact widget tab shows a real section, assembled out of ordinary
		// blocks. Without the block style the columns would fall one under the other
		// and the preview would lie about how the section really looks.
		wp_enqueue_style( 'wp-block-library' );

		// The media library picker. Loaded only in the builder.
		wp_enqueue_media();

		wp_enqueue_script(
			'ranq-forms-builder',
			RANQ_FORMS_URL . 'assets/js/builder.js',
			array(),
			RANQ_FORMS_VERSION,
			true
		);

		wp_localize_script(
			'ranq-forms-builder',
			'ranqFormsBuilder',
			Ranq_Forms_Builder::script_data( self::requested_form_id() )
		);
	}

	/**
	 * The actions that change state: building a form from a template, deleting,
	 * saving the settings.
	 *
	 * @return void
	 */
	public static function handle_actions() {

		if ( ! self::current_page() || ! current_user_can( 'manage_options' ) ) {
			return;
		}

		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- the nonce is checked per action.
		$action = isset( $_REQUEST['ranq_action'] ) ? sanitize_key( wp_unslash( $_REQUEST['ranq_action'] ) ) : '';

		if ( 'create' === $action ) {
			self::create_from_template();
		}

		if ( 'delete' === $action ) {
			self::delete_form();
		}

		if ( 'save_settings' === $action ) {
			self::save_settings();
		}
	}

	/**
	 * Builds a form from a template and goes straight into the builder.
	 *
	 * @return void
	 */
	private static function create_from_template() {

		$nonce = isset( $_GET['_wpnonce'] ) ? sanitize_text_field( wp_unslash( $_GET['_wpnonce'] ) ) : '';

		if ( ! wp_verify_nonce( $nonce, 'ranq_forms_create' ) ) {
			wp_die( esc_html__( 'That link has expired. Please try again.', '2ranq-forms' ) );
		}

		$key      = isset( $_GET['template'] ) ? sanitize_key( wp_unslash( $_GET['template'] ) ) : 'blank';
		$template = Ranq_Forms_Templates::get( $key );

		if ( ! $template ) {
			$template = Ranq_Forms_Templates::get( 'blank' );
		}

		$form_id = wp_insert_post(
			array(
				'post_type'   => Ranq_Forms_Post_Type::POST_TYPE,
				'post_title'  => $template['name'],
				'post_status' => 'publish',
			)
		);

		if ( is_wp_error( $form_id ) || ! $form_id ) {
			wp_die( esc_html__( 'The form could not be created.', '2ranq-forms' ) );
		}

		update_post_meta( $form_id, '_ranq_forms_fields', $template['fields'] );

		wp_safe_redirect( admin_url( 'admin.php?page=' . self::PAGE . '&form_id=' . (int) $form_id ) );

		exit;
	}

	/**
	 * Deletes a form.
	 *
	 * @return void
	 */
	private static function delete_form() {

		$form_id = self::requested_form_id();
		$nonce   = isset( $_GET['_wpnonce'] ) ? sanitize_text_field( wp_unslash( $_GET['_wpnonce'] ) ) : '';

		if ( ! $form_id || ! wp_verify_nonce( $nonce, 'ranq_forms_delete_' . $form_id ) ) {
			wp_die( esc_html__( 'That link has expired. Please try again.', '2ranq-forms' ) );
		}

		$form = get_post( $form_id );

		if ( $form instanceof WP_Post && Ranq_Forms_Post_Type::POST_TYPE === $form->post_type ) {
			wp_delete_post( $form_id, true );
		}

		wp_safe_redirect( admin_url( 'admin.php?page=' . self::PAGE . '&deleted=1' ) );

		exit;
	}

	/**
	 * Saves the plugin settings.
	 *
	 * @return void
	 */
	private static function save_settings() {

		check_admin_referer( 'ranq_forms_settings' );

		$fields = array(
			'ranq_forms_notify_email'             => 'email',
			'ranq_forms_store_ip'                 => 'bool',
			'ranq_forms_remove_data_on_uninstall' => 'bool',
			'ranq_forms_disable_styles'           => 'bool',
		);

		foreach ( $fields as $key => $type ) {

			if ( 'bool' === $type ) {
				update_option( $key, isset( $_POST[ $key ] ), false );

				continue;
			}

			$value = isset( $_POST[ $key ] ) ? sanitize_email( wp_unslash( $_POST[ $key ] ) ) : '';
			update_option( $key, $value, false );
		}

		// The company details. The ready made sections are filled in from them, so
		// they are not typed again in every one.
		$company = array();

		foreach ( array( 'name', 'street', 'city', 'phone', 'email', 'hours' ) as $key ) {

			// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- cleaned on the line below, by `sanitize_email` or `sanitize_text_field` depending on the field.
			$raw = isset( $_POST[ 'ranq_company_' . $key ] ) ? wp_unslash( $_POST[ 'ranq_company_' . $key ] ) : '';

			$company[ $key ] = 'email' === $key
				? sanitize_email( $raw )
				: sanitize_text_field( $raw );
		}

		update_option( 'ranq_forms_company', $company, false );

		// The keys of the outside spam checking service.
		// phpcs:disable WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- every field is cleaned by `Ranq_Forms_Spam::save()`, which alone knows what is valid for it.
		Ranq_Forms_Spam::save(
			array(
				'provider'  => isset( $_POST['ranq_spam_provider'] ) ? wp_unslash( $_POST['ranq_spam_provider'] ) : 'none',
				'site_key'  => isset( $_POST['ranq_spam_site_key'] ) ? wp_unslash( $_POST['ranq_spam_site_key'] ) : '',
				'secret'    => isset( $_POST['ranq_spam_secret'] ) ? wp_unslash( $_POST['ranq_spam_secret'] ) : '',
				'rc_type'   => isset( $_POST['ranq_spam_rc_type'] ) ? wp_unslash( $_POST['ranq_spam_rc_type'] ) : 'v2',
				'threshold' => isset( $_POST['ranq_spam_threshold'] ) ? wp_unslash( $_POST['ranq_spam_threshold'] ) : '0.5',
				'message'   => isset( $_POST['ranq_spam_message'] ) ? wp_unslash( $_POST['ranq_spam_message'] ) : '',
			)
		);
		// The keys of the outside services.
		Ranq_Forms_Integrations::save_keys( wp_unslash( $_POST ) );
		// phpcs:enable WordPress.Security.ValidatedSanitizedInput.InputNotSanitized

		wp_safe_redirect( admin_url( 'admin.php?page=' . self::PAGE_SETTINGS . '&saved=1' ) );

		exit;
	}

	/**
	 * Draws the requested screen.
	 *
	 * @return void
	 */
	public static function render() {

		if ( ! current_user_can( 'manage_options' ) ) {
			wp_die( esc_html__( 'You do not have permission to view this page.', '2ranq-forms' ) );
		}

		$page = self::current_page();

		if ( self::PAGE_NEW === $page ) {
			self::render_templates();

			return;
		}

		if ( self::PAGE_ENTRIES === $page ) {
			Ranq_Forms_Entries_Screen::render();

			return;
		}

		if ( self::PAGE_SETTINGS === $page ) {
			self::render_settings();

			return;
		}

		$form_id = self::requested_form_id();

		if ( $form_id ) {
			Ranq_Forms_Builder::render( $form_id );

			return;
		}

		self::render_list();
	}

	/**
	 * The address for building a form from a template.
	 *
	 * @param string $template The template key.
	 *
	 * @return string
	 */
	public static function create_url( $template ) {

		return wp_nonce_url(
			admin_url( 'admin.php?page=' . self::PAGE_NEW . '&ranq_action=create&template=' . rawurlencode( $template ) ),
			'ranq_forms_create'
		);
	}

	/**
	 * The template most sites really build, and the blank form. Both stand
	 * OUTSIDE the wall of tiles, as the two choices offered first. The same keys
	 * as in the Templates tab in the builder, so two screens doing the same job
	 * start the same way.
	 */
	const TPL_FIRST = 'contact';
	const TPL_BLANK = 'blank';

	/**
	 * The group subheading says the JOB those forms do, because a person first
	 * knows what they need, and only then what it is called.
	 *
	 * @return array
	 */
	private static function template_notes() {

		return array(
			'contact'      => __( 'Someone wants to ask you something', '2ranq-forms' ),
			'booking'      => __( 'Someone wants a time slot', '2ranq-forms' ),
			'quote'        => __( 'Someone wants a price', '2ranq-forms' ),
			'application'  => __( 'Someone is applying', '2ranq-forms' ),
			'verification' => __( 'Someone proves who they are, with files', '2ranq-forms' ),
			'support'      => __( 'Something is not working', '2ranq-forms' ),
			'signup'       => __( 'Someone leaves an email address', '2ranq-forms' ),
			'feedback'     => __( 'Someone tells you what they think', '2ranq-forms' ),
		);
	}

	/**
	 * Whether the template asks for a file upload.
	 *
	 * @param array $template The template.
	 *
	 * @return bool
	 */
	private static function template_has_file( $template ) {

		foreach ( $template['fields'] as $field ) {

			if ( isset( $field['type'] ) && 'file' === $field['type'] ) {
				return true;
			}
		}

		return false;
	}

	/**
	 * The address of this screen with a given state.
	 *
	 * The state of the screen lives in the ADDRESS, not in a script: which group
	 * is open, what is being searched for and which filter holds. That is why the
	 * screen works without a single line of JavaScript, and every state has an
	 * address that can be bookmarked and shared.
	 *
	 * @param array  $args What changes: `open`, `s`, `show`.
	 * @param string $hash The anchor at the end of the address, without the hash.
	 *
	 * @return string
	 */
	private static function templates_url( $args = array(), $hash = '' ) {

		$query = array( 'page' => self::PAGE_NEW );

		foreach ( array( 'open', 's', 'show' ) as $name ) {

			if ( ! empty( $args[ $name ] ) ) {
				$query[ $name ] = $args[ $name ];
			}
		}

		$url = admin_url( 'admin.php?' . http_build_query( $query ) );

		return $hash ? $url . '#' . $hash : $url;
	}

	/**
	 * The ladder: as many rungs as there are steps, the first one full because
	 * that is where the visitor stands. The same mark sits next to the form name,
	 * on the tile and at the top of the sketch, so it is learned once.
	 *
	 * @param int $steps The number of steps.
	 *
	 * @return void
	 */
	private static function render_steps( $steps ) {

		echo '<span class="ranq-nf__steps" aria-hidden="true">';

		for ( $i = 0; $i < (int) $steps; $i++ ) {
			echo '<i></i>';
		}

		echo '</span>';
	}

	/**
	 * The sketch is a small but truthful picture of the form: how long it is,
	 * whether it has a long message box, whether two fields share a row and where
	 * it breaks into steps. An icon would only repeat the name.
	 *
	 * @param array $template The template.
	 * @param bool  $big      A large sketch, next to the card at the top.
	 *
	 * @return void
	 */
	private static function render_sketch( $template, $big = false ) {

		$class = 'ranq-nf__sketch' . ( $big ? ' is-big' : '' );

		if ( empty( $template['fields'] ) ) {
			printf(
				'<span class="%s is-empty" aria-hidden="true">%s</span>',
				esc_attr( $class ),
				esc_html__( 'Nothing yet', '2ranq-forms' )
			);

			return;
		}

		// The rows are worked out first and only then printed. A field half a row wide
		// joins the previous row, exactly as in a real form.
		$rows = array();
		$pair = null;

		foreach ( $template['fields'] as $field ) {

			if ( count( $rows ) >= 4 ) {
				break;
			}

			$type = isset( $field['type'] ) ? $field['type'] : 'text';

			if ( in_array( $type, array( 'pagebreak', 'divider', 'hidden' ), true ) ) {
				continue;
			}

			$half = isset( $field['size'] ) && in_array( $field['size'], array( 'half', 'third' ), true );

			if ( $half && null !== $pair && count( $rows[ $pair ]['fields'] ) < 2 ) {
				$rows[ $pair ]['fields'][] = $field;

				continue;
			}

			$rows[] = array(
				'pair'   => $half,
				'fields' => array( $field ),
			);

			$pair = $half ? count( $rows ) - 1 : null;
		}

		$steps = Ranq_Forms_Templates::steps( $template );
		?>
		<span class="<?php echo esc_attr( $class ); ?>" aria-hidden="true">
			<?php if ( $steps > 1 ) : ?>
				<span class="ranq-nf__sketch-steps">
					<?php for ( $i = 0; $i < $steps; $i++ ) : ?>
						<i></i>
					<?php endfor; ?>
				</span>
			<?php endif; ?>

			<?php foreach ( $rows as $row ) : ?>
				<span class="ranq-nf__sketch-row<?php echo $row['pair'] ? ' is-pair' : ''; ?>">
					<?php
					foreach ( $row['fields'] as $field ) :
						$length = strlen( isset( $field['label'] ) ? (string) $field['label'] : '' );
						$type   = isset( $field['type'] ) ? $field['type'] : 'text';
						?>
						<span class="ranq-nf__sketch-cell">
							<span class="ranq-nf__sketch-label<?php echo $length < 10 ? ' is-short' : ''; ?><?php echo $length > 18 ? ' is-long' : ''; ?>"></span>
							<span class="ranq-nf__sketch-field<?php echo 'textarea' === $type ? ' is-tall' : ''; ?>"></span>
						</span>
					<?php endforeach; ?>
				</span>
			<?php endforeach; ?>

			<span class="ranq-nf__sketch-row"><span class="ranq-nf__sketch-button"></span></span>
		</span>
		<?php
	}

	/**
	 * The small line under the name: the steps and the number of fields.
	 *
	 * @param array $template The template.
	 *
	 * @return void
	 */
	private static function render_meta( $template ) {

		$steps = Ranq_Forms_Templates::steps( $template );
		$count = count( $template['fields'] );
		?>
		<span class="ranq-nf__meta">
			<?php if ( $steps > 1 ) : ?>
				<?php self::render_steps( $steps ); ?>
				<span>
					<?php
					printf(
						/* translators: %d: number of steps in the form. */
						esc_html( _n( '%d step ·', '%d steps ·', $steps, '2ranq-forms' ) ),
						(int) $steps
					);
					?>
				</span>
			<?php endif; ?>
			<span>
				<?php
				printf(
					/* translators: %d: number of fields in the form. */
					esc_html( _n( '%d field', '%d fields', $count, '2ranq-forms' ) ),
					(int) $count
				);
				?>
			</span>
		</span>
		<?php
	}

	/**
	 * One template tile.
	 *
	 * @param string $key      The template key.
	 * @param array  $template The template.
	 *
	 * @return void
	 */
	private static function render_tile( $key, $template ) {
		?>
		<a class="ranq-nf__tile" href="<?php echo esc_url( self::create_url( $key ) ); ?>">
			<span class="ranq-nf__tile-text">
				<span class="ranq-nf__tile-name"><?php echo esc_html( $template['name'] ); ?></span>
				<span class="ranq-nf__tile-desc"><?php echo esc_html( $template['description'] ); ?></span>
				<?php self::render_meta( $template ); ?>
			</span>
			<?php self::render_sketch( $template ); ?>
		</a>
		<?php
	}

	/**
	 * Highlights the matching part of the name in yellow. The text is escaped
	 * BEFORE the mark is inserted, so a template name can never turn into
	 * highlighting itself.
	 *
	 * @param string $text The text.
	 * @param string $term The searched word.
	 *
	 * @return string Ready to print, already escaped.
	 */
	private static function highlight( $text, $term ) {

		$safe = esc_html( $text );

		if ( '' === $term ) {
			return $safe;
		}

		$mark = esc_html( $term );
		$at   = stripos( $safe, $mark );

		if ( false === $at ) {
			return $safe;
		}

		return substr( $safe, 0, $at )
			. '<mark>' . substr( $safe, $at, strlen( $mark ) ) . '</mark>'
			. substr( $safe, $at + strlen( $mark ) );
	}

	/**
	 * The template list, the "Add New" screen.
	 *
	 * The same job as the Templates tab in the builder, so the same look. A wall
	 * of twenty nine tiles is not solved with smaller tiles but by not drawing a
	 * tile until it is asked for: the screen is a list of JOBS, every job is one
	 * row, and a closed row holds the names of all its forms.
	 *
	 * It all works without JavaScript, because the state sits in the address:
	 * `open` is the open group, `s` is the searched word, `show` is the filter.
	 *
	 * @return void
	 */
	private static function render_templates() {

		$all    = Ranq_Forms_Templates::all();
		$groups = Ranq_Forms_Templates::groups();
		$notes  = self::template_notes();

		// The numbers are read out of the registry, never typed in by hand.
		$total      = count( $all );
		$with_steps = 0;
		$with_file  = 0;
		$by_group   = array();

		foreach ( $all as $key => $template ) {

			if ( Ranq_Forms_Templates::steps( $template ) > 1 ) {
				++$with_steps;
			}

			if ( self::template_has_file( $template ) ) {
				++$with_file;
			}

			$group = isset( $template['group'] ) ? $template['group'] : 'start';

			if ( ! isset( $by_group[ $group ] ) ) {
				$by_group[ $group ] = array();
			}

			$by_group[ $group ][ $key ] = $template;
		}

		// The same reckoning as in the Templates tab in the builder: every group with
		// at least one template counts, and "start" with them, because a blank form
		// and a recommendation are a job of their own even without a row.
		$jobs = 0;

		foreach ( $groups as $group => $label ) {

			if ( ! empty( $by_group[ $group ] ) ) {
				++$jobs;
			}
		}

		$search_label = sprintf(
			/* translators: %d: number of ready forms. */
			__( 'Search %d forms by name or by what they do', '2ranq-forms' ),
			(int) $total
		);

		// With nothing at all in the address, Contact is open, because that is the job
		// most people come for. Closing a row sends `open=none`, which is not the name
		// of any group: without that, "I closed everything" would be no different from
		// "I have not touched anything yet" and the row would spring back to Contact.
		// phpcs:disable WordPress.Security.NonceVerification.Recommended -- display state only, nothing is changed.
		$search = isset( $_GET['s'] ) ? trim( sanitize_text_field( wp_unslash( $_GET['s'] ) ) ) : '';
		$show   = isset( $_GET['show'] ) ? sanitize_key( wp_unslash( $_GET['show'] ) ) : 'all';
		$open   = isset( $_GET['open'] ) ? sanitize_key( wp_unslash( $_GET['open'] ) ) : 'contact';
		// phpcs:enable WordPress.Security.NonceVerification.Recommended

		if ( ! in_array( $show, array( 'all', 'steps', 'file' ), true ) ) {
			$show = 'all';
		}

		if ( ! isset( $by_group[ $open ] ) || 'start' === $open ) {
			$open = '';
		}

		$looking = '' !== $search || 'all' !== $show;
		?>
		<div class="wrap ranq-admin">
			<div class="ranq-nf">

				<div class="ranq-nf__head">
					<div class="ranq-nf__intro">
						<h1 class="ranq-nf__title"><?php esc_html_e( 'Start from a ready form', '2ranq-forms' ); ?></h1>
						<p class="ranq-nf__lead">
							<?php esc_html_e( 'A whole form, ready to use. Pick one and change anything afterwards.', '2ranq-forms' ); ?>
							<?php
							printf(
								/* translators: 1: number of kinds of job, 2: number of ready forms, 3: how many of them are split into steps. */
								esc_html__( '%1$d kinds of job, %2$d forms, %3$d of them split into steps.', '2ranq-forms' ),
								(int) $jobs,
								(int) $total,
								(int) $with_steps
							);
							?>
						</p>
					</div>

					<?php
					// Searching goes through the address, so it works without a script.
					// Someone who knows exactly what they want looks at no group at all.
					?>
					<form class="ranq-nf__tools" method="get" action="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>">
						<input type="hidden" name="page" value="<?php echo esc_attr( self::PAGE_NEW ); ?>" />
						<?php if ( 'all' !== $show ) : ?>
							<input type="hidden" name="show" value="<?php echo esc_attr( $show ); ?>" />
						<?php endif; ?>

						<label class="ranq-nf__search">
							<svg class="ranq-nf__search-icon" width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
								<circle cx="7" cy="7" r="4.2" fill="none" stroke="currentColor" stroke-width="1.5" />
								<path d="m10.3 10.3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
							</svg>
							<span class="screen-reader-text"><?php echo esc_html( $search_label ); ?></span>
							<input
								type="search"
								name="s"
								class="ranq-nf__search-input"
								value="<?php echo esc_attr( $search ); ?>"
								placeholder="<?php echo esc_attr( $search_label ); ?>"
							/>
						</label>

						<div class="ranq-nf__filters">
							<a
								class="ranq-nf__filter<?php echo 'all' === $show ? ' is-on' : ''; ?>"
								href="<?php echo esc_url( self::templates_url( array( 's' => $search ) ) ); ?>"
								<?php echo 'all' === $show ? 'aria-current="true"' : ''; ?>
							>
								<?php
								printf(
									/* translators: %d: number of ready forms. */
									esc_html__( 'All %d', '2ranq-forms' ),
									(int) $total
								);
								?>
							</a>

							<a
								class="ranq-nf__filter<?php echo 'steps' === $show ? ' is-on' : ''; ?>"
								href="<?php echo esc_url( self::templates_url( array( 's' => $search, 'show' => 'steps' ) ) ); ?>"
								<?php echo 'steps' === $show ? 'aria-current="true"' : ''; ?>
							>
								<?php self::render_steps( 3 ); ?>
								<span>
									<?php
									printf(
										/* translators: %d: number of forms split into steps. */
										esc_html__( 'With steps %d', '2ranq-forms' ),
										(int) $with_steps
									);
									?>
								</span>
							</a>

							<a
								class="ranq-nf__filter<?php echo 'file' === $show ? ' is-on' : ''; ?>"
								href="<?php echo esc_url( self::templates_url( array( 's' => $search, 'show' => 'file' ) ) ); ?>"
								<?php echo 'file' === $show ? 'aria-current="true"' : ''; ?>
							>
								<?php
								printf(
									/* translators: %d: number of forms that ask for a file. */
									esc_html__( 'With file upload %d', '2ranq-forms' ),
									(int) $with_file
								);
								?>
							</a>
						</div>
					</form>
				</div>

				<div class="ranq-nf__body">

					<?php if ( $looking ) : ?>

						<?php
						$found = array();

						foreach ( $all as $key => $template ) {

							if ( 'steps' === $show && Ranq_Forms_Templates::steps( $template ) < 2 ) {
								continue;
							}

							if ( 'file' === $show && ! self::template_has_file( $template ) ) {
								continue;
							}

							if ( '' !== $search
								&& false === stripos( $template['name'] . ' ' . $template['description'], $search ) ) {
								continue;
							}

							$found[ $key ] = $template;
						}
						?>

						<div class="ranq-nf__found">
							<p class="ranq-nf__found-head">
								<?php
								if ( $found ) {
									printf(
										/* translators: 1: how many forms match, 2: how many ready forms there are. */
										esc_html__( '%1$d of %2$d forms', '2ranq-forms' ),
										count( $found ),
										(int) $total
									);
								} else {
									esc_html_e( 'No ready form matches that word.', '2ranq-forms' );
								}
								?>
							</p>

							<?php foreach ( $found as $key => $template ) : ?>
								<a class="ranq-nf__found-row" href="<?php echo esc_url( self::create_url( $key ) ); ?>">
									<span class="ranq-nf__found-text">
										<b class="ranq-nf__found-name">
											<?php
											echo wp_kses( self::highlight( $template['name'], $search ), array( 'mark' => array() ) );
											?>
										</b>
										<small class="ranq-nf__found-desc">
											<?php
											echo wp_kses( self::highlight( $template['description'], $search ), array( 'mark' => array() ) );
											?>
										</small>
									</span>
									<?php self::render_meta( $template ); ?>
								</a>
							<?php endforeach; ?>
						</div>

					<?php else : ?>

						<?php
						// The recommendation and the blank form stand OUTSIDE the wall of
						// tiles, as the two choices offered first.
						$first = isset( $all[ self::TPL_FIRST ] ) ? $all[ self::TPL_FIRST ] : null;
						$blank = isset( $all[ self::TPL_BLANK ] ) ? $all[ self::TPL_BLANK ] : null;
						?>

						<div class="ranq-nf__start">
							<?php if ( $first ) : ?>
								<div class="ranq-nf__card">
									<div class="ranq-nf__card-text">
										<span class="ranq-nf__flag"><?php esc_html_e( 'Most sites start here', '2ranq-forms' ); ?></span>
										<h2 class="ranq-nf__card-name"><?php echo esc_html( $first['name'] ); ?></h2>
										<p class="ranq-nf__card-desc"><?php echo esc_html( $first['description'] ); ?></p>
										<div class="ranq-nf__card-foot">
											<a class="ranq-nf__use" href="<?php echo esc_url( self::create_url( self::TPL_FIRST ) ); ?>">
												<?php esc_html_e( 'Use this form', '2ranq-forms' ); ?>
											</a>
											<?php self::render_meta( $first ); ?>
										</div>
									</div>
									<?php self::render_sketch( $first, true ); ?>
								</div>
							<?php endif; ?>

							<?php if ( $blank ) : ?>
								<div class="ranq-nf__card ranq-nf__card--blank">
									<div class="ranq-nf__card-text">
										<h2 class="ranq-nf__card-name"><?php echo esc_html( $blank['name'] ); ?></h2>
										<p class="ranq-nf__card-desc"><?php echo esc_html( $blank['description'] ); ?></p>
									</div>
									<?php self::render_sketch( $blank, true ); ?>
									<div class="ranq-nf__card-foot">
										<a class="ranq-nf__use ranq-nf__use--quiet" href="<?php echo esc_url( self::create_url( self::TPL_BLANK ) ); ?>">
											<?php esc_html_e( 'Start blank', '2ranq-forms' ); ?>
										</a>
										<?php self::render_meta( $blank ); ?>
									</div>
								</div>
							<?php endif; ?>
						</div>

						<div class="ranq-nf__jobs">
							<?php
							foreach ( $groups as $group => $label ) :

								if ( 'start' === $group || empty( $by_group[ $group ] ) ) {
									continue;
								}

								$list    = $by_group[ $group ];
								$is_open = $open === $group;
								$anchor  = 'ranq-job-' . $group;

								$all_steps = true;

								foreach ( $list as $one ) {

									if ( Ranq_Forms_Templates::steps( $one ) < 2 ) {
										$all_steps = false;
									}
								}
								?>
								<div class="ranq-nf__job<?php echo $is_open ? ' is-open' : ''; ?>" id="<?php echo esc_attr( $anchor ); ?>">
									<div class="ranq-nf__job-head">
										<?php
										// The whole head of the row is a target for opening, while
										// the form names above it are links of their own. That way
										// there is no link inside a link and the row still clicks whole.
										?>
										<a
											class="ranq-nf__job-toggle"
											href="<?php echo esc_url( self::templates_url( array( 'open' => $is_open ? 'none' : $group ), $anchor ) ); ?>"
											aria-expanded="<?php echo $is_open ? 'true' : 'false'; ?>"
										>
											<span class="dashicons dashicons-arrow-right-alt2 ranq-nf__job-arrow" aria-hidden="true"></span>
											<span class="ranq-nf__job-name">
												<?php echo esc_html( $label ); ?>
												<?php if ( isset( $notes[ $group ] ) ) : ?>
													<small><?php echo esc_html( $notes[ $group ] ); ?></small>
												<?php endif; ?>
											</span>
										</a>

										<?php if ( ! $is_open ) : ?>
											<span class="ranq-nf__chips">
												<?php foreach ( $list as $key => $template ) : ?>
													<a class="ranq-nf__chip" href="<?php echo esc_url( self::create_url( $key ) ); ?>">
														<?php if ( Ranq_Forms_Templates::steps( $template ) > 1 ) : ?>
															<?php self::render_steps( Ranq_Forms_Templates::steps( $template ) ); ?>
														<?php endif; ?>
														<span class="ranq-nf__chip-name"><?php echo esc_html( $template['name'] ); ?></span>
														<em class="ranq-nf__chip-count"><?php echo esc_html( (string) count( $template['fields'] ) ); ?></em>
													</a>
												<?php endforeach; ?>
											</span>
										<?php endif; ?>

										<span class="ranq-nf__job-count">
											<?php
											if ( $all_steps ) {
												printf(
													/* translators: %d: number of ready forms in this group, all of them split into steps. */
													esc_html__( '%d forms, all in steps', '2ranq-forms' ),
													count( $list )
												);
											} else {
												printf(
													/* translators: %d: number of ready forms in this group. */
													esc_html__( '%d forms', '2ranq-forms' ),
													count( $list )
												);
											}
											?>
										</span>
									</div>

									<?php if ( $is_open ) : ?>
										<div class="ranq-nf__job-body">
											<div class="ranq-nf__grid">
												<?php foreach ( $list as $key => $template ) : ?>
													<?php self::render_tile( $key, $template ); ?>
												<?php endforeach; ?>
											</div>
										</div>
									<?php endif; ?>
								</div>
							<?php endforeach; ?>
						</div>

					<?php endif; ?>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * The plugin settings.
	 *
	 * The seven parts stay in the same order, but they no longer look equally
	 * important. On the left is a table of contents, which is not a list of names
	 * but a list of STATES, and it splits the parts into what gets touched, what
	 * is set up once, and where you have to be careful.
	 *
	 * @return void
	 */
	private static function render_settings() {

		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- only a success message.
		$saved = isset( $_GET['saved'] );

		$notify   = (string) get_option( 'ranq_forms_notify_email', get_option( 'admin_email' ) );
		$store_ip = (bool) get_option( 'ranq_forms_store_ip', true );
		$no_style = (bool) get_option( 'ranq_forms_disable_styles', false );
		$wipe     = (bool) get_option( 'ranq_forms_remove_data_on_uninstall', false );

		$company = get_option( 'ranq_forms_company', array() );
		$company = is_array( $company ) ? $company : array();

		// The third item is an example sitting inside an empty box. The example is NOT
		// saved, so an empty field still means empty, but the box no longer looks as
		// if somebody forgot something.
		$company_fields = array(
			'name'   => array( __( 'Company name', '2ranq-forms' ), get_bloginfo( 'name' ), '' ),
			'street' => array( __( 'Street address', '2ranq-forms' ), '', '1200 Market Street, Suite 400' ),
			'city'   => array( __( 'City, state and ZIP', '2ranq-forms' ), '', 'San Francisco, CA 94103' ),
			'phone'  => array( __( 'Phone', '2ranq-forms' ), '', '(415) 555-0134' ),
			'email'  => array( __( 'Email', '2ranq-forms' ), get_option( 'admin_email' ), '' ),
			'hours'  => array( __( 'Opening hours', '2ranq-forms' ), '', 'Monday to Friday, 9am to 5pm' ),
		);

		$company_filled = 0;

		foreach ( $company_fields as $company_key => $company_meta ) {

			$one = isset( $company[ $company_key ] ) ? $company[ $company_key ] : $company_meta[1];

			if ( '' !== trim( (string) $one ) ) {
				++$company_filled;
			}
		}

		// Which link is set up. The same figure serves the table of contents and the
		// mark next to the heading, so it is worked out once.
		$conn_keys = Ranq_Forms_Integrations::keys();
		$conn_on   = array();

		foreach ( Ranq_Forms_Integrations::services() as $conn_key => $conn ) {

			foreach ( $conn['keys'] as $conn_field => $conn_meta ) {

				if ( '' !== (string) $conn_keys[ $conn_key ][ $conn_field ] ) {
					$conn_on[] = $conn['name'];

					break;
				}
			}
		}

		$spam      = Ranq_Forms_Spam::get();
		$providers = Ranq_Forms_Spam::providers();
		$rc_types  = Ranq_Forms_Spam::recaptcha_types();

		$spam_name = isset( $providers[ $spam['provider'] ] ) ? $providers[ $spam['provider'] ]['name'] : __( 'Off', '2ranq-forms' );

		if ( 'recaptcha' === $spam['provider'] && isset( $rc_types[ $spam['rc_type'] ] ) ) {
			$spam_name = $rc_types[ $spam['rc_type'] ];
		}

		$counted   = wp_count_posts( Ranq_Forms_Post_Type::POST_TYPE );
		$how_many  = (int) ( isset( $counted->publish ) ? $counted->publish : 0 ) + (int) ( isset( $counted->draft ) ? $counted->draft : 0 );
		$page_url  = admin_url( 'admin.php?page=' . self::PAGE_SETTINGS );
		?>
		<div class="wrap ranq-admin">
			<form method="post" action="<?php echo esc_url( $page_url ); ?>" class="ranq-settings-form ranq-set">
				<?php wp_nonce_field( 'ranq_forms_settings' ); ?>
				<input type="hidden" name="ranq_action" value="save_settings" />

				<?php // Saving sits ABOVE, because the page scrolls a long way.?>
				<div class="ranq-set__head">
					<div class="ranq-set__name">
						<h1><?php esc_html_e( 'Settings', '2ranq-forms' ); ?></h1>
						<p><?php esc_html_e( 'These apply to the whole site. Each form can still decide for itself, under Settings inside the form builder.', '2ranq-forms' ); ?></p>
					</div>

					<div class="ranq-set__right">
						<?php if ( $saved ) : ?>
							<span class="ranq-set__state" role="status">
								<i class="ranq-dot ranq-dot--ok" aria-hidden="true"></i>
								<?php esc_html_e( 'Settings saved.', '2ranq-forms' ); ?>
							</span>
						<?php endif; ?>

						<button type="submit" class="ranq-btn ranq-btn--main"><?php esc_html_e( 'Save settings', '2ranq-forms' ); ?></button>
					</div>
				</div>

				<div class="ranq-set__body">

					<aside class="ranq-set__index">
						<nav class="ranq-index" aria-label="<?php esc_attr_e( 'Settings groups', '2ranq-forms' ); ?>">

							<p class="ranq-index__title"><?php esc_html_e( 'You touch these', '2ranq-forms' ); ?></p>

							<a class="ranq-index__item" href="#ranq-c-notifications">
								<i class="ranq-dot <?php echo '' !== $notify ? 'ranq-dot--ok' : 'ranq-dot--warn'; ?>" aria-hidden="true"></i>
								<span>
									<b><?php esc_html_e( 'Notifications', '2ranq-forms' ); ?></b>
									<small><?php echo esc_html( '' !== $notify ? $notify : __( 'Nobody is notified', '2ranq-forms' ) ); ?></small>
								</span>
							</a>

							<a class="ranq-index__item" href="#ranq-c-details">
								<i class="ranq-dot <?php echo $company_filled ? 'ranq-dot--ok' : 'ranq-dot--dead'; ?>" aria-hidden="true"></i>
								<span>
									<b><?php esc_html_e( 'Your details', '2ranq-forms' ); ?></b>
									<small>
										<?php
										printf(
											/* translators: 1: how many boxes are filled in, 2: how many boxes there are. */
											esc_html__( '%1$d of %2$d filled in', '2ranq-forms' ),
											absint( $company_filled ),
											absint( count( $company_fields ) )
										);
										?>
									</small>
								</span>
							</a>

							<p class="ranq-index__title"><?php esc_html_e( 'You set these once', '2ranq-forms' ); ?></p>

							<a class="ranq-index__item" href="#ranq-c-connections">
								<i class="ranq-dot <?php echo $conn_on ? 'ranq-dot--ok' : 'ranq-dot--dead'; ?>" aria-hidden="true"></i>
								<span>
									<b><?php esc_html_e( 'Connections', '2ranq-forms' ); ?></b>
									<small><?php echo esc_html( $conn_on ? implode( ', ', $conn_on ) : __( 'Nothing connected', '2ranq-forms' ) ); ?></small>
								</span>
							</a>

							<a class="ranq-index__item" href="#ranq-c-spam">
								<i class="ranq-dot <?php echo 'none' !== $spam['provider'] ? 'ranq-dot--ok' : 'ranq-dot--dead'; ?>" aria-hidden="true"></i>
								<span>
									<b><?php esc_html_e( 'Spam protection', '2ranq-forms' ); ?></b>
									<small><?php echo esc_html( $spam_name ); ?></small>
								</span>
							</a>

							<a class="ranq-index__item" href="#ranq-c-privacy">
								<i class="ranq-dot ranq-dot--ok" aria-hidden="true"></i>
								<span>
									<b><?php esc_html_e( 'Privacy', '2ranq-forms' ); ?></b>
									<small><?php echo esc_html( $store_ip ? __( 'IP address is stored', '2ranq-forms' ) : __( 'IP address is not stored', '2ranq-forms' ) ); ?></small>
								</span>
							</a>

							<a class="ranq-index__item" href="#ranq-c-appearance">
								<i class="ranq-dot ranq-dot--ok" aria-hidden="true"></i>
								<span>
									<b><?php esc_html_e( 'Appearance', '2ranq-forms' ); ?></b>
									<small><?php echo esc_html( $no_style ? __( 'You style forms yourself', '2ranq-forms' ) : __( 'Our stylesheet loads', '2ranq-forms' ) ); ?></small>
								</span>
							</a>

							<div class="ranq-index__rule"></div>
							<p class="ranq-index__title"><?php esc_html_e( 'Careful', '2ranq-forms' ); ?></p>

							<a class="ranq-index__item ranq-index__item--danger" href="#ranq-c-delete">
								<i class="ranq-dot <?php echo $wipe ? 'ranq-dot--danger' : 'ranq-dot--dead'; ?>" aria-hidden="true"></i>
								<span>
									<b><?php esc_html_e( 'When the plugin is deleted', '2ranq-forms' ); ?></b>
									<small><?php echo esc_html( $wipe ? __( 'Everything is deleted', '2ranq-forms' ) : __( 'Your data is kept', '2ranq-forms' ) ); ?></small>
								</span>
							</a>

						</nav>
					</aside>

					<div class="ranq-set__paper">

						<?php // ---------- 1. notifications ----------?>
						<section class="ranq-card ranq-sect" id="ranq-c-notifications">
							<div class="ranq-sect__head">
								<h2><?php esc_html_e( 'Notifications', '2ranq-forms' ); ?></h2>
								<span class="ranq-tag <?php echo '' !== $notify ? 'ranq-tag--ok' : ''; ?>">
									<?php echo esc_html( '' !== $notify ? __( 'On', '2ranq-forms' ) : __( 'Off', '2ranq-forms' ) ); ?>
								</span>
							</div>

							<div class="ranq-settings__row">
								<label class="ranq-settings__label" for="ranq_forms_notify_email">
									<?php esc_html_e( 'Send new entries to', '2ranq-forms' ); ?>
									<small><?php esc_html_e( 'Each form can send somewhere else instead.', '2ranq-forms' ); ?></small>
								</label>
								<input
									type="email"
									class="ranq-settings__input"
									id="ranq_forms_notify_email"
									name="ranq_forms_notify_email"
									value="<?php echo esc_attr( $notify ); ?>"
								/>
								<p class="ranq-settings__help">
									<?php esc_html_e( 'Leave empty to stop sending notifications entirely. Entries are still saved in your own database either way.', '2ranq-forms' ); ?>
								</p>
							</div>
						</section>

						<?php // ---------- 2. company details ----------?>
						<section class="ranq-card ranq-sect" id="ranq-c-details">
							<div class="ranq-sect__head">
								<h2><?php esc_html_e( 'Your details', '2ranq-forms' ); ?></h2>
								<span class="ranq-tag">
									<?php
									printf(
										/* translators: 1: how many boxes are filled in, 2: how many boxes there are. */
										esc_html__( '%1$d of %2$d filled in', '2ranq-forms' ),
										absint( $company_filled ),
										absint( count( $company_fields ) )
									);
									?>
								</span>
							</div>

							<p class="ranq-sect__lead">
								<?php esc_html_e( 'Used to fill in the ready made sections, so you do not type them again in every one. The phone number becomes a link that dials when tapped on a phone.', '2ranq-forms' ); ?>
							</p>

							<div class="ranq-settings__row ranq-settings__row--wide">
								<span class="ranq-settings__label">
									<?php esc_html_e( 'Company', '2ranq-forms' ); ?>
									<small><?php esc_html_e( 'Used by the ready made sections around your form.', '2ranq-forms' ); ?></small>
								</span>

								<div class="ranq-set__grid">
									<?php foreach ( $company_fields as $key => $meta ) : ?>
										<?php $id = 'ranq_company_' . $key; ?>
										<label class="ranq-set__gitem" for="<?php echo esc_attr( $id ); ?>">
											<span><?php echo esc_html( $meta[0] ); ?></span>
											<input
												type="<?php echo 'email' === $key ? 'email' : 'text'; ?>"
												class="ranq-settings__input"
												id="<?php echo esc_attr( $id ); ?>"
												name="<?php echo esc_attr( $id ); ?>"
												value="<?php echo esc_attr( isset( $company[ $key ] ) ? $company[ $key ] : $meta[1] ); ?>"
												placeholder="<?php echo esc_attr( isset( $meta[2] ) ? $meta[2] : '' ); ?>"
											/>
										</label>
									<?php endforeach; ?>
								</div>
							</div>
						</section>

						<?php // ---------- 3. links to outside services ----------?>
						<section class="ranq-card ranq-sect" id="ranq-c-connections">
							<div class="ranq-sect__head">
								<h2><?php esc_html_e( 'Connections', '2ranq-forms' ); ?></h2>
								<span class="ranq-tag <?php echo $conn_on ? 'ranq-tag--ok' : ''; ?>">
									<?php echo esc_html( $conn_on ? implode( ', ', $conn_on ) : __( 'Nothing connected', '2ranq-forms' ) ); ?>
								</span>
							</div>

							<p class="ranq-sect__lead">
								<?php esc_html_e( 'Keys for outside services. You enter them once here, then each form chooses who its entries go to, under Settings inside the form builder. All of it is free and unlocked.', '2ranq-forms' ); ?>
							</p>

							<?php
							// The rule about the secret key is on the screen, so nobody
							// thinks the key has vanished. The behaviour is already that way.
							?>
							<p class="ranq-key-rule">
								<svg width="15" height="15" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
									<rect x="3" y="7" width="10" height="7" rx="1.6" fill="none" stroke="currentColor" stroke-width="1.4" />
									<path d="M5.5 7V5.2a2.5 2.5 0 0 1 5 0V7" fill="none" stroke="currentColor" stroke-width="1.4" />
								</svg>
								<span>
									<b><?php esc_html_e( 'A secret key is never printed back on this screen.', '2ranq-forms' ); ?></b>
									<?php esc_html_e( 'Once it is saved you see only that it is there. A box you leave empty keeps the key that is already working, it never wipes it.', '2ranq-forms' ); ?>
								</span>
							</p>

							<?php
							foreach ( Ranq_Forms_Integrations::services() as $conn_key => $conn ) :

								$conn_howto = function ( $conn, $open ) {
									?>
									<div class="ranq-howto">
										<p class="ranq-settings__help"><?php echo esc_html( $conn['note'] ); ?></p>

										<?php if ( ! empty( $conn['steps'] ) ) : ?>
											<details class="ranq-howto__box" <?php echo $open ? 'open' : ''; ?>>
												<summary class="ranq-howto__title">
													<svg width="10" height="10" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 6 4.5 4.5L12.5 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
													<?php esc_html_e( 'How to set it up', '2ranq-forms' ); ?>
													<u>
														<?php
														printf(
															/* translators: %d: how many steps. */
															esc_html( _n( '%d step', '%d steps', count( $conn['steps'] ), '2ranq-forms' ) ),
															absint( count( $conn['steps'] ) )
														);
														?>
													</u>
												</summary>
												<ol class="ranq-howto__steps">
													<?php foreach ( $conn['steps'] as $step ) : ?>
														<li><?php echo esc_html( $step ); ?></li>
													<?php endforeach; ?>
												</ol>

												<?php if ( ! empty( $conn['link'] ) ) : ?>
													<a class="ranq-btn ranq-btn--second ranq-btn--small ranq-howto__link" href="<?php echo esc_url( $conn['link'] ); ?>" target="_blank" rel="noopener noreferrer">
														<?php echo esc_html( isset( $conn['link_text'] ) ? $conn['link_text'] : __( 'Open the service', '2ranq-forms' ) ); ?>
														<svg width="11" height="11" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M6 3h7v7M13 3 4 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
														<span class="screen-reader-text"><?php esc_html_e( '(opens in a new tab)', '2ranq-forms' ); ?></span>
													</a>
												<?php endif; ?>
											</details>
										<?php endif; ?>
									</div>
									<?php
								};

								if ( ! $conn['keys'] ) :
									?>
									<div class="ranq-settings__row">
										<span class="ranq-settings__label">
											<?php echo esc_html( $conn['name'] ); ?>
											<small><span class="ranq-tag"><?php esc_html_e( 'No key needed', '2ranq-forms' ); ?></span></small>
										</span>
										<p class="ranq-nofield">
											<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
												<circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1.4" />
												<path d="M8 7.4v4M8 4.8v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
											</svg>
											<?php esc_html_e( 'Nothing to enter here. You give the address inside each form, under Settings.', '2ranq-forms' ); ?>
										</p>
										<?php $conn_howto( $conn, true ); ?>
									</div>
									<?php
									continue;
								endif;

								foreach ( $conn['keys'] as $conn_field => $conn_meta ) :
									$conn_id  = 'ranq_conn_' . $conn_key . '_' . $conn_field;
									$conn_val = isset( $conn_keys[ $conn_key ][ $conn_field ] ) ? $conn_keys[ $conn_key ][ $conn_field ] : '';
									$conn_pwd = 'password' === $conn_meta['type'];
									$conn_has = '' !== $conn_val;
									?>
									<div class="ranq-settings__row">
										<label class="ranq-settings__label" for="<?php echo esc_attr( $conn_id ); ?>">
											<?php echo esc_html( $conn['name'] ); ?>
											<small>
												<span class="ranq-tag <?php echo $conn_has ? 'ranq-tag--ok' : ''; ?>">
													<?php echo esc_html( $conn_has ? __( 'Connected', '2ranq-forms' ) : __( 'Not set up yet', '2ranq-forms' ) ); ?>
												</span>
											</small>
										</label>

										<div>
											<div class="ranq-key">
												<?php if ( $conn_pwd && $conn_has ) : ?>
													<?php
													// The key exists. Instead of an empty field, which looks as
													// if it had vanished, there is a padlock and a Replace button.
													?>
													<span class="ranq-key__saved">
														<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
															<rect x="3" y="7" width="10" height="7" rx="1.6" fill="none" stroke="currentColor" stroke-width="1.4" />
															<path d="M5.5 7V5.2a2.5 2.5 0 0 1 5 0V7" fill="none" stroke="currentColor" stroke-width="1.4" />
														</svg>
														&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;
													</span>
													<button type="button" class="ranq-btn ranq-btn--second ranq-btn--small ranq-key__replace">
														<?php esc_html_e( 'Replace', '2ranq-forms' ); ?>
													</button>
												<?php endif; ?>

												<input
													type="<?php echo $conn_pwd ? 'password' : 'text'; ?>"
													class="ranq-settings__input ranq-key__input"
													id="<?php echo esc_attr( $conn_id ); ?>"
													name="<?php echo esc_attr( $conn_id ); ?>"
													value="<?php echo esc_attr( $conn_pwd ? '' : $conn_val ); ?>"
													autocomplete="off"
													spellcheck="false"
													placeholder="<?php echo esc_attr( $conn_pwd ? __( 'Paste a new secret key to replace it', '2ranq-forms' ) : $conn_meta['label'] ); ?>"
													<?php echo $conn_pwd && $conn_has ? 'hidden' : ''; ?>
												/>
											</div>

											<p class="ranq-settings__help">
												<?php
												echo esc_html(
													$conn_pwd
														? __( 'It is kept, and it keeps working, until you replace it here.', '2ranq-forms' )
														: $conn_meta['label'] . '. ' . __( 'This one is not secret, so you can read it back.', '2ranq-forms' )
												);
												?>
											</p>
										</div>

										<?php $conn_howto( $conn, ! $conn_has ); ?>
									</div>
									<?php
								endforeach;

							endforeach;

							$conn_log = get_option( 'ranq_forms_connection_errors', array() );

							if ( is_array( $conn_log ) && $conn_log ) :
								?>
								<div class="ranq-settings__row ranq-settings__row--wide">
									<span class="ranq-settings__label"><?php esc_html_e( 'Last problems', '2ranq-forms' ); ?></span>
									<ul class="ranq-settings__help ranq-set__log">
										<?php foreach ( array_slice( $conn_log, 0, 5 ) as $one ) : ?>
											<li><?php echo esc_html( $one['when'] . ' · ' . $one['service'] . ' · ' . $one['message'] ); ?></li>
										<?php endforeach; ?>
									</ul>
								</div>
							<?php endif; ?>
						</section>

						<?php // ---------- 4. spam protection ----------?>
						<section class="ranq-card ranq-sect" id="ranq-c-spam">
							<div class="ranq-sect__head">
								<h2><?php esc_html_e( 'Spam protection', '2ranq-forms' ); ?></h2>
								<span class="ranq-tag <?php echo 'none' !== $spam['provider'] ? 'ranq-tag--ok' : ''; ?>">
									<?php echo esc_html( $spam_name ); ?>
								</span>
							</div>

							<p class="ranq-sect__lead">
								<?php esc_html_e( 'Every form already has a hidden trap and a rate limit, and those are always on. Here you add an outside service on top of that. You need an account with them and two keys. It is free with all three.', '2ranq-forms' ); ?>
							</p>

							<div class="ranq-settings__row ranq-settings__row--wide">
								<span class="ranq-settings__label">
									<?php esc_html_e( 'Service', '2ranq-forms' ); ?>
									<small><?php esc_html_e( 'Pick one. Only the boxes it needs stay on the screen.', '2ranq-forms' ); ?></small>
								</span>

								<div class="ranq-svcs" id="ranq_spam_provider">
									<?php foreach ( $providers as $key => $one ) : ?>
										<label class="ranq-svc<?php echo $spam['provider'] === $key ? ' is-on' : ''; ?>">
											<input
												type="radio"
												class="ranq-svc__radio"
												name="ranq_spam_provider"
												value="<?php echo esc_attr( $key ); ?>"
												<?php checked( $spam['provider'], $key ); ?>
											/>
											<b><i aria-hidden="true"></i> <?php echo esc_html( $one['name'] ); ?></b>
											<small><?php echo esc_html( $one['note'] ); ?></small>
										</label>
									<?php endforeach; ?>
								</div>
							</div>

							<div class="ranq-settings__row ranq-settings__row--wide ranq-spam__only" data-for="recaptcha">
								<span class="ranq-settings__label">
									<?php esc_html_e( 'Which reCAPTCHA', '2ranq-forms' ); ?>
									<small><?php esc_html_e( 'Register the same version with Google.', '2ranq-forms' ); ?></small>
								</span>

								<div class="ranq-pick" id="ranq_spam_rc_type">
									<?php foreach ( $rc_types as $key => $name ) : ?>
										<label class="ranq-pick__one<?php echo $spam['rc_type'] === $key ? ' is-on' : ''; ?>">
											<input
												type="radio"
												class="ranq-pick__radio"
												name="ranq_spam_rc_type"
												value="<?php echo esc_attr( $key ); ?>"
												<?php checked( $spam['rc_type'], $key ); ?>
											/>
											<i aria-hidden="true"></i>
											<?php echo esc_html( $name ); ?>
										</label>
									<?php endforeach; ?>
								</div>
							</div>

							<?php foreach ( $providers as $key => $one ) : ?>
								<?php if ( ! empty( $one['steps'] ) ) : ?>
								<div class="ranq-howto ranq-spam__note ranq-spam__howto" data-for="<?php echo esc_attr( $key ); ?>">
									<details class="ranq-howto__box" <?php echo '' === $spam['secret'] ? 'open' : ''; ?>>
										<summary class="ranq-howto__title">
											<svg width="10" height="10" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 6 4.5 4.5L12.5 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
											<?php esc_html_e( 'Where to get the keys', '2ranq-forms' ); ?>
											<u>
												<?php
												printf(
													/* translators: %d: how many steps. */
													esc_html( _n( '%d step', '%d steps', count( $one['steps'] ), '2ranq-forms' ) ),
													absint( count( $one['steps'] ) )
												);
												?>
											</u>
										</summary>
										<ol class="ranq-howto__steps">
											<?php foreach ( $one['steps'] as $step ) : ?>
												<li><?php echo esc_html( $step ); ?></li>
											<?php endforeach; ?>
										</ol>

										<?php if ( ! empty( $one['link'] ) ) : ?>
											<a class="ranq-btn ranq-btn--second ranq-btn--small ranq-howto__link" href="<?php echo esc_url( $one['link'] ); ?>" target="_blank" rel="noopener noreferrer">
												<?php echo esc_html( isset( $one['link_text'] ) ? $one['link_text'] : __( 'Open the service', '2ranq-forms' ) ); ?>
												<svg width="11" height="11" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M6 3h7v7M13 3 4 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
												<span class="screen-reader-text"><?php esc_html_e( '(opens in a new tab)', '2ranq-forms' ); ?></span>
											</a>
										<?php endif; ?>
									</details>
								</div>
								<?php endif; ?>
							<?php endforeach; ?>

							<div class="ranq-settings__row ranq-spam__keys">
								<label class="ranq-settings__label" for="ranq_spam_site_key">
									<?php esc_html_e( 'Site key', '2ranq-forms' ); ?>
									<small><span class="ranq-tag"><?php esc_html_e( 'Public', '2ranq-forms' ); ?></span></small>
								</label>
								<input
									type="text"
									class="ranq-settings__input ranq-settings__input--mono"
									id="ranq_spam_site_key"
									name="ranq_spam_site_key"
									value="<?php echo esc_attr( $spam['site_key'] ); ?>"
									autocomplete="off"
									spellcheck="false"
								/>
								<p class="ranq-settings__help">
									<?php esc_html_e( 'This one is public. It goes into the page, so it is shown back to you in full.', '2ranq-forms' ); ?>
								</p>
							</div>

							<div class="ranq-settings__row ranq-spam__keys">
								<label class="ranq-settings__label" for="ranq_spam_secret">
									<?php esc_html_e( 'Secret key', '2ranq-forms' ); ?>
									<small>
										<span class="ranq-tag <?php echo '' !== $spam['secret'] ? 'ranq-tag--ok' : ''; ?>">
											<?php echo esc_html( '' !== $spam['secret'] ? __( 'Saved, hidden', '2ranq-forms' ) : __( 'Not set yet', '2ranq-forms' ) ); ?>
										</span>
									</small>
								</label>

								<div>
									<input
										type="password"
										class="ranq-settings__input"
										id="ranq_spam_secret"
										name="ranq_spam_secret"
										value=""
										autocomplete="new-password"
										spellcheck="false"
										placeholder="<?php echo esc_attr( '' !== $spam['secret'] ? __( 'Paste a new secret key to replace it', '2ranq-forms' ) : __( 'Paste the secret key here', '2ranq-forms' ) ); ?>"
									/>

									<?php if ( '' !== $spam['secret'] ) : ?>
										<p class="ranq-key-rule ranq-key-rule--ok">
											<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8.5 3 3 6-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
											<span>
												<?php esc_html_e( 'A key is saved and it is working.', '2ranq-forms' ); ?>
												<b><?php esc_html_e( 'Leaving this box empty changes nothing.', '2ranq-forms' ); ?></b>
												<?php esc_html_e( 'The key is only replaced if you type a new one.', '2ranq-forms' ); ?>
											</span>
										</p>
									<?php endif; ?>
								</div>

								<p class="ranq-settings__help">
									<?php esc_html_e( 'Never shown again after saving, and never sent anywhere except to the service that checks it.', '2ranq-forms' ); ?>
								</p>
							</div>

							<div class="ranq-settings__row ranq-spam__only" data-for="recaptcha-v3">
								<label class="ranq-settings__label" for="ranq_spam_threshold">
									<?php esc_html_e( 'Score threshold', '2ranq-forms' ); ?>
									<small><?php esc_html_e( 'Version 3 only.', '2ranq-forms' ); ?></small>
								</label>
								<input
									type="number"
									class="ranq-settings__input ranq-settings__input--narrow"
									id="ranq_spam_threshold"
									name="ranq_spam_threshold"
									value="<?php echo esc_attr( $spam['threshold'] ); ?>"
									min="0"
									max="1"
									step="0.1"
								/>
								<p class="ranq-settings__help">
									<?php esc_html_e( 'Version three gives every visitor a score from 0 to 1. Anything under this number is treated as a robot. 0.5 is the usual starting point.', '2ranq-forms' ); ?>
								</p>
							</div>

							<div class="ranq-settings__row ranq-spam__keys">
								<label class="ranq-settings__label" for="ranq_spam_message">
									<?php esc_html_e( 'What the visitor sees when the check fails', '2ranq-forms' ); ?>
								</label>
								<input
									type="text"
									class="ranq-settings__input"
									id="ranq_spam_message"
									name="ranq_spam_message"
									value="<?php echo esc_attr( $spam['message'] ); ?>"
								/>
								<p class="ranq-settings__help">
									<?php esc_html_e( 'Each form can then be told whether to ask for it, under Settings inside the form builder.', '2ranq-forms' ); ?>
								</p>
							</div>
						</section>

						<?php // ---------- 5 and 6: two switches, side by side ----------?>
						<div class="ranq-sect__pair">

							<section class="ranq-card ranq-sect" id="ranq-c-privacy">
								<div class="ranq-sect__head">
									<h2><?php esc_html_e( 'Privacy', '2ranq-forms' ); ?></h2>
								</div>

								<label class="ranq-settings__toggle">
									<input type="checkbox" name="ranq_forms_store_ip" <?php checked( $store_ip ); ?> />
									<span><?php esc_html_e( 'Store the visitor IP address with each entry', '2ranq-forms' ); ?></span>
								</label>
								<p class="ranq-settings__help">
									<?php esc_html_e( 'Turn this off if you do not need it. Nothing is ever sent to us either way.', '2ranq-forms' ); ?>
								</p>
							</section>

							<section class="ranq-card ranq-sect" id="ranq-c-appearance">
								<div class="ranq-sect__head">
									<h2><?php esc_html_e( 'Appearance', '2ranq-forms' ); ?></h2>
								</div>

								<label class="ranq-settings__toggle">
									<input type="checkbox" name="ranq_forms_disable_styles" <?php checked( $no_style ); ?> />
									<span><?php esc_html_e( 'Do not load our stylesheet, I style forms myself', '2ranq-forms' ); ?></span>
								</label>
								<p class="ranq-settings__help">
									<?php esc_html_e( 'The form still works. It will simply inherit whatever your theme does.', '2ranq-forms' ); ?>
								</p>
							</section>

						</div>

						<?php // ---------- 7. deleting the plugin, set apart and dangerous ----------?>
						<section class="ranq-card ranq-sect ranq-sect--danger" id="ranq-c-delete">
							<div class="ranq-sect__head">
								<h2><?php esc_html_e( 'When the plugin is deleted', '2ranq-forms' ); ?></h2>
								<span class="ranq-tag <?php echo $wipe ? 'ranq-tag--danger' : 'ranq-tag--ok'; ?>">
									<?php echo esc_html( $wipe ? __( 'Everything is deleted', '2ranq-forms' ) : __( 'Your data is kept', '2ranq-forms' ) ); ?>
								</span>
							</div>

							<div class="ranq-danger-box">
								<svg width="18" height="18" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
									<path d="M8 2.2 1.6 13.4h12.8L8 2.2Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
									<path d="M8 6.2v3.4M8 11.2v.9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
								</svg>

								<div class="ranq-danger-box__text">
									<b><?php esc_html_e( 'Delete all forms and entries when the plugin is deleted', '2ranq-forms' ); ?></b>
									<p>
										<?php esc_html_e( 'Off by default. Deleting a plugin should not delete your data by surprise. Turn this on and there is no undo, no export, and no copy left behind.', '2ranq-forms' ); ?>
									</p>
									<?php if ( $how_many ) : ?>
										<span class="ranq-danger-box__count">
											<?php
											printf(
												/* translators: %d: how many forms there are. */
												esc_html( _n( '%d form and every entry it collected would be gone for good', '%d forms and every entry they collected would be gone for good', $how_many, '2ranq-forms' ) ),
												absint( $how_many )
											);
											?>
										</span>
									<?php endif; ?>
								</div>

								<label class="ranq-settings__toggle ranq-settings__toggle--danger">
									<input type="checkbox" name="ranq_forms_remove_data_on_uninstall" <?php checked( $wipe ); ?> />
									<span><?php echo esc_html( $wipe ? __( 'On', '2ranq-forms' ) : __( 'Off', '2ranq-forms' ) ); ?></span>
								</label>
							</div>
						</section>

						<div class="ranq-set__foot">
							<span><?php esc_html_e( 'Everything here is free and unlocked. There is nothing to buy.', '2ranq-forms' ); ?></span>
							<span class="ranq-set__ver">2ranq Forms <?php echo esc_html( RANQ_FORMS_VERSION ); ?></span>
						</div>

					</div>
				</div>
			</form>
		</div>
		<?php
	}

	/**
	 * The form list.
	 *
	 * The front door of the plugin. The job on this screen is to take a shortcode
	 * and put it on a page, so the shortcode is not text to be read but a button
	 * to be copied, and its column is the only white column on a grey body.
	 *
	 * @return void
	 */
	private static function render_list() {

		$forms = get_posts(
			array(
				'post_type'     => Ranq_Forms_Post_Type::POST_TYPE,
				'post_status'   => array( 'publish', 'draft' ),
				'numberposts'   => 100,
				'orderby'       => 'modified',
				'order'         => 'DESC',
				'no_found_rows' => true,
			)
		);

		$new_url = admin_url( 'admin.php?page=' . self::PAGE_NEW );

		// Everything is counted in ONE loop: the numbers in the filters, the largest
		// entry count that sets the bar width, and the state of every row. No new query.
		$rows         = array();
		$with_entries = 0;
		$no_fields    = 0;
		$most         = 0;

		foreach ( $forms as $form ) {

			$fields  = count( Ranq_Forms_Fields::get_form_fields( $form->ID ) );
			$entries = (int) Ranq_Forms_Entries::count_for_form( $form->ID );

			if ( $entries > 0 ) {
				++$with_entries;
			}

			if ( 0 === $fields ) {
				++$no_fields;
			}

			if ( $entries > $most ) {
				$most = $entries;
			}

			$rows[] = array(
				'form'    => $form,
				'fields'  => $fields,
				'entries' => $entries,
			);
		}
		?>
		<div class="wrap ranq-admin">
			<div class="ranq-fl">

				<div class="ranq-fl__head">
					<div class="ranq-fl__name">
						<h1 class="ranq-fl__title">
							<?php esc_html_e( 'Forms', '2ranq-forms' ); ?>
							<?php if ( $forms ) : ?>
								<span class="ranq-fl__count"><?php echo esc_html( (string) count( $forms ) ); ?></span>
							<?php endif; ?>
						</h1>
						<p class="ranq-fl__lead">
							<?php
							echo esc_html(
								$forms
									? __( 'Open a form to change it, or copy its shortcode into the page where the form should appear.', '2ranq-forms' )
									: __( 'Every feature is unlocked, there is nothing to buy.', '2ranq-forms' )
							);
							?>
						</p>
					</div>

					<div class="ranq-fl__tools">
						<?php if ( $forms ) : ?>
							<label class="ranq-search">
								<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
									<circle cx="7" cy="7" r="4.2" fill="none" stroke="currentColor" stroke-width="1.5" />
									<path d="m10.3 10.3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
								</svg>
								<span class="screen-reader-text"><?php esc_html_e( 'Search name or shortcode', '2ranq-forms' ); ?></span>
								<input
									type="search"
									id="ranq-forms-search"
									class="ranq-search__input"
									placeholder="<?php esc_attr_e( 'Search name or shortcode', '2ranq-forms' ); ?>"
								/>
							</label>
						<?php endif; ?>

						<a href="<?php echo esc_url( $new_url ); ?>" class="ranq-btn ranq-btn--main">
							<?php esc_html_e( 'New form', '2ranq-forms' ); ?>
						</a>
					</div>
				</div>

				<?php if ( ! $forms ) : ?>

					<div class="ranq-first">
						<h2><?php esc_html_e( 'Make your first form', '2ranq-forms' ); ?></h2>
						<p><?php esc_html_e( 'A contact form takes about a minute. Pick a ready form or start from an empty one, everything is editable afterwards.', '2ranq-forms' ); ?></p>

						<a href="<?php echo esc_url( $new_url ); ?>" class="ranq-btn ranq-btn--main ranq-btn--big">
							<?php esc_html_e( 'Create your first form', '2ranq-forms' ); ?>
						</a>

						<div class="ranq-first__steps">
							<div class="ranq-step">
								<span class="ranq-step__no">01</span>
								<b><?php esc_html_e( 'Build it', '2ranq-forms' ); ?></b>
								<p><?php esc_html_e( 'Drag fields in. The preview in the middle is your real form, not a picture of one.', '2ranq-forms' ); ?></p>
							</div>
							<div class="ranq-step">
								<span class="ranq-step__no">02</span>
								<b><?php esc_html_e( 'Copy the shortcode', '2ranq-forms' ); ?></b>
								<p><?php esc_html_e( 'Every form gets one. It appears in this list and in the form itself.', '2ranq-forms' ); ?></p>
								<span class="ranq-shortcode ranq-shortcode--still">
									<span class="ranq-shortcode__text">[2ranq_form id="1"]</span>
									<span class="ranq-shortcode__tag">
										<svg class="ranq-ico ranq-ico--copy" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
											<rect x="5.5" y="5.5" width="8" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4" />
											<path d="M10.5 3.5H3.5a1 1 0 0 0-1 1v7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
										</svg>
										<span class="ranq-shortcode__word ranq-shortcode__word--copy"><?php esc_html_e( 'Copy', '2ranq-forms' ); ?></span>
									</span>
								</span>
							</div>
							<div class="ranq-step">
								<span class="ranq-step__no">03</span>
								<b><?php esc_html_e( 'Paste it into a page', '2ranq-forms' ); ?></b>
								<p><?php esc_html_e( 'Anywhere a shortcode works. Entries come back here, into your own database.', '2ranq-forms' ); ?></p>
							</div>
						</div>
					</div>

				<?php else : ?>

					<div class="ranq-fl__bar">
						<div class="ranq-seg">
							<button type="button" class="ranq-seg__b is-on" data-ranq-filter="all">
								<?php esc_html_e( 'All', '2ranq-forms' ); ?>
								<u><?php echo esc_html( (string) count( $forms ) ); ?></u>
							</button>

							<?php if ( $with_entries ) : ?>
								<button type="button" class="ranq-seg__b" data-ranq-filter="entries">
									<?php esc_html_e( 'Getting entries', '2ranq-forms' ); ?>
									<u><?php echo esc_html( (string) $with_entries ); ?></u>
								</button>
							<?php endif; ?>

							<?php if ( $no_fields ) : ?>
								<button type="button" class="ranq-seg__b" data-ranq-filter="empty">
									<?php esc_html_e( 'No fields yet', '2ranq-forms' ); ?>
									<u><?php echo esc_html( (string) $no_fields ); ?></u>
								</button>
							<?php endif; ?>
						</div>

						<span class="ranq-fl__sorted">
							<?php esc_html_e( 'Sorted by', '2ranq-forms' ); ?>
							<b><?php esc_html_e( 'last changed', '2ranq-forms' ); ?></b>
						</span>
					</div>

					<div class="ranq-fl__cols" aria-hidden="true">
						<span><?php esc_html_e( 'Name', '2ranq-forms' ); ?></span>
						<span><?php esc_html_e( 'Shortcode', '2ranq-forms' ); ?></span>
						<span><?php esc_html_e( 'Entries', '2ranq-forms' ); ?></span>
						<span><?php esc_html_e( 'Last changed', '2ranq-forms' ); ?></span>
						<span></span>
					</div>

					<div class="ranq-fl__rows" id="ranq-forms-rows">
						<?php foreach ( $rows as $row ) : ?>
							<?php
							$form        = $row['form'];
							$title       = get_the_title( $form );
							$code        = '[2ranq_form id="' . (int) $form->ID . '"]';
							$edit_url    = admin_url( 'admin.php?page=' . self::PAGE . '&form_id=' . $form->ID );
							$entries_url = admin_url( 'admin.php?page=' . self::PAGE_ENTRIES . '&form_id=' . $form->ID );
							$delete_url  = wp_nonce_url(
								admin_url( 'admin.php?page=' . self::PAGE . '&ranq_action=delete&form_id=' . $form->ID ),
								'ranq_forms_delete_' . $form->ID
							);
							$width       = $most > 0 ? (int) round( $row['entries'] / $most * 100 ) : 0;
							?>
							<div
								class="ranq-frow<?php echo $row['fields'] ? '' : ' ranq-frow--empty'; ?>"
								data-name="<?php echo esc_attr( strtolower( $title ) ); ?>"
								data-code="<?php echo esc_attr( strtolower( $code ) ); ?>"
								data-entries="<?php echo esc_attr( (string) $row['entries'] ); ?>"
								data-fields="<?php echo esc_attr( (string) $row['fields'] ); ?>"
							>
								<div class="ranq-frow__name">
									<a class="ranq-frow__link" href="<?php echo esc_url( $edit_url ); ?>"><?php echo esc_html( $title ); ?></a>
									<p class="ranq-frow__meta">
										<?php if ( $row['fields'] ) : ?>
											<?php
											printf(
												/* translators: %d: number of fields. */
												esc_html( _n( '%d field', '%d fields', $row['fields'], '2ranq-forms' ) ),
												absint( $row['fields'] )
											);
											?>
										<?php else : ?>
											<i class="ranq-dot ranq-dot--warn" aria-hidden="true"></i>
											<?php esc_html_e( 'No fields yet', '2ranq-forms' ); ?>
										<?php endif; ?>
									</p>
								</div>

								<?php
								// A shortcode is COPIED, not read. The same button and the
								// same behaviour as in the head of the builder, `admin.js` copies it.
								?>
								<button
									type="button"
									class="ranq-shortcode<?php echo $row['fields'] ? '' : ' ranq-shortcode--quiet'; ?>"
									data-ranq-copy="<?php echo esc_attr( $code ); ?>"
									aria-label="<?php esc_attr_e( 'Copy shortcode', '2ranq-forms' ); ?>"
									title="<?php echo esc_attr( $row['fields'] ? __( 'Copy shortcode', '2ranq-forms' ) : __( 'Add a field before you place this form', '2ranq-forms' ) ); ?>"
								>
									<span class="ranq-shortcode__text"><?php echo esc_html( $code ); ?></span>
									<span class="ranq-shortcode__tag">
										<svg class="ranq-ico ranq-ico--copy" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
											<rect x="5.5" y="5.5" width="8" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4" />
											<path d="M10.5 3.5H3.5a1 1 0 0 0-1 1v7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
										</svg>
										<svg class="ranq-ico ranq-ico--done" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
											<path d="m3.5 8.6 3 3 6-6.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
										</svg>
										<span class="ranq-shortcode__word ranq-shortcode__word--copy"><?php esc_html_e( 'Copy', '2ranq-forms' ); ?></span>
										<span class="ranq-shortcode__word ranq-shortcode__word--done"><?php esc_html_e( 'Copied', '2ranq-forms' ); ?></span>
									</span>
								</button>

								<?php if ( $row['entries'] ) : ?>
									<a class="ranq-frow__entries" href="<?php echo esc_url( $entries_url ); ?>">
										<strong><?php echo esc_html( (string) $row['entries'] ); ?></strong>
										<em><?php echo esc_html( _n( 'entry', 'entries', $row['entries'], '2ranq-forms' ) ); ?></em>
										<span class="ranq-bar" aria-hidden="true"><i style="width:<?php echo esc_attr( (string) $width ); ?>%"></i></span>
									</a>
								<?php else : ?>
									<span class="ranq-frow__entries ranq-frow__entries--none">
										<?php esc_html_e( 'No entries yet', '2ranq-forms' ); ?>
									</span>
								<?php endif; ?>

								<span class="ranq-frow__date"><?php echo esc_html( get_the_modified_date( '', $form ) ); ?></span>

								<div class="ranq-frow__acts">
									<a
										class="ranq-act"
										href="<?php echo esc_url( $edit_url ); ?>"
										aria-label="<?php echo esc_attr( sprintf( /* translators: %s: form name. */ __( 'Edit %s', '2ranq-forms' ), $title ) ); ?>"
										title="<?php esc_attr_e( 'Edit', '2ranq-forms' ); ?>"
									>
										<svg width="15" height="15" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M11.2 2.6 13.4 4.8 5.6 12.6l-2.9.7.7-2.9z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" /></svg>
									</a>
									<a
										class="ranq-act ranq-act--danger"
										href="<?php echo esc_url( $delete_url ); ?>"
										aria-label="<?php echo esc_attr( sprintf( /* translators: %s: form name. */ __( 'Delete %s', '2ranq-forms' ), $title ) ); ?>"
										title="<?php esc_attr_e( 'Delete', '2ranq-forms' ); ?>"
										onclick="return confirm('<?php echo esc_js( __( 'Delete this form and all its entries? This cannot be undone.', '2ranq-forms' ) ); ?>');"
									>
										<svg width="15" height="15" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3.5 4.5h9M6.5 4.5V3h3v1.5M5 4.5l.6 8h4.8l.6-8" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" /></svg>
									</a>
								</div>
							</div>
						<?php endforeach; ?>
					</div>

					<p class="ranq-fl__none" id="ranq-forms-none" hidden>
						<?php esc_html_e( 'No form matches that.', '2ranq-forms' ); ?>
					</p>

				<?php endif; ?>
			</div>
		</div>
		<?php
	}
}