<?php
/**
 * Main admin page template for the Postomatic plugin.
 *
 * @package Postomatic
 */

?>

<?php
require_once POSTOMATIC_PLUGIN_DIR . 'includes/admin/templates/partials/key-renew.php';
require_once POSTOMATIC_PLUGIN_DIR . 'includes/admin/templates/partials/blog-posts-sync.php';
require_once POSTOMATIC_PLUGIN_DIR . 'includes/admin/templates/partials/agreement-sign.php';

// Check if WooCommerce is active and products are available.
$woocommerce_active = function_exists( 'wc_get_products' );
$has_products       = false;

if ( $woocommerce_active ) {
	$products     = wc_get_products( array( 'limit' => 1 ) );
	$has_products = ! empty( $products );
} else {
	// Fallback to checking for a 'product' post type.
	$args           = array(
		'post_type'      => 'product',
		'post_status'    => 'publish',
		'posts_per_page' => 1,
	);
	$products_query = new WP_Query( $args );
	$has_products   = $products_query->have_posts();
}

?>





<script>
	window.PostomaticData = {
		nonce: '<?php echo esc_js( wp_create_nonce( 'postomatic_admin_nonce' ) ); ?>',
		nonce_search: '<?php echo esc_js( wp_create_nonce( 'wp_rest' ) ); ?>',
		attachmentNonce: '<?php echo esc_js( wp_create_nonce( 'get_attachment_image_html' ) ); ?>',
		supportNonce: '<?php echo esc_js( wp_create_nonce( 'postomatic_support_nonce' ) ); ?>',
		createNonce: '<?php echo esc_js( wp_create_nonce( 'postomatic_generate_post' ) ); ?>',
		apiKey: '<?php echo esc_js( Postomatic\Utils::get_api_service_key() ); ?>',
		reactiveUrl: '<?php echo esc_html( Postomatic\Constants::API_RE_ACTIVE ); ?>',
		creditScore: '<?php echo esc_url( Postomatic\Constants::API_CREDITS_SCORES_LIST ); ?>',
		countryList: '<?php echo esc_html( Postomatic\Constants::API_COUNTRIES_LIST ); ?>',
		recentList: '<?php echo esc_html( Postomatic\Constants::API_POSTS_RECENT_LIST ); ?>',
		speakerList: '<?php echo esc_html( Postomatic\Constants::API_SPEAKERS_LIST ); ?>',
		postMaker: '<?php echo esc_html( Postomatic\Constants::API_POST_MAKER ); ?>',
		deletePost: '<?php echo esc_html( Postomatic\Constants::API_POSTS_DELETE ); ?>',
		addCreditPage: '<?php echo esc_attr( Postomatic\Constants::PAGE_ADD_CREDIT ); ?>',
		membershipPage: '<?php echo esc_attr( Postomatic\Constants::PAGE_MEMBERSHIP ); ?>',
		woocommerceActive: <?php echo $woocommerce_active ? 'true' : 'false'; ?>,
		hasProducts: <?php echo $has_products ? 'true' : 'false'; ?>,

		categories: <?php echo wp_json_encode( get_categories( array( 'hide_empty' => false ) ) ); ?>,
		writer: <?php echo esc_js( get_current_user_id() ); ?>,
		writers:
		<?php
		$writers = get_users( array( 'fields' => array( 'ID', 'display_name' ) ) );
		echo wp_json_encode( $writers );
		?>
		,

	};



	// Register components before creating the Vue instance
	Vue.component('v-select', VueSelect.VueSelect);

	// Define components with string templates instead of template literals
	Vue.component('post-details-modal', {
		props: ['post'],
		template: '<div>…</div>'
	});

	Vue.component('delete-confirmation-modal', {
		template: '<div>…</div>'
	});
</script>

