{% extends 'base.html' %}

{% block title %}Login - Yatra Booking System Testing{% endblock %}

{% block content %}
<div style="max-width: 460px; margin: 0 auto;">
    <h2 style="text-align:center; color:#2c3e50; margin-bottom: 5px;">🔑 User Login</h2>
    <p style="text-align:center; color:#7f8c8d; margin-bottom: 25px;">
        Login works for all 3 roles: ADMIN, OPERATOR and PASSENGER (normal user)
    </p>

    <form method="post" action="{% url 'login' %}">
        {% csrf_token %}
        <div style="margin-bottom: 18px;">
            <label for="email" style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">Email</label>
            <input type="email" id="email" name="email" required placeholder="e.g. admin@yatra.com"
                value="{{ request.POST.email|default:'' }}"
                style="width:100%; padding:12px 15px; border:2px solid #dfe6e9; border-radius:10px; font-size:1rem;">
        </div>

        <div style="margin-bottom: 25px;">
            <label for="password"
                style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">Password</label>
            <input type="password" id="password" name="password" required placeholder="Enter password"
                style="width:100%; padding:12px 15px; border:2px solid #dfe6e9; border-radius:10px; font-size:1rem;">
        </div>

        <button type="submit" class="btn btn-primary" style="width:100%; font-size:1.05rem;">Login</button>
    </form>

    <div style="text-align:center; margin: 25px 0; color:#95a5a6; font-weight:600;">— OR —</div>

    <a href="{% url 'google_login' %}?role=PASSENGER" class="btn"
        style="display:block; width:100%; text-align:center; background:#ffffff; color:#444;
              border:2px solid #dfe6e9; box-shadow:0 4px 15px rgba(0,0,0,0.08); box-sizing:border-box; margin-bottom:12px;">
        <img src="https://www.google.com/favicon.ico" style="width:18px; vertical-align:middle; margin-right:8px;">
        Continue with Google - Passenger
    </a>
    <a href="{% url 'google_login' %}?role=OPERATOR" class="btn" style="display:block; width:100%; text-align:center; background:#ffffff; color:#444;
              border:2px solid #dfe6e9; box-shadow:0 4px 15px rgba(0,0,0,0.08); box-sizing:border-box;">
        <img src="https://www.google.com/favicon.ico" style="width:18px; vertical-align:middle; margin-right:8px;">
        Continue with Google - Operator
    </a>

    <p style="text-align:center; margin-top: 20px;">
        New here? <a href="{% url 'register' %}" style="color:#3498db; font-weight:600;">Create an account</a>
    </p>

    <div class="test-results" style="margin-top: 30px;">
        <strong>🧪 Admin test account</strong> (created by <code>py create_test_users.py</code>):
        <code>admin@yatra.com</code> / <code>Test@123</code>
        <br><br>
        <small style="color:#7f8c8d;">
            Users &amp; operators create their own accounts — register with email + password
            (verified by a 6-digit OTP), or use a Google button above.
            Login for them is 2-step: password + OTP. Admin is password-only.
            After 5 wrong passwords the account is locked for 15 minutes.
            Sessions last 7 days, then login (with OTP) is required again.
            Every attempt is saved in the <strong>Login Logs</strong>.
        </small>
    </div>
</div>
{% endblock %}