{% extends "base.html" %}

{% block title %}Log in{% if app_name %} to {{ app_name }}{% endif %} — allowthem{% endblock %}

{% block body %}
<div class="flex min-h-screen items-center justify-center px-4">
    <div class="w-full max-w-sm">
        {% if logo_url and logo_url is startingwith("https://") %}
        <img src="{{ logo_url }}" alt="{{ app_name }}"
             class="mx-auto h-16 w-16 rounded-lg object-contain mb-4">
        {% endif %}

        <h1 class="text-2xl font-bold text-center text-gray-900 mb-8">
            Log in{% if app_name %} to {{ app_name }}{% endif %}
        </h1>

        {% if error %}
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6" role="alert">
            {{ error }}
        </div>
        {% endif %}

        <form method="post" action="/login" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
            {% if client_id %}<input type="hidden" name="client_id" value="{{ client_id }}">{% endif %}

            <div>
                <label for="identifier" class="block text-sm font-medium text-gray-700 mb-1">
                    Email or username
                </label>
                <input type="text" id="identifier" name="identifier"
                       value="{{ identifier }}" autocomplete="username"
                       required
                       class="w-full rounded border border-gray-300 px-3 py-2 at-input-focus">
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                    Password
                </label>
                <input type="password" id="password" name="password"
                       autocomplete="current-password"
                       required
                       class="w-full rounded border border-gray-300 px-3 py-2 at-input-focus">
            </div>

            <button type="submit"
                    class="at-btn-primary w-full rounded px-4 py-2 text-white font-medium
                           focus:outline-none focus:ring-2 focus:ring-offset-2">
                Log in
            </button>
        </form>

        {% if oauth_providers %}
        <div class="mt-6">
            <div class="relative">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-300"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="bg-white px-2 text-gray-500">Or continue with</span>
                </div>
            </div>
            <div class="mt-4 space-y-2">
                {% for provider in oauth_providers %}
                <a href="/oauth/{{ provider }}/authorize{% if next %}?next={{ next }}{% endif %}"
                   class="flex w-full items-center justify-center rounded border border-gray-300
                          bg-white px-4 py-2 text-sm font-medium text-gray-700
                          hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    Log in with {{ provider | title }}
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <p class="mt-4 text-center text-sm text-gray-600">
            <a href="/forgot-password" class="at-link">Forgot password?</a>
        </p>

        <p class="mt-6 text-center text-sm text-gray-600">
            Don't have an account?
            <a href="/register{% if client_id %}?client_id={{ client_id }}{% endif %}" class="at-link">Create one</a>
        </p>
    </div>
</div>
{% endblock %}