{% extends 'bare.html.twig' %}

{% block title %}Log in — Torsearch{% endblock %}

{% block body %}
    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 w-full md:w-[420px] border-orange-500 border-2 text-gray-50 animate-fade">
        <h2 class="text-xl font-bold">Login</h2>
        <form method="post" class="flex flex-col gap-2">
            {% if error %}
                <div class="w-full p-1 mb-3 font-bold text-black bg-red-500/70 rounded-md">
                    {{ error.messageKey|trans(error.messageData, 'security') }}
                </div>
            {% endif %}

            {% if app.user %}
                <div class="mb-3">
                    You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
                </div>
            {% endif %}

            <label for="username" class="flex flex-col mb-2">
                User
                <input type="text"
                       name="_username"
                       id="username"
                       value="{{ last_username }}"
                       class="bg-gray-50 text-gray-50 p-1 bg-transparent border-b-2 border-orange-400"
                       required autofocus
                />
            </label>

            <label for="password" class="mb-2 flex flex-col">
                Password
                <input type="password"
                       name="_password"
                       id="password"
                       class="bg-gray-50 text-gray-50 p-1 bg-transparent border-b-2 border-orange-400"
                       autocomplete="current-password"
                       required>
            </label>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" data-controller="csrf-protection">


                <div class="mb-2 flex flex-row justify-between">
                    <div>
                        <input type="checkbox" name="_remember_me" id="_remember_me">
                        <label for="_remember_me">Remember me</label>
                    </div>
                </div>


            <button type="submit" class="bg-green-600/40 px-1.5 py-1 w-full rounded-md text-gray-50 backdrop-filter backdrop-blur-sm border-2 border-green-500 hover:bg-green-700/40">
                Sign in
            </button>
        </form>

        {% if show_oidc_button == "oidc" %}
        <a href="{{ path('app_login_oidc') }}" class="bg-sky-950/60 px-1.5 py-1 w-full rounded-md text-gray-50 text-center backdrop-filter backdrop-blur-sm border-2 border-gray-950 hover:bg-orange-700/40">
            Sign in with OIDC
        </a>
        {% endif %}

        <div class="flex">
            <a href="{{ path('app_forgot_password_request') }}">Forgot password?</a>
        </div>
    </div>
{% endblock %}