{{if .Connected}}
<button class="btn-danger" data-action="delete-proton">Unlink</button>
{{else}}
<p><strong>Link Proton Account:</strong></p>
<form class="auth-form" data-handler="proton">
	<div class="form-group">
		<label for="proton-email">Email:</label>
		<input type="email" id="proton-email" name="email" placeholder="your-email@proton.me" required>
	</div>
	<div class="form-group">
		<label for="proton-password">Password:</label>
		<div class="password-wrapper">
			<input type="password" id="proton-password" name="password" placeholder="Your Proton password" required>
			<button type="button" class="password-toggle" data-action="toggle-password" aria-label="Show password">
				<svg class="eye-icon eye-show" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
				<svg class="eye-icon eye-hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-10-7-10-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
			</button>
		</div>
	</div>
	<div class="form-group">
		<label for="proton-totp">2FA Code (optional):</label>
		<input type="text" id="proton-totp" name="totp" placeholder="123456" pattern="[0-9]{6}" inputmode="numeric" autocomplete="one-time-code">
	</div>
	<button type="submit" class="btn-primary">Link</button>
	<div id="proton-auth-status" class="auth-status"></div>
</form>
{{end}}

