{% extends "base.html" %}

{% block title %}Registreren - Snauw Counter{% endblock %}

{% block content %}
<div class="card">
    <h2>👤 Account aanmaken</h2>
    <p>Maak een gratis account om je gegevens veilig op te slaan.</p>

    <form action="{{ url_for('main.register') }}" method="POST">
        <div class="form-group">
            <label for="email">E-mailadres:</label>
            <input type="email" id="email" name="email" required
                   value="{{ request.form.email if request.form.email }}">
            <small style="color: #6c757d;">We sturen nooit spam en delen je e-mail niet</small>
        </div>

        <div class="form-group">
            <label for="password">Wachtwoord:</label>
            <input type="password" id="password" name="password" required minlength="6">
            <small style="color: #6c757d;">Minimaal 6 karakters</small>
        </div>

        <div class="form-group">
            <label for="password_confirm">Bevestig wachtwoord:</label>
            <input type="password" id="password_confirm" name="password_confirm" required minlength="6">
        </div>

        <div class="form-group">
            <label style="display: flex; align-items: center; font-weight: normal;">
                <input type="checkbox" required style="margin-right: 0.5rem; width: auto;">
                Ik ga akkoord met het <a href="{{ url_for('main.privacy') }}" target="_blank" style="color: #667eea;">privacy beleid</a>
            </label>
        </div>

        <button type="submit" class="btn">✨ Account aanmaken</button>
    </form>

    <p style="margin-top: 1.5rem; text-align: center; color: #6c757d;">
        Al een account?
        <a href="{{ url_for('main.login') }}" style="color: #667eea; text-decoration: none; font-weight: 500;">Inloggen</a>
    </p>
</div>

<div class="card" style="border-left: 4px solid #17a2b8;">
    <h4>🔒 Privacy & Beveiliging</h4>
    <ul style="margin-left: 1rem;">
        <li>✅ Minimale gegevensverzameling</li>
        <li>✅ Sterke wachtwoord versleuteling</li>
        <li>✅ Geen tracking of advertenties</li>
        <li>✅ GDPR/AVG compliant</li>
        <li>✅ Data export en verwijdering mogelijk</li>
        <li>✅ Optionele anonieme modus beschikbaar</li>
    </ul>
</div>

{% if request.endpoint == 'main.register' %}
<div class="card" id="migration-info" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: none;">
    <h4>💾 Data migratie</h4>
    <p>We hebben lokale gegevens gevonden! Na registratie migreren we automatisch je bestaande incidenten naar je nieuwe account.</p>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
// Check for local data and show migration info
document.addEventListener('DOMContentLoaded', function() {
    const localIncidents = localStorage.getItem('snauw_incidents');
    if (localIncidents) {
        const incidents = JSON.parse(localIncidents);
        if (incidents.length > 0) {
            const migrationInfo = document.getElementById('migration-info');
            if (migrationInfo) {
                migrationInfo.style.display = 'block';
                migrationInfo.innerHTML = `
                    <h4>💾 Data migratie</h4>
                    <p>We hebben ${incidents.length} lokaal opgeslagen incidenten gevonden! Na registratie migreren we deze automatisch naar je nieuwe account.</p>
                `;
            }
        }
    }

    // Password confirmation validation
    const password = document.getElementById('password');
    const passwordConfirm = document.getElementById('password_confirm');

    passwordConfirm.addEventListener('input', function() {
        if (password.value !== passwordConfirm.value) {
            passwordConfirm.setCustomValidity('Wachtwoorden komen niet overeen');
        } else {
            passwordConfirm.setCustomValidity('');
        }
    });
});
</script>
{% endblock %}