<?php
/**
 * Dashboard Page — Full analytics dashboard for CapiFlow.
 *
 * 9 widgets (all AJAX-loaded, skeleton on initial paint):
 *  1. Period selector + Refresh
 *  2. KPI grid: Total Events | CAPI Rescued | Rescued Revenue | Meta EMQ
 *  3. Conversion Funnel (Chart.js bar)
 *  4. Recovery Donut (Chart.js doughnut)
 *  5. Meta Integration Health table
 *  6. Confidence Gauge (SVG)
 *  7. Live Event Terminal (15s poll)
 *  8. Event Breakdown table
 *  9. Smart Insights  |  Pro ACR teaser (blurred if free)
 *
 * All widgets show skeleton loaders on first paint then populate via AJAX.
 * Empty states displayed when no data exists.
 *
 * @package CapiFlow
 */

defined('ABSPATH') || exit;

$capiflow_is_pro = \CapiFlow\Core\License_Manager::is_pro_active();
$capiflow_setup_ok = (bool) get_option('capiflow_wizard_complete', false);
$capiflow_pixel_ok = !empty(get_option('capiflow_pixel_id', ''));
$capiflow_currency = function_exists('get_woocommerce_currency_symbol') ? get_woocommerce_currency_symbol() : '$';
?>
<div class="capiflow-dashboard" id="capiflow-dashboard-wrap">

	<?php /* ── Setup not complete warning ─────────────────────────────────── */ ?>
	<?php if (!$capiflow_setup_ok || !$capiflow_pixel_ok): ?>
		<div class="capiflow-setup-success"
			style="background:#1e293b;border-color:#f59e0b;color:#fde68a;margin-bottom:24px;">
			<strong>⚙️ <?php esc_html_e('Setup Incomplete', 'capiflow'); ?></strong>
			<?php esc_html_e('Complete the setup wizard to start tracking events.', 'capiflow'); ?>
			<a href="<?php echo esc_url(admin_url('admin.php?page=capiflow-setup')); ?>"
				style="color:#fbbf24;font-weight:600;margin-left:8px;">
				<?php esc_html_e('Go to Setup →', 'capiflow'); ?>
			</a>
		</div>
	<?php endif; ?>

	<?php /* ── Header ─────────────────────────────────────────────────────── */ ?>
	<div class="capiflow-dashboard-header">
		<div>
			<h1 style="margin:0;font-size:22px;font-weight:700;">
				📊 <?php esc_html_e('CapiFlow Smart Dashboard', 'capiflow'); ?>
			</h1>
			<p style="margin:4px 0 0;font-size:13px;color:rgba(255,255,255,.5);">
				<?php esc_html_e('Server-side CAPI analytics powered by Meta Conversions API', 'capiflow'); ?>
			</p>
		</div>
		<div style="display:flex;gap:10px;align-items:center;">
			<select id="capiflow-period-selector" class="capiflow-period-select">
				<option value="7"><?php esc_html_e('Last 7 days', 'capiflow'); ?></option>
				<option value="30" selected><?php esc_html_e('Last 30 days', 'capiflow'); ?></option>
				<option value="90"><?php esc_html_e('Last 90 days', 'capiflow'); ?></option>
			</select>
			<button id="capiflow-refresh-btn" class="capiflow-refresh-btn">
				🔄 <?php esc_html_e('Refresh', 'capiflow'); ?>
			</button>
		</div>
	</div>

	<?php
	/**
	 * Pro plugin injects tab navigation here (📊 Overview | 📡 Meta Quality).
	 * Free users: nothing renders (no tabs visible).
	 */
	do_action( 'capiflow_dashboard_before_widgets' );
	?>

	<?php /* ── 1. KPI Grid ─────────────────────────────────────────────────── */ ?>
	<div class="capiflow-kpi-grid" id="capiflow-kpi-grid">

		<div class="capiflow-kpi" id="capiflow-kpi-total">
			<div class="capiflow-skeleton" id="capiflow-kpi-total-skeleton"></div>
			<div class="capiflow-kpi-data" style="display:none;">
				<div class="capiflow-kpi-label">📡 <?php esc_html_e('Total Events', 'capiflow'); ?>
				</div>
				<div class="capiflow-kpi-value" id="kpi-total-events">—</div>
				<div class="capiflow-kpi-sub" id="kpi-total-sub"></div>
			</div>
			<div class="capiflow-empty-state" id="capiflow-kpi-total-empty" style="display:none;">
				<span class="capiflow-empty-icon">📡</span>
				<p><?php esc_html_e('Waiting for first event…', 'capiflow'); ?></p>
			</div>
		</div>

		<div class="capiflow-kpi" id="capiflow-kpi-rescued">
			<div class="capiflow-skeleton" id="capiflow-kpi-rescued-skeleton"></div>
			<div class="capiflow-kpi-data" style="display:none;">
				<div class="capiflow-kpi-label">🛡️
					<?php esc_html_e('CAPI Rescued Events', 'capiflow'); ?></div>
				<div class="capiflow-kpi-value" id="kpi-rescued-events">—</div>
				<div class="capiflow-kpi-sub" id="kpi-rescued-sub"></div>
			</div>
			<div class="capiflow-empty-state" id="capiflow-kpi-rescued-empty" style="display:none;">
				<span class="capiflow-empty-icon">🛡️</span>
				<p><?php esc_html_e('No rescued events yet.', 'capiflow'); ?></p>
			</div>
		</div>

		<div class="capiflow-kpi" id="capiflow-kpi-revenue">
			<div class="capiflow-skeleton" id="capiflow-kpi-revenue-skeleton"></div>
			<div class="capiflow-kpi-data" style="display:none;">
				<div class="capiflow-kpi-label">💰 <?php esc_html_e('Rescued Revenue', 'capiflow'); ?>
				</div>
				<div class="capiflow-kpi-value" id="kpi-rescued-revenue">—</div>
				<div class="capiflow-kpi-sub" id="kpi-revenue-sub"></div>
			</div>
			<div class="capiflow-empty-state" id="capiflow-kpi-revenue-empty" style="display:none;">
				<span class="capiflow-empty-icon">💰</span>
				<p><?php esc_html_e('No revenue tracked yet.', 'capiflow'); ?></p>
			</div>
		</div>

		<?php if ( ! $capiflow_is_pro ) : ?>
			<!-- EMQ teaser: no real score, show "Pro" badge -->
			<div class="capiflow-kpi" id="capiflow-kpi-emq">
				<div class="capiflow-kpi-data">
					<div class="capiflow-kpi-label">⭐ <?php esc_html_e( 'Meta EMQ Score', 'capiflow' ); ?></div>
					<div class="capiflow-kpi-value" style="color:rgba(255,255,255,.3);">—</div>
					<div class="capiflow-kpi-sub" style="font-size:11px;color:rgba(255,255,255,.4);">
						<?php esc_html_e( 'Available in CapiFlow Pro', 'capiflow' ); ?>
					</div>
				</div>
			</div>
		<?php else : ?>
			<!-- Pro active: real EMQ card with skeleton → AJAX data -->
			<div class="capiflow-kpi" id="capiflow-kpi-emq">
				<div class="capiflow-skeleton" id="capiflow-kpi-emq-skeleton"></div>
				<div class="capiflow-kpi-data" style="display:none;">
					<div class="capiflow-kpi-label">⭐ <?php esc_html_e( 'Meta EMQ Score', 'capiflow' ); ?></div>
					<div class="capiflow-kpi-value" id="kpi-emq-score">—</div>
					<div class="capiflow-kpi-sub" id="kpi-emq-sub">
						<?php esc_html_e( 'Event Match Quality', 'capiflow' ); ?>
						<a href="#" id="capiflow-emq-deep-link" style="display:none;margin-left:6px;color:#10b981;font-size:11px;text-decoration:none;">
							<?php esc_html_e( 'See details →', 'capiflow' ); ?>
						</a>
					</div>
				</div>
				<div class="capiflow-empty-state" id="capiflow-kpi-emq-empty" style="display:none;">
					<span class="capiflow-empty-icon">⭐</span>
					<p><?php esc_html_e( 'EMQ available ~24h after first event.', 'capiflow' ); ?></p>
				</div>
			</div>
		<?php endif; ?>

	</div><!-- /.capiflow-kpi-grid -->

	<?php /* ── 2. Charts Row ─────────────────────────────────────────────── */ ?>
	<div class="capiflow-charts-grid" id="capiflow-charts-row">

		<div class="capiflow-chart-wrap" id="capiflow-funnel-wrap">
			<h3>📊 <?php esc_html_e('Conversion Funnel', 'capiflow'); ?></h3>
			<div class="capiflow-skeleton" id="capiflow-funnel-skeleton" style="height:200px;"></div>
			<div id="capiflow-funnel-chart-area" style="display:none;position:relative;height:200px;">
				<canvas id="capiflow-funnel-chart"></canvas>
			</div>
			<div class="capiflow-empty-state" id="capiflow-funnel-empty" style="display:none;">
				<span class="capiflow-empty-icon">📊</span>
				<p><?php esc_html_e('Funnel appears after your first sale.', 'capiflow'); ?></p>
			</div>
		</div>

		<div class="capiflow-chart-wrap" id="capiflow-donut-wrap">
			<h3>🔁 <?php esc_html_e('Recovery Breakdown', 'capiflow'); ?></h3>
			<div class="capiflow-skeleton" id="capiflow-donut-skeleton" style="height:200px;"></div>
			<div id="capiflow-donut-chart-area" style="display:none;position:relative;height:200px;">
				<canvas id="capiflow-donut-chart"></canvas>
			</div>
			<div class="capiflow-empty-state" id="capiflow-donut-empty" style="display:none;">
				<span class="capiflow-empty-icon">🔁</span>
				<p><?php esc_html_e('No recovery data yet.', 'capiflow'); ?></p>
			</div>
		</div>

	</div><!-- /.capiflow-charts-grid -->

	<?php if ( ! $capiflow_is_pro ) : ?>
		<!-- Pro features teaser: clean card, no blur/fake data -->
		<div class="capiflow-dashboard-grid capiflow-dashboard-grid--wide-side">
			<div class="capiflow-card" style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;">
				<h3 style="font-size:14px;margin:0 0 8px;color:rgba(255,255,255,.7);text-transform:uppercase;">
					📡 <?php esc_html_e( 'Meta Integration Health', 'capiflow' ); ?>
				</h3>
				<p style="font-size:12px;color:rgba(255,255,255,.4);margin:0 0 14px;max-width:300px;">
					<?php esc_html_e( 'View per-event EMQ scores, match key coverage, data freshness, and deduplication rates.', 'capiflow' ); ?>
				</p>
				<span style="font-size:12px;color:#10b981;font-weight:600;">
					<?php esc_html_e( 'Available in CapiFlow Pro', 'capiflow' ); ?>
				</span>
			</div>
			<div class="capiflow-card" style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;">
				<h3 style="font-size:14px;margin:0 0 8px;color:rgba(255,255,255,.7);text-transform:uppercase;">
					🎯 <?php esc_html_e( 'Confidence Score', 'capiflow' ); ?>
				</h3>
				<p style="font-size:12px;color:rgba(255,255,255,.4);margin:0 0 14px;max-width:260px;">
					<?php esc_html_e( 'Live gauge showing your overall tracking confidence across all events.', 'capiflow' ); ?>
				</p>
				<span style="font-size:12px;color:#10b981;font-weight:600;">
					<?php esc_html_e( 'Available in CapiFlow Pro', 'capiflow' ); ?>
				</span>
			</div>
		</div>
	<?php else : ?>
		<?php /* Pro active: Real Meta Health + Gauge rendered here. Pro hooks replace this content. */ ?>
		<div id="capiflow-meta-health-pro-slot">
			<?php do_action( 'capiflow_dashboard_meta_health' ); ?>
		</div>
	<?php endif; ?>

	<?php /* ── 4. Live Event Terminal ───────────────────────────────────────── */ ?>
	<div class="capiflow-card" style="margin-bottom:24px;">
		<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
			<h3
				style="font-size:14px;margin:0;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px;">
				⚡ <?php esc_html_e('Live Event Terminal', 'capiflow'); ?>
			</h3>
			<span style="font-size:10px;color:rgba(0,255,65,.5);">
				● <?php esc_html_e('Auto-refresh every 15s', 'capiflow'); ?>
			</span>
		</div>
		<div class="capiflow-terminal" id="capiflow-terminal">
			<div class="capiflow-terminal-entry" id="capiflow-terminal-init">
				<span class="t-ms">&gt;</span>
				<?php esc_html_e('Listening for events…', 'capiflow'); ?>
				<span class="capiflow-terminal-cursor"></span>
			</div>
		</div>
	</div>

	<?php /* ── 5. Event Breakdown Table ─────────────────────────────────────── */ ?>
	<div class="capiflow-card" style="margin-bottom:24px;" id="capiflow-table-card">
		<h3
			style="font-size:14px;margin:0 0 14px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px;">
			📋 <?php esc_html_e('Event Breakdown', 'capiflow'); ?>
		</h3>
		<div class="capiflow-skeleton" id="capiflow-table-skeleton" style="height:160px;"></div>
		<div id="capiflow-table-area" style="display:none;overflow-x:auto;">
			<table style="width:100%;font-size:12px;border-collapse:collapse;" id="capiflow-events-table">
				<thead>
					<tr style="color:rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.08);">
						<th style="text-align:left;padding:8px 4px;">
							<?php esc_html_e('Event', 'capiflow'); ?></th>
						<th style="padding:8px 4px;"><?php esc_html_e('Today', 'capiflow'); ?></th>
						<th style="padding:8px 4px;"><?php esc_html_e('Total', 'capiflow'); ?></th>
						<th style="padding:8px 4px;">✅ <?php esc_html_e('Pixel + CAPI', 'capiflow'); ?>
						</th>
						<th style="padding:8px 4px;">🛡️
							<?php esc_html_e('CAPI Rescued', 'capiflow'); ?></th>
						<th style="padding:8px 4px;"><?php esc_html_e('Rescue %', 'capiflow'); ?></th>
					</tr>
				</thead>
				<tbody id="capiflow-events-tbody">
					<tr>
						<td colspan="6" style="color:rgba(255,255,255,.3);text-align:center;padding:20px;">
							<?php esc_html_e('Loading…', 'capiflow'); ?>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="capiflow-empty-state" id="capiflow-table-empty" style="display:none;">
			<span class="capiflow-empty-icon">📋</span>
			<p style="margin-bottom:8px;"><?php esc_html_e('No events recorded yet.', 'capiflow'); ?>
			</p>
			<a href="<?php echo esc_url(admin_url('admin.php?page=capiflow-settings')); ?>" style="color:#60a5fa;">
				<?php esc_html_e('⚙️ Check Settings →', 'capiflow'); ?>
			</a>
		</div>
	</div>

	<?php /* ── 6. Insights + Pro ACR Teaser ─────────────────────────────────── */ ?>
	<div class="capiflow-dashboard-grid capiflow-dashboard-grid--two">

		<div class="capiflow-card" id="capiflow-insights-card">
			<h3
				style="font-size:14px;margin:0 0 14px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px;">
				💡 <?php esc_html_e('Smart Insights', 'capiflow'); ?>
			</h3>
			<div class="capiflow-skeleton" id="capiflow-insights-skeleton" style="height:100px;"></div>
			<ul id="capiflow-insights-list"
				style="display:none;list-style:none;margin:0;padding:0;font-size:13px;line-height:1.8;"></ul>
			<div class="capiflow-empty-state" id="capiflow-insights-empty" style="display:none;">
				<span class="capiflow-empty-icon">💡</span>
				<p><?php esc_html_e('No additional insights available right now.', 'capiflow'); ?></p>
			</div>
		</div>

		<?php if (!$capiflow_is_pro): ?>
			<!-- Cart Recovery teaser: clean card, no blur/fake data -->
			<div class="capiflow-card" style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;">
				<h3 style="font-size:14px;margin:0 0 8px;color:rgba(255,255,255,.7);text-transform:uppercase;">
					🛒 <?php esc_html_e('Abandoned Cart Recovery', 'capiflow'); ?>
				</h3>
				<p style="font-size:12px;color:rgba(255,255,255,.4);margin:0 0 14px;max-width:280px;">
					<?php esc_html_e('Automatically detect abandoned checkouts and recover lost revenue with email reminders and smart coupons.', 'capiflow'); ?>
				</p>
				<span style="font-size:12px;color:#10b981;font-weight:600;">
					<?php esc_html_e('Available in CapiFlow Pro', 'capiflow'); ?>
				</span>
			</div>
		<?php else: ?>
			<div class="capiflow-card" id="capiflow-acr-pro">
				<h3
					style="font-size:14px;margin:0 0 14px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px;">
					🛒 <?php esc_html_e('Abandoned Cart Recovery', 'capiflow'); ?>
				</h3>
				<div class="capiflow-skeleton" style="height:80px;"></div>
				<?php do_action('capiflow_dashboard_acr_widget'); ?>
			</div>
		<?php endif; ?>

		<?php /* ── Reputation Engine Widget (Pro only) ── */ ?>
		<?php if ( apply_filters( 'capiflow_is_pro_active', false ) ) : ?>
			<div class="capiflow-card" id="capiflow-reputation-pro">
				<h3
					style="font-size:14px;margin:0 0 14px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px;">
					🧠 <?php esc_html_e('Reputation Engine', 'capiflow'); ?>
				</h3>
				<div class="capiflow-skeleton" style="height:80px;"></div>
				<?php do_action('capiflow_dashboard_reputation_widget'); ?>
			</div>
		<?php endif; ?>

	</div>

	<?php
	/**
	 * Hook: after insights section.
	 * Pro uses this to inject Business Protection Summary or additional widgets.
	 */
	do_action( 'capiflow_dashboard_after_insights' );
	?>

	<?php /* ── 7. Business Protection Summary ────────────────────────────── */ ?>
	<?php if ( $capiflow_is_pro ) : ?>
		<div class="capiflow-card capiflow-bp-card" id="capiflow-bp-card" style="margin-bottom:24px;">
			<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
				<h3 style="font-size:14px;margin:0;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px;">
					🛡️ <?php esc_html_e( 'Business Protection', 'capiflow' ); ?>
				</h3>
				<span style="font-size:11px;color:rgba(255,255,255,.3);">
					<?php
					printf(
						/* translators: %d: number of days */
						esc_html__( 'Last %d days', 'capiflow' ),
						30
					);
					?>
				</span>
			</div>

			<!-- Skeleton loader -->
			<div class="capiflow-skeleton" id="capiflow-bp-skeleton" style="height:160px;"></div>

			<!-- LAYER 1 + 2 + 3: Rendered by JS via renderBusinessProtection() -->
			<div id="capiflow-bp-data" style="display:none;">

				<?php /* Layer 1: Big Impact Number */ ?>
				<div class="capiflow-bp-hero">
					<div class="capiflow-bp-hero-label">
						💰 <?php esc_html_e( 'Estimated Business Impact', 'capiflow' ); ?>
					</div>
					<div class="capiflow-bp-hero-value" id="capiflow-bp-total">—</div>
					<div class="capiflow-bp-hero-sub">
						<?php esc_html_e( 'revenue recovered + delivery costs saved', 'capiflow' ); ?>
					</div>
				</div>

				<?php /* Layer 2: Breakdown — Revenue Recovery | Cost Savings */ ?>
				<div class="capiflow-bp-breakdown">
					<div class="capiflow-bp-col">
						<div class="capiflow-bp-col-label">
							💰 <?php esc_html_e( 'Revenue Recovery', 'capiflow' ); ?>
						</div>
						<div class="capiflow-bp-col-value" id="capiflow-bp-recover-value">—</div>
						<div id="capiflow-bp-recover-list"></div>
					</div>
					<div class="capiflow-bp-divider"></div>
					<div class="capiflow-bp-col">
						<div class="capiflow-bp-col-label">
							🛡️ <?php esc_html_e( 'Cost Savings', 'capiflow' ); ?>
						</div>
						<div class="capiflow-bp-col-value" id="capiflow-bp-savings-value">—</div>
						<div id="capiflow-bp-savings-list"></div>
					</div>
				</div>

				<?php /* Layer 2.5: Performance Rate Bars — populated by JS */ ?>
				<div class="capiflow-bp-rates" id="capiflow-bp-rates" style="display:none;"></div>

				<?php /* Layer 3: Module Status badges */ ?>
				<div class="capiflow-bp-status" id="capiflow-bp-status">
					<div class="capiflow-bp-status-label">
						<?php esc_html_e( 'Module Status:', 'capiflow' ); ?>
					</div>
					<!-- Populated by JS -->
				</div>

			</div><!-- /#capiflow-bp-data -->

			<!-- Empty state: Pro active but no modules enabled -->
			<div class="capiflow-empty-state" id="capiflow-bp-empty" style="display:none;">
				<span class="capiflow-empty-icon">🛡️</span>
				<p style="margin-bottom:4px;">
					<?php esc_html_e( 'No protection modules activated yet.', 'capiflow' ); ?>
				</p>
				<p style="font-size:11px;color:rgba(255,255,255,.3);margin-bottom:12px;">
					<?php esc_html_e( 'Enable Cart Recovery, Fraud Guard, or Address Resolver to start protecting your revenue.', 'capiflow' ); ?>
				</p>
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=capiflow-settings&tab=pro' ) ); ?>"
					style="font-size:12px;color:#60a5fa;text-decoration:none;font-weight:600;">
					⚙️ <?php esc_html_e( 'Go to Pro Settings →', 'capiflow' ); ?>
				</a>
			</div>

		</div>
	<?php else : ?>
		<?php /* TEASER: Free user — clean feature description, no blur/fake data */ ?>
		<div class="capiflow-card capiflow-bp-card" style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;margin-bottom:24px;">
			<h3 style="font-size:14px;margin:0 0 8px;color:rgba(255,255,255,.7);text-transform:uppercase;">
				🛡️ <?php esc_html_e( 'Business Protection', 'capiflow' ); ?>
			</h3>
			<p style="font-size:12px;color:rgba(255,255,255,.4);margin:0 0 6px;max-width:320px;">
				<?php esc_html_e( 'Recover abandoned carts, block fraudulent orders, and resolve delivery addresses — all from one dashboard.', 'capiflow' ); ?>
			</p>
			<p style="font-size:11px;color:rgba(255,255,255,.3);margin:0 0 14px;max-width:300px;">
				<?php esc_html_e( 'Includes: Cart Recovery, Fraud Guard, Address Resolver.', 'capiflow' ); ?>
			</p>
			<span style="font-size:12px;color:#10b981;font-weight:600;">
				<?php esc_html_e( 'Available in CapiFlow Pro', 'capiflow' ); ?>
			</span>
		</div>
	<?php endif; ?>

	<?php
	/**
	 * Extensibility: Premium Analytics, future Pro widgets.
	 */
	do_action( 'capiflow_dashboard_after_widgets' );
	?>

	<?php /* ── Footer ──────────────────────────────────────────────────────── */ ?>
	<div style="text-align:center;padding:20px 0;border-top:1px solid rgba(255,255,255,.06);">
		<span style="font-size:11px;color:rgba(255,255,255,.2);">
			<?php
			printf(
				/* translators: %s: plugin version */
				esc_html__('CapiFlow v%s — Powered by Meta Conversions API', 'capiflow'),
				esc_html(CAPIFLOW_VERSION)
			);
			?>
		</span>
		<span style="margin:0 12px;color:rgba(255,255,255,.1);">|</span>
		<a href="<?php echo esc_url(admin_url('admin.php?page=capiflow-settings&tab=debug')); ?>"
			style="font-size:11px;color:rgba(255,255,255,.3);">
			<?php esc_html_e('Debug Console', 'capiflow'); ?>
		</a>
		<span style="margin:0 12px;color:rgba(255,255,255,.1);">|</span>
		<a href="<?php echo esc_url(admin_url('admin.php?page=capiflow-settings&tab=system')); ?>"
			style="font-size:11px;color:rgba(255,255,255,.3);">
			<?php esc_html_e('System Health', 'capiflow'); ?>
		</a>
	</div>

</div><!-- /.capiflow-dashboard -->
