{% extends "base.html" %}

{% block title %}Login - Inspection Reporting Tool{% endblock %}

{% block content %}
<div class="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
    <div class="text-center mb-6">
        <i class="fas fa-lock text-4xl text-blue-600 mb-4"></i>
        <h2 class="text-2xl font-bold text-gray-800">Sign in to your account</h2>
    </div>
    
    <form method="POST" class="space-y-6">
        {{ form.hidden_tag() }}
        
        <div>
            {{ form.username.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.username(class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500") }}
        </div>
        
        <div>
            {{ form.password.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.password(class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500") }}
        </div>
        
        <div>
            {{ form.submit(class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500") }}
        </div>
    </form>
    
    <div class="mt-6 text-center">
        <p class="text-sm text-gray-600">
            This is a secure application. Please ensure you are on the correct site.
        </p>
    </div>
</div>
{% endblock %}