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

{% block title %}{% trans "Mina utlägg" %}{% endblock %}

{% block content %}
<section class="space-y-6 py-6">
    <header class="max-w-3xl">
        <p class="text-sm font-semibold uppercase tracking-wide text-brand-600">{% trans "Översikt" %}</p>
        <h1 class="text-3xl font-semibold text-gray-900">{% trans "Mina utlägg" %}</h1>
        <p class="mt-2 text-sm text-gray-600">{% trans "Här ser du status för de utlägg du skickat in när du varit inloggad." %}</p>
    </header>

    {% if claims %}
        <div class="grid gap-6">
            {% for claim in claims %}
                <article class="rounded-3xl bg-white px-6 py-6 shadow-sm ring-1 ring-gray-100">
                    <div class="flex flex-col gap-4 border-b border-gray-100 pb-4 lg:flex-row lg:items-center lg:justify-between">
                        <div>
                            <p class="text-xs uppercase tracking-wide text-gray-500">{% trans "Skickad" %} {{ claim.created_at|date:"Y-m-d H:i" }}</p>
                            <h2 class="mt-1 text-2xl font-semibold text-gray-900">{{ claim.description|default:_("Utlägg") }}</h2>
                            <p class="mt-2 text-sm text-gray-600">
                                {% trans "Belopp" %}: <strong>{{ claim.amount }} {{ claim.currency }}</strong><br>
                                {% trans "Projekt" %}: {{ claim.project|default:"-" }}
                            </p>
                        </div>
                        <div class="flex flex-col items-start gap-2 text-sm lg:items-end">
                            <span class="rounded-full px-4 py-2 text-sm font-semibold {% if claim.status == 'approved' %}bg-green-50 text-green-700 border border-green-200{% elif claim.status == 'rejected' %}bg-rose-50 text-rose-700 border border-rose-200{% else %}bg-amber-50 text-amber-800 border border-amber-200{% endif %}">
                                {{ claim.get_status_display }}
                            </span>
                            {% if claim.paid_at %}
                                <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-800">
                                    {% trans "Betald" %} {{ claim.paid_at|date:"Y-m-d" }}
                                </span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="mt-4 grid gap-4 lg:grid-cols-[2fr,1fr]">
                        <div>
                            <p class="text-sm font-semibold text-gray-500">{% trans "Detaljer" %}</p>
                            <p class="mt-2 whitespace-pre-wrap text-gray-800">{{ claim.description }}</p>
                        </div>
                        <div class="rounded-2xl bg-slate-50 p-4 text-sm text-gray-600">
                            <p class="font-semibold text-gray-800">{% trans "Kvitto" %}</p>
                            {% if claim.receipt %}
                                <a class="mt-2 inline-flex items-center gap-2 text-brand-600 hover:text-brand-700" href="{{ claim.receipt.url }}" target="_blank" rel="noopener">
                                    {% trans "Visa fil" %}
                                </a>
                            {% else %}
                                <p class="mt-2 text-xs text-gray-400">{% trans "Inget kvitto bifogat." %}</p>
                            {% endif %}
                        </div>
                    </div>
                    <details class="mt-4 rounded-2xl border border-dashed border-gray-200 bg-gray-50 p-4 text-sm text-gray-700">
                        <summary class="cursor-pointer select-none text-sm font-semibold text-gray-800">{% trans "Visa logg" %}</summary>
                        <ul class="mt-3 space-y-2 text-sm text-gray-600">
                            {% for log in claim.logs.all %}
                                <li class="rounded-lg bg-white px-3 py-2 shadow-sm">
                                    <p class="font-semibold text-gray-900">{{ log.get_action_display }}</p>
                                    <p class="text-xs text-gray-500">{{ log.created_at|date:"Y-m-d H:i" }}</p>
                                    {% if log.from_status %}
                                        <p class="text-xs text-gray-500">{% trans "Status" %}: {{ log.get_from_status_display }} → {{ log.get_to_status_display }}</p>
                                    {% endif %}
                                    {% if log.note %}
                                        <p class="mt-1 text-xs text-gray-600">"{{ log.note }}"</p>
                                    {% endif %}
                                </li>
                            {% empty %}
                                <li class="text-xs text-gray-400">{% trans "Ingen logg än." %}</li>
                            {% endfor %}
                        </ul>
                    </details>
                </article>
            {% endfor %}
        </div>
    {% else %}
        <div class="rounded-3xl border border-dashed border-gray-200 bg-white px-6 py-10 text-center text-gray-500">
            <p class="text-lg font-semibold text-gray-900">{% trans "Inga utlägg ännu" %}</p>
            <p class="mt-2 text-sm">{% trans "Du har inte skickat in några utlägg ännu eller så gjordes de utan inloggning." %}</p>
        </div>
    {% endif %}
</section>
{% endblock %}