<?php
/**
 * Template: sezione "Sicurezza Biometrica Web, Data & Service" nel profilo utente.
 * Variabili disponibili: $user (WP_User), $credentials (array).
 *
 * @package SPIDy_WP
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<h2><?php esc_html_e( 'Sicurezza Biometrica Web, Data & Service', 'spidy-2fa-login' ); ?></h2>
<p class="description">
	<?php esc_html_e( 'Associa il tuo smartphone o computer per accedere con impronta digitale o riconoscimento facciale, senza dover digitare codici via SMS o email.', 'spidy-2fa-login' ); ?>
</p>

<table class="form-table" id="spidy-wp-devices-table">
	<tr>
		<th><?php esc_html_e( 'Dispositivi associati', 'spidy-2fa-login' ); ?></th>
		<td>
			<?php if ( empty( $credentials ) ) : ?>
				<p id="spidy-wp-no-devices"><em><?php esc_html_e( 'Nessun dispositivo associato.', 'spidy-2fa-login' ); ?></em></p>
			<?php else : ?>
				<ul id="spidy-wp-devices-list" style="margin:0;">
					<?php foreach ( $credentials as $spidy_wp_credential ) : ?>
						<li data-credential-id="<?php echo esc_attr( $spidy_wp_credential['credential_id'] ); ?>">
							<strong><?php echo esc_html( $spidy_wp_credential['label'] ); ?></strong>
							—
							<span class="description">
								<?php
								printf(
									/* translators: %s: data di registrazione formattata */
									esc_html__( 'associato il %s', 'spidy-2fa-login' ),
									esc_html( date_i18n( get_option( 'date_format' ), $spidy_wp_credential['created_at'] ) )
								);
								?>
							</span>
							<button type="button" class="button-link spidy-wp-remove-device" data-credential-id="<?php echo esc_attr( $spidy_wp_credential['credential_id'] ); ?>">
								<?php esc_html_e( 'Rimuovi', 'spidy-2fa-login' ); ?>
							</button>
						</li>
					<?php endforeach; ?>
				</ul>
			<?php endif; ?>

			<p style="margin-top:12px;">
				<button type="button" class="button button-secondary" id="spidy-wp-register-button">
					<?php esc_html_e( 'Associa Smartphone', 'spidy-2fa-login' ); ?>
				</button>
				<span id="spidy-wp-status" style="margin-left:10px;"></span>
			</p>
		</td>
	</tr>
</table>
