<?php
/**
 * Sign-in-by-phone form.
 *
 * @package TextTango
 *
 * @var array<string, mixed> $args View data supplied by Otp\LoginForm.
 */

declare( strict_types=1 );

defined( 'ABSPATH' ) || exit;

$texttango_title    = (string) ( $args['title'] ?? '' );
$texttango_redirect = (string) ( $args['redirect'] ?? '' );
$texttango_length   = (int) ( $args['length'] ?? 6 );
$texttango_id       = wp_unique_id( 'texttango-otp-' );
?>
<div class="texttango-ui texttango-otp" data-texttango-otp id="<?php echo esc_attr( $texttango_id ); ?>">
	<div class="tt-mx-auto tt-w-full tt-max-w-sm">

		<?php if ( '' !== $texttango_title ) : ?>
			<h2 class="tt-m-0 tt-mb-4 tt-text-lg tt-font-semibold tt-text-slate-900">
				<?php echo esc_html( $texttango_title ); ?>
			</h2>
		<?php endif; ?>

		<input type="hidden" data-texttango-redirect value="<?php echo esc_attr( $texttango_redirect ); ?>" />

		<!-- Step one: the number -->
		<div data-texttango-step="phone">
			<label class="tt-label" for="<?php echo esc_attr( $texttango_id ); ?>-phone">
				<?php esc_html_e( 'Phone number', 'texttango' ); ?>
			</label>
			<input
				class="tt-input"
				id="<?php echo esc_attr( $texttango_id ); ?>-phone"
				type="tel"
				autocomplete="tel"
				inputmode="tel"
				placeholder="+233…"
				data-texttango-phone />
			<button type="button" class="tt-btn tt-btn-primary tt-mt-3 tt-w-full" data-texttango-action="request">
				<?php esc_html_e( 'Send code', 'texttango' ); ?>
			</button>
		</div>

		<!-- Step two: the code -->
		<div data-texttango-step="code" hidden>
			<label class="tt-label" for="<?php echo esc_attr( $texttango_id ); ?>-code">
				<?php esc_html_e( 'Verification code', 'texttango' ); ?>
			</label>
			<input
				class="tt-input tt-text-center tt-text-lg tt-tracking-widest"
				id="<?php echo esc_attr( $texttango_id ); ?>-code"
				type="text"
				autocomplete="one-time-code"
				inputmode="numeric"
				pattern="[0-9]*"
				maxlength="<?php echo esc_attr( (string) $texttango_length ); ?>"
				data-texttango-code />

			<label class="tt-mt-3 tt-flex tt-items-center tt-gap-2 tt-text-sm tt-text-slate-600">
				<input type="checkbox" value="1" data-texttango-remember />
				<?php esc_html_e( 'Keep me signed in', 'texttango' ); ?>
			</label>

			<button type="button" class="tt-btn tt-btn-primary tt-mt-3 tt-w-full" data-texttango-action="verify">
				<?php esc_html_e( 'Sign in', 'texttango' ); ?>
			</button>

			<div class="tt-mt-3 tt-flex tt-items-center tt-justify-between tt-text-sm">
				<button type="button" class="tt-bg-transparent tt-border-0 tt-cursor-pointer tt-p-0 tt-text-brand-600 tt-underline" data-texttango-action="back">
					<?php esc_html_e( 'Use a different number', 'texttango' ); ?>
				</button>
				<button type="button" class="tt-bg-transparent tt-border-0 tt-cursor-pointer tt-p-0 tt-text-brand-600 tt-underline" data-texttango-action="request">
					<?php esc_html_e( 'Send a new code', 'texttango' ); ?>
				</button>
			</div>
		</div>

		<p class="tt-mt-3 tt-text-sm" data-texttango-otp-message aria-live="polite"></p>
	</div>
</div>
