{% extends 'base/base.html' %}

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

{% block content %}

<section class="flex gap-8 w-full h-full items-center justify-center flex-col px-4">
    <a href="{{ url_for('core_bp.home') }}" class="group relative">
        <div class="absolute inset-0 bg-primary/20 blur-2xl rounded-full scale-90 group-hover:scale-100 transition-all duration-500"></div>
        <img 
            class="w-52 h-52 object-contain drop-shadow-2xl group-hover:scale-95 transition-all duration-500"
            src="{{ url_for('static', filename='icons/icon_512x512.png') }}"
            alt="Lombik logo">
    </a>

    <form class="w-full max-w-md flex flex-col gap-5">

        <div class="text-center">
            <h1 class="text-xl font-semibold text-slate-900">
                Log in
            </h1>

            <p class="mt-1 text-sm text-slate-500">
                Welcome back. Please enter your details.
            </p>
        </div>

        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div class="flex flex-col gap-4">

            {% for field in login_form.fields %}
                {% include "components/form_field.html" %}
            {% endfor %}

        </div>

        <div class="flex justify-end">
            <a
                href="{{ url_for('auth_bp.forgot_password_page') }}"
                class="text-xs text-slate-500 hover:text-primary transition">
                Forgot your password?
            </a>
        </div>

        <button
            type="submit"
            hx-post="{{ url_for('auth_bp.authenticate') }}"
            hx-swap="none"
            class="
                w-full
                rounded-xl
                bg-primary
                px-4 py-2.5
                text-sm
                font-medium
                text-white
                transition
                hover:opacity-90
                focus:outline-none
                focus:ring-2
                focus:ring-primary
                focus:ring-offset-2">
            Log in
        </button>

        <a href="{{ url_for('auth_bp.register') }}" 
            class="
                w-full
                flex
                items-center
                justify-center
                rounded-xl
                border
                border-stone-300
                px-4 py-2.5
                text-sm
                text-slate-700
                transition
                hover:bg-stone-50">
            Register
        </a>

    </form>

</section>

{% endblock %}