{% extends "base.html" %}
{% block content %}

<div class="card">
    {% if mode == "register" %}
        <h2>Create an Account</h2>
        <p class="subtitle">
            Register to save your tone analysis history and access exports.
        </p>
    {% else %}
        <h2>Login</h2>
        <p class="subtitle">
            Log in to access your saved analyses and exports.
        </p>
    {% endif %}

    <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        <label>Email</label>
        <input type="email" name="email" required
               style="width: 100%; padding: 8px; margin-bottom: 12px;">

        <label>Password</label>
        <input type="password" name="password" required
               style="width: 100%; padding: 8px; margin-bottom: 16px;">

        {% if mode == "register" %}
            <label style="display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom: 16px;">
                <input type="checkbox" name="consent_privacy" required>
                <span>
                    I agree to the
                    <a href="{{ url_for('privacy') }}">Privacy Policy</a>
                    and understand how my data is used.
                </span>
            </label>
        {% endif %}

        <button type="submit">
            {% if mode == "register" %}Create Account{% else %}Login{% endif %}
        </button>
    </form>

    <p class="subtitle" style="margin-top: 12px;">
        {% if mode == "register" %}
            Already have an account?
            <a href="{{ url_for('login') }}">Log in here</a>.
        {% else %}
            Need an account?
            <a href="{{ url_for('register') }}">Register here</a>.<br>
            <a href="{{ url_for('forgot_password') }}">Forgot your password?</a>
        {% endif %}
    </p>
</div>

{% endblock %}