{% extends "claims/base.html" %}
{% load i18n %}

{% block title %}{% trans "Logga in" %}{% endblock %}

{% block content %}
<section class="flex min-h-[60vh] items-center justify-center py-12">
    <div class="w-full max-w-md rounded-3xl bg-white px-8 py-10 shadow-xl ring-1 ring-gray-100">
        <div class="text-center">
            <p class="text-sm font-semibold uppercase tracking-wide text-brand-600">{% trans "Välkommen tillbaka" %}</p>
            <h1 class="mt-2 text-3xl font-semibold text-gray-900">{% trans "Logga in" %}</h1>
            <p class="mt-2 text-sm text-gray-600">{% trans "Använd dina administratörsuppgifter för att hantera utlägg." %}</p>
        </div>
        <form method="post" class="mt-8 space-y-6">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ next }}">
            {% for field in form %}
                {% if field.is_hidden %}
                    {{ field }}
                {% else %}
                    <div>
                        <label class="text-sm font-medium text-gray-700" for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <input
                            type="{{ field.field.widget.input_type|default:'text' }}"
                            name="{{ field.html_name }}"
                            id="{{ field.id_for_label }}"
                            value="{{ field.value|default_if_none:'' }}"
                            class="mt-1 block w-full rounded-xl border border-gray-200 px-3 py-2 text-sm shadow-sm focus:border-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-600"
                            {% if field.field.widget.attrs.autocomplete %}autocomplete="{{ field.field.widget.attrs.autocomplete }}"{% endif %}
                            {% if field.field.required %}required{% endif %}
                            {% if field.field.widget.attrs.autofocus %}autofocus{% endif %}
                        />
                        {% if field.help_text %}
                            <p class="mt-1 text-xs text-gray-500">{{ field.help_text }}</p>
                        {% endif %}
                        {% for error in field.errors %}
                            <p class="mt-1 text-sm text-rose-600">{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endfor %}
            <button type="submit" class="w-full rounded-2xl bg-brand-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-brand-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-600 focus-visible:ring-offset-2">
                {% trans "Logga in" %}
            </button>
        </form>
        <p class="mt-6 text-center text-xs text-gray-400">{% trans "Behöver du ett konto? Kontakta en superuser i organisationen." %}</p>
    </div>
</section>
{% endblock %}