{% extends "base.html" %}

{% block title %}Login - PrepMate{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card shadow-sm">
                <div class="card-body text-center p-5">
                    <h1 class="h3 mb-4">Welcome to PrepMate</h1>
                    <p class="text-muted mb-4">
                        Manage your profile and contacts with personalized conversation memory.
                    </p>
                    
                    <a href="{{ url_for('auth.login') }}" class="btn btn-primary btn-lg w-100">
                        <i class="bi bi-person-circle"></i>
                        Login with HuggingFace
                    </a>
                    
                    <p class="small text-muted mt-4 mb-0">
                        By logging in, you agree to use this application responsibly.
                    </p>
                </div>
            </div>
            
            <!-- Features -->
            <div class="mt-4">
                <h2 class="h6 text-muted text-center mb-3">Features</h2>
                <ul class="list-unstyled small">
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success"></i>
                        <strong>Profile Facts:</strong> Store important information about yourself
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success"></i>
                        <strong>Contact Management:</strong> Organize conversations by person
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success"></i>
                        <strong>Memory:</strong> PrepMate remembers facts across all sessions
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success"></i>
                        <strong>Chat:</strong> Natural conversation with context awareness
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}