<?php
/**
 * Inline "Notify Me" form template.
 *
 * Displayed on single product pages when the product is out of stock.
 * No <form> tag — submission is handled entirely via AJAX.
 *
 * Available variables:
 *   $product_id      - WooCommerce product ID.
 *   $variation_id    - Variation ID (0 for simple products).
 *   $parent_oos      - Whether the parent product is out of stock.
 *   $hidden          - Whether the form should start hidden.
 *   $button_text     - Button label text.
 *   $placeholder_text - Email input placeholder.
 *   $show_count      - Whether to display subscriber count.
 *   $sub_count       - Number of active subscribers for this product.
 *
 * @package Waitlytics
 */

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

$wtly_wrapper_style = ! empty( $hidden ) ? 'display:none;' : '';
?>
<div class="wtly-notify-form-wrapper"
	 data-product-id="<?php echo esc_attr( $product_id ); ?>"
	 data-variation-id="<?php echo esc_attr( $variation_id ); ?>"
	 data-parent-oos="<?php echo esc_attr( $parent_oos ? '1' : '0' ); ?>"
	 <?php if ( $wtly_wrapper_style ) : ?>style="<?php echo esc_attr( $wtly_wrapper_style ); ?>"<?php endif; ?>>
	<div class="wtly-notify-form">
		<p class="wtly-form-title">
			<?php esc_html_e( 'Get notified when this product is back in stock', 'waitlytics' ); ?>
		</p>

		<?php if ( $show_count ) : ?>
			<p class="wtly-subscriber-count">
				<?php
				printf(
					/* translators: %d: number of people waiting */
					esc_html( _n( '%d person waiting', '%d people waiting', $sub_count, 'waitlytics' ) ),
					absint( $sub_count )
				);
				?>
			</p>
		<?php endif; ?>

		<div class="wtly-form-fields">
			<input type="email"
				   class="wtly-email-input"
				   placeholder="<?php echo esc_attr( $placeholder_text ); ?>"
				   required
				   aria-label="<?php esc_attr_e( 'Email address for back-in-stock notification', 'waitlytics' ); ?>">
			<button type="button" class="wtly-notify-button button">
				<?php echo esc_html( $button_text ); ?>
			</button>
		</div>
		<div class="wtly-form-message" style="display:none;" role="alert"></div>
	</div>
</div>