<div id="app">
	<floating-credit-tracker :initial="requiredCredit" :available="availableCredits" :plan-label="planLabel" :plan-slug="planSlug" :upgrade-url="upgradeUrl" :add-credit-url="purchaseCreditsUrl"></floating-credit-tracker>
	<div class="wrap">
		<!-- Loading Overlay -->
		<div v-show="loading" class="loading-active" id="loading-overlay">
			<div class="loading-content">
				<div class="loading-spinner"></div>
			</div>
		</div>

		<h1 class="admin-page-title">Create New Blog Post</h1>

		<!-- Alerts -->
		<div v-show="showSuccessAlert" class="alert alert-success fade-in" id="success-alert" role="alert">
			<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24">
				<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-1 14-5-5 1.414-1.414L11 13.172l7.586-7.586L20 7l-9 9z"/>
			</svg>
			<div class="alert-content" id="draft-alert">
				<strong>Content Generation In Progress</strong>
				<p>{{ successMessage }}</p>
			</div>
		</div>
		<div v-show="showMainAlert" class="alert alert-info fade-in" id="main-alert" role="alert">
			<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24">
				<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>
			</svg>
			<div class="alert-content" id="draft-alert">
				<strong>Notice:</strong> Generated content will be saved as a draft for your review. We recommend adding
				a featured image and conducting a thorough review prior to publication to ensure optimal quality and
				engagement.
			</div>
		</div>

		<!-- Main Content Area - Two Column Layout -->
		<div class="main-content-layout">
			<!-- Left Column - Form -->
			<div class="form-column">
				<!-- Plugin Container -->
				<div class="plugin-container">
					<!-- Post Generator Form -->
					<form id="ai-post-generator" @submit.prevent="handleSubmit" class="slide-in-up">
						<input type="hidden" :value="nonce.postomatic" name="postomatic_form_nonce">
						<input type="hidden" :value="nonce.attachment" name="get_attachment_image_nonce">

						<!-- Essential Settings Section -->
						<div class="essential-settings">
							<h2 class="section-title">Essential Settings</h2>

							<div v-if="errors.length" id="errors-container" class="alert alert-error mb-3">
								<ul class="error-list">
									<li v-for="err in errors" :key="err">{{ err }}</li>
								</ul>
							</div>

							<!-- Title Type Selection -->
							<div class="setting-group">
								<div class="tooltip-wrapper">
									<label class="field-label">Content Goal</label>
									<div class="tooltip-icon" data-tooltip="Choose between a single title or multiple titles (PRO feature)">?</div>
								</div>

								<div class="radio-group">
									<label class="radio-option">
										<input type="radio" name="title_type" ref="title_type" value="single"
												v-model="form.titleType"> 
										<span class="radio-label">Single Title</span>
									</label>
									<label class="radio-option premium-feature">
										<input type="radio" name="title_type" ref="title_type" value="bulk"
												v-model="form.titleType"
												:disabled="!isPro"> 
										<span class="radio-label">Bulk Titles</span>
										<div class="badge-container"><span class="feature-badge pro-badge">PRO</span></div>
									</label>
									<label class="radio-option premium-feature">
										<input type="radio" name="title_type" ref="title_type" value="product_sales"
												v-model="form.titleType"
												:disabled="!woocommerceActive || !hasProducts || !isPro">
										<span class="radio-label">Boost Product Sales</span>
										<div class="badge-container"><span class="feature-badge pro-badge">PRO</span></div>
										<div v-if="!hasProducts" class="tooltip-icon" data-tooltip="Please add products to use this feature.">?</div>
									</label>
								</div>
							</div>

							<!-- Single Title Input -->
							<div class="setting-group main-title-group" v-if="form.titleType === 'single'">
								<div class="tooltip-wrapper">
									<label class="field-label" for="post-title">
										Main Title <span class="required-icon">*</span>
									</label>
									<div class="tooltip-icon" data-tooltip="Enter a clear, descriptive title for your post. This is the most important field and will determine the focus of your generated content.">?</div>
								</div>

								<div class="main-title-input-wrapper">
									<input 
										type="text" 
										id="post-title" 
										name="post_title" 
										v-model="form.postTitle"
										class="regular-text main-title-input"
										placeholder="Enter post title or topic"
									>
									<p class="field-description">Make your title specific and descriptive for better results. For example, "10 Tips for Better Sleep" instead of just "Sleep".</p>
								</div>

								<div v-if="errors.postTitle" class="error-text">
									{{ errors.postTitle }}
								</div>
							</div>

							<!-- Bulk Titles Input -->
							<div class="setting-group bulk-titles-group" v-if="form.titleType === 'bulk'">
								<div class="tooltip-wrapper">
									<label class="field-label" for="bulk_post_title">
										Bulk Titles <span class="required-icon">*</span>
									</label>
									<div class="tooltip-icon" data-tooltip="Enter multiple post titles, one per line. Each title will generate a separate blog post.">?</div>
								</div>

								<div class="bulk-titles-wrapper premium-feature">
									<textarea 
										id="bulk_post_title" 
										name="bulk_post_title" 
										v-model="form.bulkTitles"
										class="regular-text bulk-titles-textarea"
										rows="8"
										placeholder="Title of Blog Post 1
