{% trans_default_domain 'admin' %}

<aside class="bg-gray-50 lg:w-96 lg:shrink-0 lg:border-l lg:border-gray-200 dark:bg-gray-900/10 dark:border-white/5">
    <header class="flex items-center justify-between border-b border-gray-200 px-4 py-4 sm:px-6 sm:py-6 lg:px-8 dark:border-white/5">
        <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">{{ 'Änderungslog'|trans }}</h2>
    </header>
    <ul role="list" class="divide-y divide-gray-100 dark:divide-white/5">
        {% for activity in activities %}
            <li class="px-4 py-4 sm:px-6 lg:px-8">
                <div class="flex items-center gap-x-3">
                    <span class="size-6 flex-none inline-flex items-center justify-center rounded-full bg-gray-400 dark:bg-gray-800">
                        <span class="text-[10px] font-medium leading-none text-white">
                            {% if activity.createdBy %}
                                {{ activity.createdBy.firstname|first|upper ~ activity.createdBy.lastname|first|upper }}
                            {% else %}
                                S
                            {% endif %}
                        </span>
                    </span>
                    <h3 class="flex-auto truncate text-sm/6 font-semibold text-gray-900 dark:text-white">
                        {% if activity.createdBy %}
                            <a href="{{ path('admin_accounts_show', {uuid: activity.createdBy.uuid.toBase58}) }}" data-turbo-frame="slideover" class="hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors">{{ activity.createdBy.name }}</a>
                        {% elseif activity.applicationSystem|default %}
                            {{ ("applicationSystem." ~ activity.applicationSystem)|trans }}
                        {% else %}
                            {{ 'System'|trans }}
                        {% endif %}
                    </h3>
                    <time datetime="{{ activity.createdAt|date('c') }}" class="flex-none text-xs text-gray-500 dark:text-gray-400">{{ activity.createdAt|ago }}</time>
                </div>
                <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
                    {% if activity.offer|default %}
                        {% if activity.isTransition|default %}
                            {{ 'setzte Status von'|trans }} <a href="{{ path('admin_offers_show', {uuid: activity.offer.uuid.toBase58}) }}" data-turbo-frame="slideover" class="text-gray-700 font-medium hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors dark:text-gray-200">{{ activity.offer.name }}</a> {{ 'auf'|trans }} <twig:Admin:Badge offer="{{ activity.transition.tos|first }}" />
                        {% else %}
                            <p class="text-gray-700 font-medium dark:text-gray-200"><a href="{{ path('admin_offers_show', {uuid: activity.offer.uuid.toBase58}) }}" data-turbo-frame="slideover" class="hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors">{{ activity.offer.name }}</a></p>
                            <div class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                                <p>{{ activity.comment|nl2br }}</p>
                            </div>
                        {% endif %}
                    {% elseif activity.participant|default %}
                        {% if activity.isTransition|default %}
                            {{ activity.transition.name == 'create' ? 'meldete'|trans : 'setzte den Status von'|trans }}
                            <a href="{{ path('admin_participants_show', {uuid: activity.participant.uuid.toBase58}) }}" data-turbo-frame="slideover" class="text-gray-700 font-medium hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors dark:text-gray-200">{{ activity.participant.firstname }} {{ activity.participant.lastname }}</a>
                            {{ activity.transition.name == 'create' ? 'an bei'|trans : 'bei'|trans }}
                            <a href="{{ path('admin_offers_show', {uuid: activity.attendance.offer.uuid.toBase58}) }}" data-turbo-frame="slideover" class="text-gray-700 font-medium hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors dark:text-gray-200">{{ activity.attendance.offer.name }}</a>
                            {% if activity.transition.tos is not empty and activity.transition.tos|first is not empty %}
                                {{ activity.transition.name == 'create' ? 'mit Status'|trans : 'auf'|trans }} <twig:Admin:Badge attendance="{{ activity.transition.tos|first }}" />
                            {% endif %}
                        {% else %}
                            <p class="text-gray-700 font-medium dark:text-gray-200"><a href="{{ path('admin_participants_show', {uuid: activity.participant.uuid.toBase58}) }}" data-turbo-frame="slideover" class="hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors">{{ activity.participant.firstname }} {{ activity.participant.lastname }}</a></p>
                            <div class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                                <p>{{ activity.comment|nl2br }}</p>
                            </div>
                        {% endif %}
                    {% elseif activity.host|default %}
                        <p class="text-gray-700 font-medium dark:text-gray-200"><a href="{{ path('admin_hosts_show', {uuid: activity.host.uuid.toBase58}) }}" data-turbo-frame="slideover" class="hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors">{{ activity.host.name }}</a></p>
                        <div class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                            <p>{{ activity.comment|nl2br }}</p>
                        </div>
                    {% endif %}
                </div>
            </li>
        {% endfor %}
    </ul>
</aside>
