package ui

templ PWAInstallPrompt() {
	<div class="pwa-prompt" id="pwa-prompt">
		<h3>🚀 Install Next Workspace</h3>
		<p>Install as an app for quick access and offline support.</p>
		<button class="btn btn-primary" onclick="installPWA()">
			Install to Desktop
		</button>
	</div>
}

templ PWAGuideModal() {
	<div class="modal" onclick="event.stopPropagation()">
		<button class="modal-close" onclick="closePWAModal()">&times;</button>
		<h2>Install Next Workspace</h2>

		<p>Your browser didn't show an automatic install prompt. Use the instructions below for your device.</p>

		<h3 style="margin-bottom:0.5rem;font-size:0.875rem;">🖥️ Desktop Chrome/Edge</h3>
		<ol>
			<li>Click the <strong>install icon</strong> <code>⊕</code> in the address bar (right side)</li>
			<li>Click <strong>Install</strong> in the popup</li>
			<li>The app will open in its own window</li>
		</ol>

		<h3 style="margin-bottom:0.5rem;font-size:0.875rem;margin-top:1rem;">📱 iOS Safari</h3>
		<ol>
			<li>Tap the <strong>Share button</strong> <code>📤</code> at the bottom of the screen</li>
			<li>Scroll down and tap <strong>Add to Home Screen</strong></li>
			<li>Tap <strong>Add</strong> in the top-right corner</li>
			<li>The app icon will appear on your home screen</li>
		</ol>

		<h3 style="margin-bottom:0.5rem;font-size:0.875rem;margin-top:1rem;">🤖 Android Chrome</h3>
		<ol>
			<li>Tap the <strong>menu icon</strong> <code>⋮</code> (three dots)</li>
			<li>Tap <strong>Install app</strong> or <strong>Add to Home screen</strong></li>
			<li>Tap <strong>Install</strong></li>
		</ol>

		<button class="btn btn-primary" style="margin-top:1rem;width:100%;" onclick="closePWAModal()">
			Got it
		</button>
	</div>
}