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

{% block title %}{% trans "Utloggad" %}{% endblock %}

{% block content %}
<section class="flex min-h-[50vh] items-center justify-center py-10">
    <div class="w-full max-w-md rounded-3xl bg-white px-8 py-10 text-center shadow-xl ring-1 ring-gray-100">
        <p class="text-sm font-semibold uppercase tracking-wide text-brand-600">{% trans "Du är utloggad" %}</p>
        <h1 class="mt-2 text-3xl font-semibold text-gray-900">{% trans "Vi ses snart igen" %}</h1>
        <p class="mt-3 text-sm text-gray-600">
            {% trans "Din session är avslutad. Du kan när som helst logga in igen för att hantera utlägg eller administrera systemet." %}
        </p>
        <a href="{% url 'login' %}"
           class="mt-6 inline-flex items-center justify-center rounded-full bg-brand-600 px-5 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 "Till inloggningen" %}
        </a>
    </div>
</section>
{% endblock %}