{% extends "base.jinja2" %}

{% block title %}Confirm Email - DarkflameServer{% endblock %}

{# Confirmation needs a click: mail scanners open links automatically and must not be able to confirm addresses #}
{% block content_noauth %}
<div class="d-flex align-items-center justify-content-center min-vh-100">
	<div class="card shadow" style="width: 100%; max-width: 420px;">
		<div class="card-body p-4 text-center">
			<h3 class="card-title mb-3">Confirm your email</h3>
			<div id="alert" class="alert d-none" role="alert"></div>
			<button class="btn btn-primary w-100" id="confirmBtn">Confirm email address</button>
			<p class="small mt-3 mb-0"><a href="/login">Go to sign in</a></p>
		</div>
	</div>
</div>
{% endblock %}

{% block content %}
<div class="card mx-auto" style="max-width: 420px;">
	<div class="card-body p-4 text-center">
		<h3 class="card-title mb-3">Confirm your email</h3>
		<div id="alert" class="alert d-none" role="alert"></div>
		<button class="btn btn-primary w-100" id="confirmBtn">Confirm email address</button>
	</div>
</div>
{% endblock %}

{% block scripts %}
<script>
var token = new URLSearchParams(window.location.search).get('token') || '';
history.replaceState(null, '', '/verify_email');

document.getElementById('confirmBtn').addEventListener('click', function () {
	var btn = this;
	var alertEl = document.getElementById('alert');
	btn.disabled = true;
	api.post('/api/auth/verify_email', { token: token }).then(function (d) {
		alertEl.textContent = d.success ? d.message : (d.error || 'Confirmation failed');
		alertEl.className = 'alert alert-' + (d.success ? 'success' : 'danger');
		if (d.success) btn.classList.add('d-none'); else btn.disabled = false;
	}).catch(function (err) {
		alertEl.textContent = 'Network error: ' + err.message;
		alertEl.className = 'alert alert-danger';
		btn.disabled = false;
	});
});
</script>
{% endblock %}