{% load i18n %}
{% load bloomerp %}

<div class="mx-auto flex max-w-4xl justify-center xl:h-full xl:overflow-y-auto">

    {% if queryset %}
        <ol class="relative space-y-10 before:absolute before:left-5 before:top-3 before:h-full before:w-px before:bg-gray-200">
            {% for entry in queryset %}
                <li class="relative grid grid-cols-[2.75rem_1fr] gap-6">
                        <div class="relative z-10 flex justify-center">
                            {% if entry.action == "DELETE" %}
                                <span class="inline-flex h-7 min-w-10 items-center justify-center rounded-full bg-danger px-3 text-xs font-semibold text-white shadow-sm">del</span>
                            {% elif entry.action == "CREATE" %}
                                <span class="inline-flex h-7 min-w-10 items-center justify-center rounded-full bg-primary px-3 text-xs font-semibold text-white shadow-sm">v{{ forloop.revcounter }}.0</span>
                            {% elif forloop.first %}
                                <span class="inline-flex h-7 min-w-10 items-center justify-center rounded-full bg-gray-950 px-3 text-xs font-semibold text-white shadow-sm">v{{ forloop.revcounter }}.0</span>
                            {% else %}
                                <span class="inline-flex h-7 min-w-10 items-center justify-center rounded-full bg-gray-100 px-3 text-xs font-medium text-gray-600">v{{ forloop.revcounter }}.0</span>
                            {% endif %}
                        </div>

                        <article class="min-w-0 pb-2">
                            <div class="flex flex-wrap items-center gap-2">
                                <div class="text-base font-medium leading-7 text-gray-950 dark:text-gray-100">
                                    {{ entry.summary_string|activity_log_html }}
                                </div>
                                {% if entry.source %}
                                    <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500">{{ entry.source }}</span>
                                {% endif %}
                            </div>

                            <p class="mt-1 text-sm text-gray-500">
                                {% if entry.actor %}
                                    {{ entry.actor }}
                                {% else %}
                                    System
                                {% endif %}
                                <span class="px-1 text-gray-300">&bull;</span>
                                {% blocktrans with elapsed=entry.timestamp|timesince %}{{ elapsed }} ago{% endblocktrans %}
                            </p>

                            {% if entry.action == "CHANGE" and entry.payload %}
                                <div class="mt-3 flex flex-wrap gap-1.5">
                                    {% for change in entry.payload %}
                                        <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">{{ change.field }}</span>
                                    {% endfor %}
                                </div>

                                <details class="group mt-3">
                                    <summary class="cursor-pointer text-sm font-medium text-gray-700 group-open:text-gray-950">{% translate "View changes" %}</summary>
                                    <div class="mt-3 overflow-hidden rounded-md border border-gray-200">
                                        <table class="min-w-full divide-y divide-gray-200 text-sm">
                                            <thead class="bg-gray-50">
                                                <tr>
                                                    <th class="px-3 py-2 text-left font-medium text-gray-600">{% translate "Field" %}</th>
                                                    <th class="px-3 py-2 text-left font-medium text-gray-600">{% translate "Before" %}</th>
                                                    <th class="px-3 py-2 text-left font-medium text-gray-600">{% translate "After" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody class="divide-y divide-gray-100 bg-white">
                                                {% for change in entry.payload %}
                                                    <tr>
                                                        <td class="whitespace-nowrap px-3 py-2 font-medium text-gray-800">{{ change.field }}</td>
                                                        <td class="px-3 py-2 text-gray-600">{{ change.from|default:"-"|activity_log_html }}</td>
                                                        <td class="px-3 py-2 text-gray-900">{{ change.to|default:"-"|activity_log_html }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </details>
                            {% elif entry.action == "DELETE" and entry.payload %}
                                <details class="group mt-3">
                                    <summary class="cursor-pointer text-sm font-medium text-gray-700 group-open:text-gray-950">{% translate "View deleted data" %}</summary>
                                    <div class="mt-3 overflow-hidden rounded-md border border-gray-200">
                                        <table class="min-w-full divide-y divide-gray-200 text-sm">
                                            <tbody class="divide-y divide-gray-100 bg-white">
                                                {% for field_name, value in entry.payload.items %}
                                                    <tr>
                                                        <td class="w-44 whitespace-nowrap bg-gray-50 px-3 py-2 font-medium text-gray-700">{{ field_name }}</td>
                                                        <td class="px-3 py-2 text-gray-900">{{ value|default:"-"|activity_log_html }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </details>
                            {% endif %}
                        </article>
                </li>
            {% endfor %}
        </ol>
    {% else %}
        <c-ui.text.muted class="">{% translate "No activity yet" %}</c-ui.text.muted>
    {% endif %}
</div>