<template>
	<div class="simplestats-dashboard-empty__hero simplestats-dashboard-empty__hero--not-connected">
		<div class="simplestats-dashboard-empty__hero-inner">
			<span class="simplestats-dashboard-empty__pill-warning">
				<svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
					<path d="M6 4v2.5M6 8.5v.01M6 1.5L1 10h10L6 1.5Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
				<span>{{ text_pill }}</span>
			</span>

			<div class="simplestats-dashboard-empty__text">
				<h1 class="simplestats-dashboard-empty__heading">{{ text_heading }}</h1>
				<p class="simplestats-dashboard-empty__subtitle">{{ text_subtitle }}</p>
			</div>

			<a :href="SimpleStats.welcomeWizardUrl || SimpleStats.authenticationUrl" class="simplestats-dashboard-empty__button">
				<span>{{ text_button }}</span>
				<svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
					<path d="M2.4996 6H9.5004" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
					<path d="M6 2.4996L9.5004 6L6 9.5004" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
				</svg>
			</a>
		</div>
	</div>
</template>

<script setup>
	const text_pill     = wp.i18n.__( 'Not Connected', 'simplestats-friendly-website-analytics' );
	const text_heading  = wp.i18n.__( 'Connect your site to see your stats', 'simplestats-friendly-website-analytics' );
	const text_subtitle = wp.i18n.__( 'SimpleStats needs a quick connection to start tracking visits. It takes less than a minute.', 'simplestats-friendly-website-analytics' );
	const text_button   = wp.i18n.__( 'Connect Your Site', 'simplestats-friendly-website-analytics' );
</script>
