<?php
/**
 * Checkout phone-verification widget (classic checkout).
 *
 * Block checkout gets its code field for free from the Additional Checkout
 * Fields API (see CheckoutGate::register_field()); the Additional Fields API
 * does not render into the classic `[woocommerce_checkout]` shortcode at all,
 * so classic checkout needs this hand-rolled equivalent instead. Reads the
 * phone to verify from checkout's own `#billing_phone` field rather than
 * rendering a second one.
 *
 * @package TextTango
 *
 * @var array<string, mixed> $args View data supplied by Otp\CheckoutGate.
 */

declare( strict_types=1 );

defined( 'ABSPATH' ) || exit;

$texttango_length = (int) ( $args['length'] ?? 6 );
?>
<div class="texttango-ui tt-mt-4" data-texttango-checkout-otp>
	<label class="tt-label" for="texttango-checkout-otp-code">
		<?php esc_html_e( 'Verification code', 'texttango' ); ?>
	</label>
	<div class="tt-flex tt-flex-wrap tt-items-center tt-gap-3">
		<input
			class="tt-input tt-text-center tt-text-lg tt-tracking-widest"
			style="max-width: 12rem"
			id="texttango-checkout-otp-code"
			name="<?php echo esc_attr( \TextTango\Otp\CheckoutGate::FIELD_CODE ); ?>"
			type="text"
			autocomplete="one-time-code"
			inputmode="numeric"
			pattern="[0-9]*"
			maxlength="<?php echo esc_attr( (string) $texttango_length ); ?>"
			data-texttango-checkout-otp-code />
		<button type="button" class="tt-btn tt-btn-secondary" data-texttango-checkout-otp-action="request">
			<?php esc_html_e( 'Send code', 'texttango' ); ?>
		</button>
	</div>
	<p class="tt-mt-2 tt-text-sm" data-texttango-checkout-otp-message aria-live="polite"></p>
</div>
