<?php
/**
 * Template file.
 *
 * @package DokanKits
 * @since   3.0.0
 */

// phpcs:disable
/**
 * Admin Settings App Template
 *
 * This template creates the container for the React-based features app.
 *
 * @since   3.0.0
 * @package Dokan_Kits
 *
 * @var string $title            Page title.
 * @var bool   $settings_updated Whether settings were updated successfully.
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Settings page title.
// $title = $title ?? __( 'Dokan Kits Settings', 'dokan-kits' );

// Check for features update notice.
$settings_updated = isset( $_GET['features-updated'] ) && 'true' === $_GET['features-updated'];
?>

<div class="wrap dokan-kits-admin-page">
	<!--<h1 class="wp-heading-inline"><?php /*echo esc_html( $title ); */ ?></h1>-->

	<?php if ( $settings_updated ) : ?>
		<div class="notice notice-success is-dismissible">
			<p><?php esc_html_e( 'Settings updated successfully.', 'dokan-kits' ); ?></p>
		</div>
	<?php endif; ?>

	<div id="dokan-kits-settings-root" class="dk-mt-wp-4">
		<!-- React app will render here -->
		<div class="dk-flex dk-flex-col dk-items-center dk-justify-center dk-p-wp-12">
			<span class="dk-inline-block dk-animate-spin dk-h-8 dk-w-8 dk-text-primary-600">
				<!-- Loading spinner SVG -->
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
					<circle class="dk-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
					<path class="dk-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
				</svg>
			</span>
			<p class="dk-mt-wp-4 dk-text-sm dk-text-gray-600">
				<?php esc_html_e( 'Loading features...', 'dokan-kits' ); ?>
			</p>
		</div>
	</div>
</div>

<!-- Settings modals container for React portals -->
<div id="dokan-kits-settings-modals"></div>
