170 lines
8.7 KiB
HTML
170 lines
8.7 KiB
HTML
{% load i18n %}
|
||
{{ formset.management_form }}
|
||
|
||
<div class="space-y-8" data-formset-list>
|
||
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||
<div>
|
||
<p class="text-sm font-semibold uppercase tracking-wide text-gray-500">{% trans "Steg 2" %}</p>
|
||
<h2 class="text-2xl font-semibold text-gray-900">{% trans "Utläggsrader" %}</h2>
|
||
<p class="mt-1 text-sm text-gray-600">{% trans "Lägg till ett block per kvitto eller kostnad. Projektväljaren hjälper ekonomin att bokföra rätt." %}</p>
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span class="rounded-full bg-gray-200 px-4 py-1 text-sm text-gray-700">
|
||
{% blocktrans %}Totalt <span data-current-count>{{ current_forms }}</span> rader{% endblocktrans %}
|
||
</span>
|
||
<div class="flex overflow-hidden rounded-full border border-gray-200 bg-white shadow-sm">
|
||
<button type="button"
|
||
class="px-3 py-2 text-sm font-semibold text-gray-600 transition hover:bg-gray-50 {% if not can_remove_forms %}pointer-events-none opacity-40{% endif %}"
|
||
data-action="remove-form"
|
||
{% if not can_remove_forms %}disabled{% endif %}>
|
||
–
|
||
</button>
|
||
<div class="border-l border-r border-gray-200 px-3 py-2 text-sm text-gray-500">{% trans "justera" %}</div>
|
||
<button type="button"
|
||
class="px-3 py-2 text-sm font-semibold text-gray-600 transition hover:bg-gray-50 {% if not can_add_forms %}pointer-events-none opacity-40{% endif %}"
|
||
data-action="add-form"
|
||
{% if not can_add_forms %}disabled{% endif %}>
|
||
+
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% for form in formset %}
|
||
<div class="rounded-2xl bg-white shadow-sm ring-1 ring-gray-100" data-claim-card>
|
||
<div class="border-b border-gray-100 px-6 py-4 flex items-center justify-between">
|
||
<h3 class="text-lg font-semibold text-gray-900">{% blocktrans %}Utlägg {{ forloop.counter }}{% endblocktrans %}</h3>
|
||
<p class="text-xs text-gray-500">{% trans "Obligatoriska fält markeras med *" %}</p>
|
||
</div>
|
||
<div class="space-y-6 px-6 py-6">
|
||
{{ form.non_field_errors }}
|
||
{% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %}
|
||
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">
|
||
{{ form.description.label }}<span class="text-rose-500"> *</span>
|
||
</label>
|
||
{{ form.description }}
|
||
{% for error in form.description.errors %}
|
||
<p class="mt-1 text-sm text-rose-600">{{ error }}</p>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="grid gap-6 md:grid-cols-2">
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">
|
||
{{ form.amount.label }}<span class="text-rose-500"> *</span>
|
||
</label>
|
||
{{ form.amount }}
|
||
{% for error in form.amount.errors %}
|
||
<p class="mt-1 text-sm text-rose-600">{{ error }}</p>
|
||
{% endfor %}
|
||
</div>
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">
|
||
{{ form.project.label }}
|
||
</label>
|
||
{{ form.project }}
|
||
{% for error in form.project.errors %}
|
||
<p class="mt-1 text-sm text-rose-600">{{ error }}</p>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<details class="rounded-xl border border-dashed border-gray-200 px-4 py-3 text-sm text-gray-600">
|
||
<summary class="cursor-pointer select-none text-base font-medium text-gray-800">
|
||
{% trans "Avancerat: justera valuta (standard SEK)" %}
|
||
</summary>
|
||
<div class="mt-4 space-y-4">
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">{{ form.currency.label }}</label>
|
||
{{ form.currency }}
|
||
{% for error in form.currency.errors %}
|
||
<p class="mt-1 text-sm text-rose-600">{{ error }}</p>
|
||
{% endfor %}
|
||
</div>
|
||
<p class="text-xs text-gray-500">{% trans "Använd detta om kvittot är i annan valuta än svenska kronor." %}</p>
|
||
</div>
|
||
</details>
|
||
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">{{ form.receipt.label }}</label>
|
||
{{ form.receipt }}
|
||
{% for error in form.receipt.errors %}
|
||
<p class="mt-1 text-sm text-rose-600">{{ error }}</p>
|
||
{% endfor %}
|
||
<p class="mt-1 text-xs text-gray-500">PDF, JPG eller PNG – max 10 MB.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-100">
|
||
<p class="text-sm text-gray-600">
|
||
{% trans "När du skickar in skickas du vidare mot adminvyn. Saknar du inloggning får du möjlighet att logga in." %}
|
||
</p>
|
||
<button type="submit" class="inline-flex items-center gap-2 rounded-full bg-brand-600 px-6 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 "Skicka in utlägg" %}
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 8.25L21 12m0 0-3.75 3.75M21 12H3" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{% with empty_form=formset.empty_form %}
|
||
<template id="claim-line-template">
|
||
<div class="rounded-2xl bg-white shadow-sm ring-1 ring-gray-100" data-claim-card>
|
||
<div class="border-b border-gray-100 px-6 py-4 flex items-center justify-between">
|
||
<h3 class="text-lg font-semibold text-gray-900">{% trans "Ny utläggsrad" %}</h3>
|
||
<p class="text-xs text-gray-500">{% trans "Obligatoriska fält markeras med *" %}</p>
|
||
</div>
|
||
<div class="space-y-6 px-6 py-6">
|
||
{{ empty_form.non_field_errors }}
|
||
{% for hidden in empty_form.hidden_fields %}{{ hidden }}{% endfor %}
|
||
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">
|
||
{{ empty_form.description.label }}<span class="text-rose-500"> *</span>
|
||
</label>
|
||
{{ empty_form.description }}
|
||
</div>
|
||
|
||
<div class="grid gap-6 md:grid-cols-2">
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">
|
||
{{ empty_form.amount.label }}<span class="text-rose-500"> *</span>
|
||
</label>
|
||
{{ empty_form.amount }}
|
||
</div>
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">
|
||
{{ empty_form.project.label }}
|
||
</label>
|
||
{{ empty_form.project }}
|
||
</div>
|
||
</div>
|
||
|
||
<details class="rounded-xl border border-dashed border-gray-200 px-4 py-3 text-sm text-gray-600">
|
||
<summary class="cursor-pointer select-none text-base font-medium text-gray-800">
|
||
{% trans "Avancerat: justera valuta (standard SEK)" %}
|
||
</summary>
|
||
<div class="mt-4 space-y-4">
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">{{ empty_form.currency.label }}</label>
|
||
{{ empty_form.currency }}
|
||
</div>
|
||
<p class="text-xs text-gray-500">{% trans "Använd detta om kvittot är i annan valuta än svenska kronor." %}</p>
|
||
</div>
|
||
</details>
|
||
|
||
<div>
|
||
<label class="text-sm font-medium text-gray-700">{{ empty_form.receipt.label }}</label>
|
||
{{ empty_form.receipt }}
|
||
<p class="mt-1 text-xs text-gray-500">{% trans "PDF, JPG eller PNG – max 10 MB." %}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
{% endwith %}
|