{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="text-center">Login to SA STEM Tutor</h3>
            </div>
            <div class="card-body">
                <p class="text-center">Sign in with your existing account:</p>
                
                <div class="d-grid gap-2">
                    <a href="{{ url_for('google_login') }}" class="btn btn-danger">
                        <i class="fab fa-google me-2"></i> Sign in with Google
                    </a>
                    <!-- Add more providers here -->
                    <a href="#" class="btn btn-primary disabled">
                        <i class="fab fa-facebook me-2"></i> Sign in with Facebook (Coming Soon)
                    </a>
                    <a href="#" class="btn btn-dark disabled">
                        <i class="fab fa-apple me-2"></i> Sign in with Apple (Coming Soon)
                    </a>
                </div>
                
                <hr class="my-4">
                <p class="text-center text-muted">
                    Free tier includes 3 questions per day.<br>
                    <a href="{{ url_for('pricing') }}">Upgrade to Premium</a> for unlimited questions!
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}