{% extends "base.html.jinja" %}

{% block content %}
<section class="max-w-md mx-auto px-4 pt-24">
    <h1 class="text-2xl font-bold text-center mb-8">Sign in to Forage</h1>

    {% if error %}
    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
        {{ error }}
    </div>
    {% endif %}

    <form method="POST" action="/login" class="space-y-4">
        <div>
            <label for="identifier" class="block text-sm font-medium mb-1">Username or email</label>
            <input
                type="text"
                id="identifier"
                name="identifier"
                value="{{ identifier }}"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-gray-900"
                placeholder="alice or alice@example.com">
        </div>

        <div>
            <label for="password" class="block text-sm font-medium mb-1">Password</label>
            <input
                type="password"
                id="password"
                name="password"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-gray-900"
                placeholder="Your password">
        </div>

        <div class="flex items-center">
            <input type="checkbox" id="remember_me" name="remember_me" value="on" checked
                   class="h-4 w-4 rounded border-gray-300 text-gray-900 focus:ring-gray-900">
            <label for="remember_me" class="ml-2 text-sm text-gray-600">Remember me</label>
        </div>

        <button
            type="submit"
            class="w-full py-2 bg-gray-900 text-white rounded-md font-medium hover:bg-gray-800">
            Sign in
        </button>
    </form>

    <p class="mt-6 text-center text-sm text-gray-600">
        Don't have an account? <a href="/signup" class="font-medium text-gray-900 hover:underline">Create one</a>
    </p>
</section>
{% endblock %}