{% extends 'base.html' %}

{% block title %}Login{% endblock %}

{% block content %}
<div class="max-w-md mx-auto my-8 p-6 bg-white rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-6 text-navy-800">Login to Quizzical Beats</h2>
    
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="mb-4 p-3 {% if category == 'danger' %}bg-red-100 text-red-700{% elif category == 'success' %}bg-green-100 text-green-700{% else %}bg-blue-100 text-blue-700{% endif %} rounded">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    
    <form method="POST" action="{{ url_for('users.login') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        
        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
                Username or Email
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="username" name="username" type="text" placeholder="Enter your username or email">
        </div>
        
        <div class="mb-6">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                Password
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="password" name="password" type="password" placeholder="Enter your password">
        </div>
        
        <div class="mb-6 flex items-center">
            <input class="mr-2" type="checkbox" id="remember" name="remember">
            <label class="text-sm text-gray-700" for="remember">
                Remember me
            </label>
        </div>
        
        <div class="flex items-center justify-between">
            <button class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                Login
            </button>
            <a class="inline-block align-baseline font-bold text-sm text-teal-500 hover:text-teal-800" href="{{ url_for('users.forgot_password') }}">
                Forgot Password?
            </a>
        </div>
    </form>
    
    <!-- Social Login Options -->
    {% if oauth_providers and (oauth_providers.google or oauth_providers.authentik) %}
    <div class="mt-6 pt-6 border-t border-gray-200">
        <div class="flex flex-col space-y-3">
            {% if oauth_providers.google %}
            <a href="{{ url_for('users.google_login') }}" 
               class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                    <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
                    <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
                    <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path>
                    <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
                </svg>
                Sign in with Google
            </a>
            {% endif %}
            
            {% if oauth_providers.authentik %}
            <a href="{{ url_for('users.authentik_login') }}" 
               class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/svg/authentik.svg" class="h-5 w-5 mr-2" alt="Authentik logo" />
                Sign in with Authentik
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
    
    <div class="mt-6 pt-6 border-t border-gray-200 text-center">
        <p class="text-gray-700">
            Don't have an account? 
            <a href="{{ url_for('users.register') }}" class="font-bold text-teal-500 hover:text-teal-800">
                Register
            </a>
        </p>
    </div>
</div>
{% endblock %}