<?php
/**
 * Passkey setup prompt shown after password login when passkey auth was attempted first.
 *
 * @package GuardDog
 * @since 1.9.46
 *
 * @var WP_User $user              Authenticated user.
 * @var string  $redirect_to       Where to continue after setup or skip.
 * @var string  $nonce             Passkey registration nonce.
 */

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

$display_name = ( $user instanceof WP_User && '' !== $user->display_name ) ? $user->display_name : '';
$redirect_to  = isset( $redirect_to ) && is_string( $redirect_to ) ? $redirect_to : admin_url();
$nonce        = isset( $nonce ) && is_string( $nonce ) ? $nonce : '';
$instance_id  = wp_unique_id( 'guard-dog-passkey-setup-' );
$name_id      = $instance_id . 'name';
$button_id    = $instance_id . 'button';
$status_id    = $instance_id . 'status';
$nonce_id     = $instance_id . 'nonce';
?>

<div id="guard-dog-passkey-setup-prompt" class="guard-dog-passkey-setup-prompt">
	<div class="guard-dog-passkey-setup-prompt__header">
		<div class="guard-dog-passkey-setup-prompt__icon">
			<span class="dashicons dashicons-admin-network" aria-hidden="true"></span>
		</div>
		<h2><?php esc_html_e( 'Set up a passkey', 'guard-dog' ); ?></h2>
		<p class="description">
			<?php
			if ( '' !== $display_name ) {
				echo esc_html(
					sprintf(
						/* translators: %s: current user's display name. */
						__( 'You are signed in as %s. Add a passkey now so this device can use passwordless sign-in next time.', 'guard-dog' ),
						$display_name
					)
				);
			} else {
				esc_html_e( 'Add a passkey now so this device can use passwordless sign-in next time.', 'guard-dog' );
			}
			?>
		</p>
	</div>

	<div
		id="<?php echo esc_attr( $instance_id ); ?>"
		class="guard-dog-passkey-setup-prompt__form"
		data-guard-dog-passkeys-management="1"
		data-context="setup-prompt"
		data-style="setup"
		data-success-redirect="<?php echo esc_url( $redirect_to ); ?>"
	>
		<label class="guard-dog-passkey-setup-prompt__label" for="<?php echo esc_attr( $name_id ); ?>">
			<?php esc_html_e( 'Passkey name', 'guard-dog' ); ?>
		</label>
		<input
			type="text"
			id="<?php echo esc_attr( $name_id ); ?>"
			class="guard-dog-passkey-setup-prompt__input"
			placeholder="<?php esc_attr_e( 'MacBook Pro', 'guard-dog' ); ?>"
			autocomplete="off"
			data-guard-dog-passkey-name
		>
		<button
			type="button"
			id="<?php echo esc_attr( $button_id ); ?>"
			class="guard-dog-passkey-setup-prompt__submit"
			data-guard-dog-register-passkey
		>
			<?php esc_html_e( 'Create passkey', 'guard-dog' ); ?>
		</button>
		<p
			id="<?php echo esc_attr( $status_id ); ?>"
			class="guard-dog-passkey-setup-prompt__status"
			role="status"
			aria-live="polite"
			hidden
			data-guard-dog-passkey-register-status
		></p>
		<input type="hidden" id="<?php echo esc_attr( $nonce_id ); ?>" value="<?php echo esc_attr( $nonce ); ?>" data-guard-dog-passkey-nonce>
	</div>

	<p class="guard-dog-passkey-setup-prompt__actions">
		<a class="guard-dog-passkey-setup-prompt__skip" href="<?php echo esc_url( $redirect_to ); ?>">
			<?php esc_html_e( 'Continue without passkey', 'guard-dog' ); ?>
		</a>
	</p>
</div>
