{% extends "base.html" %}

{% block title %}Sign In - Moto Adventure{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-20">
    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
        <div class="bg-gradient-to-r from-blue-500 via-purple-500 to-teal-500 p-6 text-white text-center">
            <h2 class="text-2xl font-bold">
                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Moto Adventure" class="h-8 w-8 inline mr-2">
                Welcome Back
            </h2>
            <p class="text-blue-100 mt-1">Sign in to your account</p>
        </div>
        
        <form method="POST" class="p-6 space-y-6">
            {{ form.hidden_tag() }}
            
            <div>
                {{ form.email.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                {{ form.email(class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent") }}
                {% if form.email.errors %}
                    <div class="text-red-500 text-sm mt-1">
                        {% for error in form.email.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            
            <div>
                {{ form.password.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                {{ form.password(class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent") }}
                {% if form.password.errors %}
                    <div class="text-red-500 text-sm mt-1">
                        {% for error in form.password.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    {{ form.remember_me(class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded") }}
                    {{ form.remember_me.label(class="ml-2 block text-sm text-gray-700") }}
                </div>
                <a href="{{ url_for('auth.forgot_password') }}" class="text-sm text-purple-600 hover:text-purple-700">
                    Forgot password?
                </a>
            </div>
            
            {{ form.submit(class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-2 px-4 rounded-lg hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition font-medium") }}
        </form>
        
        <div class="px-6 pb-6 text-center">
            <p class="text-gray-600">
                Don't have an account?
                <a href="{{ url_for('auth.register') }}" class="text-blue-600 hover:text-blue-700 font-medium">
                    Sign up here
                </a>
            </p>
        </div>
    </div>
</div>
{% endblock %}