Title of Blog Post 2
.
.
."
										@input="updateBulkCount"
										:disabled="!isPro"
									></textarea>

									<div class="badge-container">
										<span class="feature-badge pro-badge">PRO</span>
									</div>

									<p class="field-description">Enter each title on a new line. Be specific and descriptive with each title for better results.</p>
								</div>

								<div v-if="errors.bulkTitles" class="error-text">
									{{ errors.bulkTitles }}
								</div>
							</div>

							<!-- Product Sales Input -->
							<div class="setting-group product-sales-group" v-if="form.titleType === 'product_sales'">
								<!-- Content Goal Type -->
								<div class="seo-budget-row" style="margin-bottom: 20px;">
									<div class="seo-budget-col seo-budget-smallbox">
										<label for="autopilot-content-goal-type-product" class="seo-budget-label">Content Goal Type <span class="required">*</span></label>
										<select id="autopilot-content-goal-type-product" v-model="form.contentGoalType"
											class="seo-budget-input"
											aria-describedby="content-goal-type-product-description">
											<option value="">Select a content goal type</option>
											<option v-for="type in contentGoalTypes.filter(t => t.type === 'product')" :key="type.id" :value="type.id">
												{{ type.title }} – {{ type.description }}
											</option>
										</select>
										<p id="content-goal-type-product-description" class="field-description">Select the primary goal for your content. This field is required.</p>
										<div v-if="errors.contentGoalType" class="seo-error-text">{{ humanizeVariableName('contentGoalType') }}: {{ errors.contentGoalType }}</div>
									</div>
								</div>

								<div class="tooltip-wrapper product-search-wrapper">
									<label class="field-label" for="product_search">
										Select Products <span class="required-icon">*</span>
									</label>
									<div class="tooltip-icon" data-tooltip="Search and select products to boost sales with targeted content.">?</div>
								</div>

								<div v-if="!form.contentGoalType" class="alert alert-info fade-in" role="alert" style="margin-bottom: 15px;">
									<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
										<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>
									</svg>
									<div class="alert-content">
										<strong>Select a Content Goal Type:</strong> Please select a content goal type above to enable product selection.
									</div>
								</div>

								<div class="product-search-wrapper premium-feature" v-if="form.contentGoalType">
									<div class="search-box">
										<input
											type="text"
											id="product_search"
											name="product_search"
											v-model="productSearchQuery"
											class="regular-text product-search-input"
											placeholder="Search products..."
											@input="searchProducts"
											@keydown.enter.prevent="searchProducts"
											:disabled="!isPro"
											style="width: 100%; margin-bottom: 15px; padding: 8px; border-radius: 4px;"
										>
									</div>

									<div class="products-list-container" style="max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 15px;">
										<div v-if="isLoadingProducts" class="loading-products" style="padding: 20px; text-align: center;">
											<div class="loading-spinner small"></div>
											<span>Loading products...</span>
										</div>

										<div v-else-if="products.length === 0" class="no-products-found" style="padding: 20px; text-align: center;">
											<p>No products found. Try a different search term.</p>
										</div>

										<div v-else class="products-list">
											<div
												v-for="product in products"
												:key="product.id"
												class="product-item"
												:class="{ 'selected': isProductComparisonType ? (form.selectedProducts && form.selectedProducts.includes(product.id)) : form.selectedProduct === product.id }"
												@click.stop.prevent="selectProduct(product.id)"
												style="display: flex; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; transition: all 0.2s ease; border-radius: 4px; margin-bottom: 5px;"
												:style="{ 
													'background-color': isProductComparisonType ? 
														(form.selectedProducts && form.selectedProducts.includes(product.id) ? '#e6f2ff' : 'transparent') : 
														(form.selectedProduct === product.id ? '#e6f2ff' : 'transparent'),
													'border': isProductComparisonType ? 
														(form.selectedProducts && form.selectedProducts.includes(product.id) ? '2px solid #007cba' : '1px solid transparent') : 
														(form.selectedProduct === product.id ? '2px solid #007cba' : '1px solid transparent'),
													'box-shadow': isProductComparisonType ? 
														(form.selectedProducts && form.selectedProducts.includes(product.id) ? '0 2px 5px rgba(0,0,0,0.1)' : 'none') : 
														(form.selectedProduct === product.id ? '0 2px 5px rgba(0,0,0,0.1)' : 'none')
												}"
											>
												<div class="product-image" style="width: 60px; height: 60px; margin-right: 10px; flex-shrink: 0;">
													<img v-if="product.image" :src="product.image" alt="Product image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;">
													<div v-else class="no-image" style="width: 100%; height: 100%; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #888; border-radius: 4px;">No image</div>
												</div>
												<div class="product-details" style="flex-grow: 1; min-width: 0;">
													<h4 class="product-name" style="margin: 0 0 5px; font-size: 14px; font-weight: 600;">{{ product.name }}</h4>
													<div class="product-price" v-html="product.price" style="font-size: 13px; color: #555; margin-bottom: 5px;"></div>
													<p class="product-description" v-if="product.description" style="margin: 0; font-size: 12px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ product.description }}</p>
												</div>
												<div class="product-selection" style="display: flex; align-items: center; padding-left: 10px;">
													<input
														v-if="isProductType"
														type="checkbox"
														:checked="form.selectedProducts && form.selectedProducts.includes(product.id)"
														@click.stop.prevent
														@change.stop.prevent="selectProduct(product.id)"
													>
													<input
														v-else
														type="radio"
														name="product_selection"
														:checked="form.selectedProduct === product.id"
														@click.stop.prevent
														@change.stop.prevent="selectProduct(product.id)"
													>
												</div>
											</div>
										</div>

										<div v-if="products.length > 0 && productPagination.total_pages > 1" class="pagination" style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f9f9f9; border-top: 1px solid #eee;">
											<button
												type="button"
												class="pagination-btn"
												:disabled="productPagination.current_page === 1"
												@click="changePage(productPagination.current_page - 1)"
												style="padding: 5px 10px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 3px; cursor: pointer;"
												:style="{ opacity: productPagination.current_page === 1 ? '0.5' : '1' }"
											>
												Previous
											</button>
											<span class="pagination-info" style="font-size: 13px; color: #555;">Page {{ productPagination.current_page }} of {{ productPagination.total_pages }}</span>
											<button
												type="button"
												class="pagination-btn"
												:disabled="productPagination.current_page === productPagination.total_pages"
												@click="changePage(productPagination.current_page + 1)"
												style="padding: 5px 10px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 3px; cursor: pointer;"
												:style="{ opacity: productPagination.current_page === productPagination.total_pages ? '0.5' : '1' }"
											>
												Next
											</button>
										</div>
									</div>

									<!-- Selected Product Details - Single Product -->
									<div v-if="selectedProductDetails && form.selectedProduct !== null && !isProductComparisonType" class="selected-product-details" style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background-color: #f9f9f9;">
										<h4 style="margin-top: 0; margin-bottom: 10px; font-size: 16px;">Selected Product Details</h4>
										<div style="display: flex;">
											<div class="product-image" style="width: 80px; height: 80px; margin-right: 15px; flex-shrink: 0;">
												<img v-if="selectedProductDetails.image" :src="selectedProductDetails.image" alt="Product image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;">
												<div v-else class="no-image" style="width: 100%; height: 100%; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #888; border-radius: 4px;">No image</div>
											</div>
											<div class="product-info" style="flex-grow: 1;">
												<h5 style="margin: 0 0 5px; font-size: 14px; font-weight: 600;">
													<a v-if="selectedProductDetails.permalink" :href="selectedProductDetails.permalink" target="_blank" style="color: #0073aa; text-decoration: none;">
														{{ selectedProductDetails.name }}
													</a>
													<template v-else>{{ selectedProductDetails.name }}</template>
												</h5>
												<div class="product-price" v-html="selectedProductDetails.price" style="font-size: 13px; color: #555; margin-bottom: 5px;"></div>
												<p v-if="selectedProductDetails.description" style="margin: 0; font-size: 12px; color: #777;">{{ selectedProductDetails.description }}</p>
												<p v-if="selectedProductDetails.sku" style="margin: 5px 0 0; font-size: 12px; color: #777;">SKU: {{ selectedProductDetails.sku }}</p>
												<a v-if="selectedProductDetails.permalink" :href="selectedProductDetails.permalink" target="_blank" class="button button-small" style="margin-top: 10px; display: inline-block; padding: 4px 8px; background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; color: #555; font-size: 12px;">
													View Product Page
												</a>
											</div>
										</div>
									</div>

									<!-- Selected Products Section -->
									<div v-if="form.selectedProducts && form.selectedProducts.length > 0 && isProductComparisonType" class="selected-products-section" style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background-color: #f9f9f9;">
										<h4 style="margin-top: 0; margin-bottom: 10px; font-size: 16px;">{{ isProductComparisonType ? 'Comparing Products' : 'Selected Products' }}</h4>
										<p style="margin-bottom: 10px; font-size: 13px; color: #555;">
											{{ isProductComparisonType ? 
												`Comparing ${form.selectedProducts.length} of 3 products. ${form.selectedProducts.length < 3 ? 'You can select up to ' + (3 - form.selectedProducts.length) + ' more.' : ''}` : 
												`You've selected ${form.selectedProducts.length} ${form.selectedProducts.length > 1 ? 'products' : 'product'}. Only 1 product can be selected for this content goal type.` 
											}}
										</p>
										<div v-for="productId in form.selectedProducts" :key="productId" class="selected-product-item" style="display: flex; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
											<div class="product-image" style="width: 60px; height: 60px; margin-right: 10px; flex-shrink: 0;">
												<img v-if="getProductById(productId) && getProductById(productId).image" :src="getProductById(productId).image" :alt="getProductById(productId).name" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;">
												<div v-else class="no-image" style="width: 100%; height: 100%; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #888; border-radius: 4px;">No image</div>
											</div>
											<div class="product-info" style="flex-grow: 1;">
												<h5 style="margin: 0 0 5px; font-size: 14px; font-weight: 600;">
													<a v-if="getProductById(productId) && getProductById(productId).permalink" :href="getProductById(productId).permalink" target="_blank" style="color: #0073aa; text-decoration: none;">
														{{ getProductById(productId) ? getProductById(productId).name : 'Product' }}
													</a>
													<template v-else>{{ getProductById(productId) ? getProductById(productId).name : 'Product' }}</template>
												</h5>
												<div v-if="getProductById(productId)" class="product-price" v-html="getProductById(productId).price" style="font-size: 13px; color: #555;"></div>
												<a v-if="getProductById(productId) && getProductById(productId).permalink" :href="getProductById(productId).permalink" target="_blank" class="button button-small" style="margin-top: 5px; display: inline-block; padding: 4px 8px; background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; color: #555; font-size: 12px;">
													View Product Page
												</a>
											</div>
											<button type="button" @click="removeProductFromComparison(productId)" class="remove-product-btn" style="background: none; border: none; color: #cc0000; cursor: pointer; padding: 5px; margin-left: 10px;">
												<span class="dashicons dashicons-no-alt"></span>
											</button>
										</div>
									</div>

									<p class="field-description">Select products to create content that will help boost their sales.</p>
								</div>

								<div v-if="errors.selectedProduct" class="error-text">
									{{ errors.selectedProduct }}
								</div>
							</div>

							<!-- Featured Image -->
							<div class="setting-group">
								<div class="tooltip-wrapper">
									<label class="field-label">Featured Image</label>
									<div class="tooltip-icon" data-tooltip="Choose between AI-generated image (PRO) or upload your own custom image">?</div>
								</div>
								<div class="radio-group">
									<label class="radio-option premium-feature">
										<input type="radio" value="ai" name="featured_image_type"
												:checked="form.featureImageType === 'ai'" 
												@click="toggleFeatureImageType('ai')" 
												:disabled="!isPro">
										<span class="radio-label">AI Generated Image</span>
										<div class="badge-container"><span class="feature-badge pro-badge">PRO</span></div>
									</label>
									<label class="radio-option" id="custom_feature_image">
										<input type="radio" value="custom" name="featured_image_type"
												:checked="form.featureImageType === 'custom'"
												@click="toggleFeatureImageType('custom')">
										<span class="radio-label">Custom Image</span>
									</label>
								</div>

								<div v-show="form.featureImageType==='custom'" id="media_selector" class="media-selector-wrapper">
									<button type="button" class="btn btn-secondary" id="featured_image_selector"
											@click="openMediaSelector">
										<svg class="btn-icon" viewBox="0 0 24 24" width="16" height="16">
											<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
										</svg>
										Select Image
									</button>
									<div id="selected_image" class="selected-image-preview">
										<img v-if="selectedImage.url" :src="selectedImage.url"
											class="image-thumbnail">
										<div class="selected-image-remove">
											<button v-if="selectedImage.id" type="button" class="remove-btn"
													id="selected_image_rmv_btn" @click="removeImage" aria-label="Remove image">
												<svg viewBox="0 0 24 24" width="16" height="16">
													<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="currentColor"/>
												</svg>
											</button>
										</div>
									</div>
								</div>

							</div>

							<!-- Body Image Picker -->
							<div class="setting-group">
								<div class="tooltip-wrapper">
									<label class="field-label">Pick Image for Content</label>
									<div class="tooltip-icon" data-tooltip="Select images to include in your post content with descriptions">?</div>
								</div>
								<div class="body-image-wrapper">
									<button type="button" class="btn btn-secondary" @click.prevent="selectBodyImage">
										<svg class="btn-icon" viewBox="0 0 24 24" width="16" height="16">
											<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
										</svg>
										Select Image
									</button>
									<div class="selected-images-container">
										<table id="selected-images-table" class="images-table">
											<thead>
												<tr>
													<th>Image</th>
													<th>Description</th>
													<th>Action</th>
												</tr>
											</thead>
											<tbody>
												<tr v-for="img in form.bodyImages" :key="img.id">
													<td><img :src="img.url" class="image-thumbnail" width="50" alt="Content image"></td>
													<td>
														<input 
															type="text" 
															v-model="img.description" 
															class="regular-text"
															maxlength="100"
															placeholder="Describe the image" 
															required
														>
													</td>
													<td>
														<button type="button" class="btn btn-sm btn-danger" @click="removeBodyImage(img.id)">
															<svg viewBox="0 0 24 24" width="16" height="16">
																<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="currentColor"/>
															</svg>
															Remove
														</button>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>

							<!-- Language -->
							<div class="setting-group">
								<div class="tooltip-wrapper">
									<label class="field-label" for="language_select">
										Language <span class="required-icon">*</span>
									</label>
									<div class="tooltip-icon" data-tooltip="Select the language for your generated content">?</div>
								</div>

								<div class="language-selection-wrapper dropdown-selection-wrapper">
									<!-- WordPress Select2 Dropdown -->
									<div class="language-input-wrapper dropdown-input-wrapper">
										<select
											id="language_select"
											class="wp-select2"
											name="language_select"
											ref="languageSelect"
											v-model="form.language"
											data-dropdown-css-class="language-select-dropdown"
										>
											<option value="">Select a language</option>
											<option
												v-for="lang in contentData.languages"
												:key="lang.code"
												:value="lang.code"
											>{{ lang.name }}</option>
										</select>
										<div v-if="errors.language" class="error-text">
											{{ errors.language }}
										</div>
									</div>
								</div>
							</div>

							<!-- Category -->
							<div class="setting-group">
								<div class="tooltip-wrapper">
									<label class="field-label" for="category_select">
										Category <span class="required-icon">*</span>
									</label>
									<div class="tooltip-icon" data-tooltip="Select a category for your post or let AI choose the best one automatically">?</div>
								</div>

								<div class="category-selection-wrapper dropdown-selection-wrapper">
									<!-- WordPress Select2 Dropdown -->
									<div class="category-input-wrapper dropdown-input-wrapper">
										<select
											id="category_select"
											class="wp-select2"
											name="category_select"
											ref="categorySelect"
											v-model="form.category"
											:disabled="form.autoCategory"
											data-dropdown-css-class="category-select-dropdown"
										>
											<option value="">Select a category</option>
											<option
												v-for="cat in categories"
												:key="cat.slug"
												:value="cat.slug"
											>{{ cat.name }}</option>
										</select>
										<div v-if="errors.category" class="error-text">
											{{ errors.category }}
										</div>
									</div>

									<!-- Checkbox inline -->
									<label class="auto-select-checkbox">
										<input
											type="checkbox"
											name="category_by_ai"
											v-model="form.autoCategory"
											class="auto-select-input"
										/>
										<span class="auto-select-label">Auto‑select</span>
									</label>
								</div>
							</div>

							<!-- Who is speaking? -->
							<div class="setting-group">
								<div class="tooltip-wrapper">
									<label class="field-label" for="speaker_select">Who is speaking? <span class="required-icon">*</span></label>
									<div class="tooltip-icon" data-tooltip="Pick who's telling the story or sharing the message">?</div>
								</div>

								<div class="speaker-selection-wrapper dropdown-selection-wrapper">
									<!-- WordPress Select2 Dropdown -->
									<div class="speaker-input-wrapper dropdown-input-wrapper">
										<select
												id="speaker_select"
												class="wp-select2"
												name="speaker_select"
												ref="speakerSelect"
												v-model="form.speaker"
												@change="onSpeakerChange($event.target.value)"
												data-dropdown-css-class="speaker-select-dropdown"
										>
											<option value="">Select a speaker</option>
											<option
													v-for="speaker in speakers"
													:key="speaker.id"
													:value="speaker.id"
													:disabled="!isPro && !isBasic && speaker.id !== 'neutral'"
											>{{ speaker.title }}</option>
										</select>
										<div v-if="errors.speaker" class="error-text">
											{{ errors.speaker }}
										</div>
									</div>
									<div class="badge-container">
										<span class="feature-badge basic-badge">BASIC</span>
										<span class="feature-badge pro-badge">PRO</span>
									</div>
								</div>
							</div>

							<!-- Post Description -->
							<div class="setting-group">
								<div class="tooltip-wrapper">
									<label class="field-label" for="post-desc">Target of The Post</label>
									<div class="tooltip-icon" data-tooltip="Provide your target objective for this post, such as promoting your shop, explaining a concept, driving sales etc. AI will analyze and appropriately incorporate relevant aspects based on the overall article context.">?</div>
								</div>
								<div class="post-description-wrapper premium-feature">
									<textarea 
										id="post-desc"
										name="post_desc"
										v-model="form.postDesc" 
										class="regular-text post-description-textarea"
										placeholder="Enter one sentence about the post, product, faq etc."
										:disabled="!isPro"
										rows="3"
									></textarea>
									<div class="badge-container">
										<span class="feature-badge pro-badge">PRO</span>
									</div>
									<p class="field-description">Briefly describe the purpose or goal of this post to help AI generate more targeted content.</p>
								</div>
							</div>
						</div>

						<!-- Generate Actions -->
						<div class="generate-actions">
							<button
								type="submit"
								id="generate_post"
								name="generate_post"
								class="btn btn-primary btn-lg"
								:disabled="generating"
							>
								<span class="btn-text">{{ generating ? 'Loading...' : 'Generate Post' }}</span>
								<svg class="btn-icon" viewBox="0 0 24 24" width="16" height="16" v-if="!generating">
									<path d="M13 5l7 7-7 7M5 12h15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
								</svg>
								<div class="loading-spinner btn-spinner" v-if="generating"></div>
							</button>

							<button
								type="button"
								id="generate_post_bu_credit"
								name="generate_post_bu_credit"
								class="btn btn-danger btn-lg"
								v-if="showBuyCredit"
								@click="goToBuyCredits"
							>
								<span class="btn-text">Buy Credit</span>
								<svg class="btn-icon" viewBox="0 0 24 24" width="16" height="16">
									<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="currentColor"/>
								</svg>
							</button>

							<button
								type="button"
								id="show-options"
								class="btn btn-secondary btn-lg"
								@click="toggleAdvanced"
							>
								<span class="btn-text">{{ advancedVisible ? 'Hide Options' : 'More Options' }}</span>
								<svg class="btn-icon" viewBox="0 0 24 24" width="16" height="16">
									<path d="M7 10l5 5 5-5z" fill="currentColor"/>
								</svg>
							</button>
						</div>
						<p class="terms-agreement">By generating the post, you agree to <a href="https://buildomatics.com/pages/postomatic/agreement" target="_blank" class="terms-link">our terms of service</a>.</p>

						<!-- Advanced Options Tabs -->
						<div id="advanced-options" class="advanced-options-wrapper" v-show="advancedVisible">
							<h2 class="nav-tab-wrapper">
								<a href="#content-planning" class="nav-tab"
									:class="{ 'nav-tab-active': activeTab==='content-planning' }"
									@click.prevent="activeTab='content-planning'">
									<svg class="tab-icon" viewBox="0 0 24 24" width="16" height="16">
										<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" fill="currentColor"/>
									</svg>
									Content Planning
								</a>
								<a href="#content-structure" class="nav-tab"
									:class="{ 'nav-tab-active': activeTab==='content-structure' }"
									@click.prevent="activeTab='content-structure'">
									<svg class="tab-icon" viewBox="0 0 24 24" width="16" height="16">
										<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" fill="currentColor"/>
									</svg>
									Content Structure
								</a>
								<a href="#seo-optimization" class="nav-tab"
									:class="{ 'nav-tab-active': activeTab==='seo-optimization' }"
									@click.prevent="activeTab='seo-optimization'">
									<svg class="tab-icon" viewBox="0 0 24 24" width="16" height="16">
										<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="currentColor"/>
									</svg>
									SEO & Optimization
								</a>
								<a href="#advanced" class="nav-tab" 
									:class="{ 'nav-tab-active': activeTab==='advanced' }"
									@click.prevent="activeTab='advanced'">
									<svg class="tab-icon" viewBox="0 0 24 24" width="16" height="16">
										<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" fill="currentColor"/>
									</svg>
									Advanced
								</a>
							</h2>

							<!-- Content Planning Tab -->
							<div v-show="activeTab==='content-planning'" class="tab-content active">
								<div class="settings-grid">

									<!-- Basic Settings -->
									<div class="settings-section">
										<h3>Basic Settings</h3>

										<!-- Use Exact Title -->
										<div class="form-table-div">
											<div class="form-row">
												<div class="form-label-column">
													<div class="tooltip-wrapper">
														<label class="field-label" for="bulk_posts">ATG</label>
														<div class="tooltip-icon" data-tooltip="Generate multiple post titles from a single Main Title—just enter the number you need.">?</div>
													</div>
												</div>
												<div class="form-input-column">
													<div class="bulk-counter premium-feature">
														<button
															id="decrement_btn"
															type="button"
															class="bulk-control-btn"
															@click="form.bulkCount = Math.max(1, form.bulkCount - 1)"
															:disabled="form.titleType==='bulk' || form.bulkCount <= 1 || !isPro"
														>
															<svg viewBox="0 0 24 24" width="16" height="16">
																<path d="M19 13H5v-2h14v2z" fill="currentColor"/>
															</svg>
														</button>

														<input
															id="bulk_posts"
															name="bulk_posts"
															type="number"
															v-model.number="form.bulkCount"
															class="bulk-creation-input"
															min="1"
															max="100"
															:disabled="form.titleType==='bulk' || !isPro"
															@input="onBulkCountChange"
														>

														<button
															id="increment_btn"
															type="button"
															class="bulk-control-btn"
															@click="form.bulkCount = Math.min(100, form.bulkCount + 1)"
															:disabled="form.titleType==='bulk' || form.bulkCount >= 100 || !isPro"
														>
															<svg viewBox="0 0 24 24" width="16" height="16">
																<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
															</svg>
														</button>

														<div class="badge-container">
															<span class="feature-badge pro-badge">PRO</span>
														</div>
													</div>
												</div>
											</div>
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="exact_title">Use Exact Title</label>
												<div
														class="tooltip-icon"
														data-tooltip="Check this option to use the exact title without any modifications. The content will be created based on the Main Title you enter, so make sure it's clear and meaningful."
												>
													?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<label class="checkbox-item premium-feature">
												<input
														type="checkbox"
														id="exact_title"
														name="exact_title"
														v-model="form.exactTitle"
														data-premium="true"
														:disabled="!isPro || form.bulkCount > 1"
														@click="validateExactTitle"
												>
												Check this box to use the exact title entered for both the title and the
												content.
											</label>
										</div>
									</div>
									<!-- ↓ new “Allow Comments?” row ↓ -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="comment_status">Allow Comments?</label>
												<div
														class="tooltip-icon"
														data-tooltip="Choose Open to allow comments on this post, or Closed to disable them."
												>
													?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="radio-group flex items-center">
												<label class="radio-option checkbox-item">
													<input
															type="radio"
															id="comment_status_open"
															name="comment_status"
															v-model="form.commentStatus"
															value="open"
													> Open
												</label>
												<label class="radio-option checkbox-item">
													<input
															type="radio"
															id="comment_status_closed"
															name="comment_status"
															v-model="form.commentStatus"
															value="closed"
													> Closed
												</label>
											</div>
										</div>
									</div>
								</div>


							</div>

							<!-- Author Options -->
							<div class="settings-section user-section">
								<h3>Author Options</h3>
								<div class="form-table-div">
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="writer">Who's Writing?</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the writer you want to add to your post as a writer."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper highlighted-user-section">
												<select
														id="writer"
														v-model="form.writer"
														class="regular-text dropdown-menu user-dropdown"
												>
													<option
															v-for="user in writers"
															:key="user.id"
															:value="user.id"
													><strong>{{ user.display_name }}</strong>
													</option>
												</select>
												<!-- no badges here -->
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Content Strategy -->
							<div class="settings-section">
								<h3>Content Strategy</h3>
								<div class="form-table-div">

									<!-- Content Tone -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="content_tone">Content Tone</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the tone for your content to match your audience's preferences."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="content_tone"
														name="content_tone"
														v-model="form.contentTone"
														class="regular-text dropdown-menu"
												>
													<option
															v-for="tone in contentTones"
															:key="tone.value"
															:value="tone.value"
															:disabled="!tone.available"
													>{{ tone.label }}
													</option>
												</select>
												<div class="badge-container">
													<span class="feature-badge basic-badge">BASIC</span>
													<span class="feature-badge pro-badge">PRO</span>
												</div>
											</div>
										</div>
									</div>

									<!-- Target Audience -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="target_audience">Target Audience</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select who your content is for, like the General Public, Students, Experts, or Entrepreneurs."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="target_audience"
														name="target_audience"
														v-model="form.targetAudience"
														class="regular-text dropdown-menu"
												>
													<option
															v-for="aud in audiences"
															:key="aud.value"
															:value="aud.value"
															:disabled="!aud.available"
													>{{ aud.label }}
													</option>
												</select>
												<div class="badge-container">
													<span class="feature-badge basic-badge">BASIC</span>
													<span class="feature-badge pro-badge">PRO</span>
												</div>
											</div>
										</div>
									</div>

									<!-- Content Length -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="content_length">Content Length</label>
												<div
														class="tooltip-icon"
														data-tooltip="Word count options: Brief (600), Standard (800-1,200), Detailed (1,500-2,500), Comprehensive (2,500+)."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="content_length"
														name="content_length"
														v-model="form.contentLength"
														class="regular-text dropdown-menu"
												>
													<option
															v-for="len in contentLengths"
															:key="len.value"
															:value="len.value"
															:disabled="!len.available"
													>{{ len.label }}
													</option>
												</select>
												<div class="badge-container">
													<span class="feature-badge basic-badge">BASIC</span>
													<span class="feature-badge pro-badge">PRO</span>
												</div>
											</div>
										</div>
									</div>

								</div>
							</div>

						</div>
					</div>


					<!-- Content Structure Tab -->
					<div
							id="content-structure"
							class="tab-content"
							v-show="activeTab==='content-structure'"
					>
						<div class="settings-grid">

							<!-- Content Elements -->
							<div class="settings-section">
								<h3>Content Elements</h3>
								<div class="checkbox-grid">

									<div class="checkbox-item">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.addEmoji"
													id="add_emoji"
													name="add_emoji"
													data-free="true"
											>
											<label class="field-label" for="add_emoji">Add Emoji 😎</label>
											<div
													class="tooltip-icon"
													data-tooltip="Emojis will be added only if the context of your post allows for it and they enhance the message. Otherwise, they will be omitted to keep the tone appropriate."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item basic-feature premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.realExamples"
													id="real_examples"
													name="real_examples"
													data-basic="true"
													data-premium="true"
											>
											<label class="field-label" for="real_examples">Real World Example</label>
											<div
													class="tooltip-icon"
													data-tooltip="Check this box to include a real-world example in the post"
											>?
											</div>
										</div>

									</div>

									<div class="checkbox-item basic-feature premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.includeToc"
													id="include_toc"
													name="include_toc"
													data-basic="true"
													data-premium="true"
											>
											<label class="field-label" for="include_toc">Table of Contents</label>
											<div
													class="tooltip-icon"
													data-tooltip="Check this to add a Table of Contents to your post."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item basic-feature premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.executiveSummary"
													id="executive_summary"
													name="executive_summary"
													data-basic="true"
													data-premium="true"
											>
											<label class="field-label" for="executive_summary">Executive Summary</label>
											<div
													class="tooltip-icon"
													data-tooltip="Add a summary that highlights the key takeaways and main insights of your content."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item basic-feature premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.includeKeyPoints"
													id="include_key_points"
													name="include_key_points"
													data-basic="true"
													data-premium="true"
											>
											<label class="field-label" for="include_key_points">Key Takeaways</label>
											<div
													class="tooltip-icon"
													data-tooltip="Highlight the most important points and insights from your content."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item basic-feature premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.faqData"
													id="faq_data"
													name="faq_data"
													data-basic="true"
													data-premium="true"
											>
											<label class="field-label" for="faq_data">FAQ Section</label>
											<div
													class="tooltip-icon"
													data-tooltip="Add FAQs to answer common questions."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.includeConclusion"
													id="include_conclusion"
													name="include_conclusion"
													data-free="true"
											>
											<label class="field-label" for="include_conclusion">Conclusion</label>
											<div
													class="tooltip-icon"
													data-tooltip="Wrap up with key points and a final recommendation."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.includeReferences"
													id="include_references"
													name="include_references"
													data-premium="true"
											>
											<label class="field-label" for="include_references">References &
												Sources</label>
											<div
													class="tooltip-icon"
													data-tooltip="List the sources and references used to back up the information in your content."
											>?
											</div>
										</div>
									</div>

								</div>
							</div>

							<!-- Media Integration -->
