{% extends "base.html" %}

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

{% block content %}
<div class="card">
    <h2>🔐 Inloggen</h2>
    <p>Log in om je gegevens veilig op te slaan en te synchroniseren tussen apparaten.</p>

    <form action="{{ url_for('main.login') }}" 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 }}">
        </div>

        <div class="form-group">
            <label for="password">Wachtwoord:</label>
            <input type="password" id="password" name="password" required>
        </div>

        <button type="submit" class="btn">🚪 Inloggen</button>
    </form>

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

<div class="card" style="border-left: 4px solid #28a745;">
    <h4>✨ Voordelen van een account</h4>
    <ul style="margin-left: 1rem;">
        <li>🔄 Synchroniseer tussen meerdere apparaten</li>
        <li>☁️ Veilige opslag in de cloud</li>
        <li>📊 Uitgebreidere statistieken en trends</li>
        <li>💾 Automatische backup van je gegevens</li>
        <li>🔒 End-to-end versleuteling</li>
    </ul>
</div>
{% endblock %}