<!--                            <div class="settings-section">-->
<!--                                <h3>Media Integration</h3>-->
<!--                                <div class="checkbox-grid">-->
<!--                                    <div class="checkbox-item premium-feature">-->
<!--                                        <div class="tooltip-wrapper">-->
<!--                                            <input-->
<!--                                                    type="checkbox"-->
<!--                                                    v-model="form.suggestVideos"-->
<!--                                                    id="suggest_videos_title"-->
<!--                                                    name="suggest_videos_title"-->
<!--                                                    data-premium="true"-->
<!--                                            >-->
<!--                                            <label class="field-label" for="suggest_videos_title">-->
<!--                                                Video Title Suggestions for YouTube-->
<!--                                            </label>-->
<!--                                            <div-->
<!--                                                    class="tooltip-icon"-->
<!--                                                    data-tooltip="Automatically find related YouTube video titles and include them in your content for better engagement."-->
<!--                                            >?-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="badge-container">-->
<!--                                            <span class="feature-badge pro-badge">PRO</span>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->

						</div>
					</div>

					<!-- SEO & Optimization Tab -->
					<div
							id="seo-optimization"
							class="tab-content"
							v-show="activeTab==='seo-optimization'"
					>
						<div class="settings-grid">

							<!-- SEO Settings -->
							<div class="settings-section">
								<h3>SEO Settings</h3>
								<div class="form-table-div">

									<!-- Focus Keyword -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="focus_keyword">Focus Keyword</label>
												<div
														class="tooltip-icon"
														data-tooltip="Enter a primary keyword to optimize your content for search engines and improve SEO."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<input
													type="text"
													id="focus_keyword"
													name="focus_keyword"
													v-model="form.focusKeyword"
													class="regular-text"
													data-free="true"
											>
											<p class="description">
												Comma-separated list of main and content-specific keywords
											</p>
										</div>
									</div>

									<!-- Secondary Keywords -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="secondary_keywords">SEO Keywords
													</label>
												<div
														class="tooltip-icon"
														data-tooltip="Add related keywords to support your main keyword and enhance SEO performance."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<label class="checkbox-item premium-feature">
												<input
														type="text"
														id="secondary_keywords"
														name="secondary_keywords"
														v-model="form.secondaryKeywords"
														class="regular-text"
														data-premium="true"
												>
											</label>
											<p class="description">
												Comma-separated list of special SEO keywords for content optimization
											</p>
										</div>
									</div>

								</div>

								<!-- SEO checkboxes -->
								<div class="checkbox-grid">

									<div class="checkbox-item">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.autoMetaDesc"
													id="auto_meta_description"
													name="auto_meta_description"
													data-free="true"
											>
											<label class="field-label" for="auto_meta_description">Generate Meta
												Description</label>
											<div
													class="tooltip-icon"
													data-tooltip="Automatically create an SEO-friendly meta description and place it in the correct position in your blog post."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.autoAltTags"
													id="auto_alt_tags"
													name="auto_alt_tags"
													data-premium="true"
											>
											<label class="field-label" for="auto_alt_tags">Generate alt tags for existing images</label>
											<div
													class="tooltip-icon"
													data-tooltip="Automatically generate descriptive alt tags for any images in your content to improve accessibility and SEO."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.internalLinking"
													id="internal_linking"
													name="internal_linking"
													data-premium="true"
											>
											<label class="field-label" for="internal_linking">Add internal links from
												blog posts</label>
											<div
													class="tooltip-icon"
													data-tooltip="Automatically add relevant internal links from your blog posts, if there are any, to make navigation easier and boost SEO."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.postSuggestionSection"
													id="post_suggestion_section"
													name="post_suggestion_section"
													data-premium="true"
											>
											<label class="field-label" for="post_suggestion_section">Posts
												Suggestion</label>
											<div
													class="tooltip-icon"
													data-tooltip="Enable this option to automatically fill in the SEO details for the most popular WordPress plugins, saving you time and ensuring optimized metadata."
											>?
											</div>
										</div>
									</div>

								</div>
							</div>

							<!-- Content Quality -->
							<div class="settings-section">
								<h3>Content Quality</h3>
								<div class="checkbox-grid">

									<div class="checkbox-item premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.readabilityCheck"
													id="readability_check"
													name="readability_check"
													data-premium="true"
											>
											<label class="field-label" for="readability_check">Readability
												Analysis</label>
											<div
													class="tooltip-icon"
													data-tooltip="Double-check your content for clarity and readability before inserting it to ensure it's easy for your audience to understand."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.grammarCheck"
													id="grammar_check"
													name="grammar_check"
													data-premium="true"
											>
											<label class="field-label" for="grammar_check">Grammar Check</label>
											<div
													class="tooltip-icon"
													data-tooltip="Review your content for any grammatical errors before inserting it to ensure it's polished and professional."
											>?
											</div>
										</div>
									</div>

									<div class="checkbox-item premium-feature">
										<div class="tooltip-wrapper">
											<input
													type="checkbox"
													v-model="form.keywordDensityCheck"
													id="keyword_density"
													name="keyword_density"
													data-premium="true"
											>
											<label class="field-label" for="keyword_density">Recheck Keyword
												Density</label>
											<div
													class="tooltip-icon"
													data-tooltip="Double-check the keyword density in your content to ensure it's optimized for SEO without overstuffing."
											>?
											</div>
										</div>
									</div>

								</div>
							</div>

						</div>
					</div>


					<!-- Advanced Tab -->
					<div
							id="advanced"
							class="tab-content"
							v-show="activeTab === 'advanced'"
					>
						<div class="settings-grid">

							<!-- AI Settings -->
							<div class="settings-section">
								<h3>AI Settings</h3>
								<div class="form-table-div">
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="ai-creativity">AI Creativity
													Level</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the creativity level for your content: Conservative, Balanced, Creative, or Experimental."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="ai-creativity"
														name="ai_creativity"
														v-model="form.aiCreativity"
														class="regular-text dropdown-menu"
												>
													<option
															v-for="opt in aiCreativityLevels"
															:key="opt.value"
															:value="opt.value"
															:disabled="!opt.available"
													>{{ opt.label }}
													</option>
												</select>
												<!-- only PRO options, so show PRO badge -->
												<div class="badge-container">
													<span class="feature-badge pro-badge">PRO</span>
												</div>
											</div>
										</div>
									</div>
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="research_depth">Research Depth</label>
												<div
														class="tooltip-icon"
														data-tooltip="Choose the level of research for your content: Basic, Moderate, Thorough, Extensive, or Comprehensive."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="research_depth"
														name="research_depth"
														v-model="form.researchDepth"
														class="regular-text dropdown-menu"
												>
													<option
															v-for="opt in researchDepthOptions"
															:key="opt.value"
															:value="opt.value"
															:disabled="!opt.available"
													>{{ opt.label }}
													</option>
												</select>
												<!-- has both BASIC and PRO -->
												<div class="badge-container">
													<span class="feature-badge basic-badge">BASIC</span>
													<span class="feature-badge pro-badge">PRO</span>
												</div>
											</div>
										</div>
									</div>
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="target_audience_country">T.A. Country</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the country of your target audience to tailor your content to their preferences and cultural context."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="target_audience_country"
														name="target_audience_country"
														v-model="form.targetCountry"
														class="regular-text dropdown-menu"
														:disabled="!isPro"
												>
													<optgroup
															v-for="(countries, cont) in contentData.countries"
															:key="cont"
															:label="cont"
													>
														<option
																v-for="c in countries"
																:key="c"
																:value="c"
														>{{ c }}
														</option>
													</optgroup>
												</select>
												<!-- only PRO -->
												<div class="badge-container">
													<span class="feature-badge pro-badge">PRO</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Publishing Settings -->
							<div class="settings-section">
								<h3>Publishing Settings</h3>
								<div class="form-table-div">
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="post_status">Post Status</label>
												<div
														class="tooltip-icon"
														data-tooltip="Choose the post status: save it as a draft, submit it for review, publish immediately, or schedule it for a future date."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="post_status"
														name="post_status"
														v-model="form.postStatus"
														class="regular-text dropdown-menu"
												>
													<option
															v-for="st in postStatusOptions"
															:key="st.value"
															:value="st.value"
															:disabled="!st.available"
													>{{ st.label }}
													</option>
												</select>
												<!-- has BASIC & PRO -->
												<div class="badge-container">
													<span class="feature-badge basic-badge">BASIC</span>
													<span class="feature-badge pro-badge">PRO</span>
												</div>
											</div>
										</div>
									</div>
									<div class="form-row" :class="{ hide: form.postStatus !== 'schedule' }">
										<div class="form-label-column">
											<label for="publish_date"></label>
										</div>
										<div class="form-input-column">
											<input
													type="datetime-local"
													id="publish_date"
													name="publish_date"
													v-model="form.publishDate"
													class="regular-text"
													data-pro="true"
											>
											<p class="description">Select the date you want to publish your post(s)</p>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>


				</div>
			</form>

			<!-- Recent Posts -->
			<recent-posts-table :posts="recentPosts" :pagination="pagination" @view="openModal"
								@delete-post="deletePost" @prev="fetchPrevPage" @next="fetchNextPage"></recent-posts-table>


		</div>
	</div>
</div>
	</div>
</div>
<?php wp_enqueue_script( 'postomatic-main-page', POSTOMATIC_PLUGIN_URL . 'includes/admin/assets/js/main-page.js', array(), POSTOMATIC_VERSION, true ); ?>
