{% trans_default_domain 'admin' %}

<div {{ attributes }}>

    <h2 class="mt-6 text-base font-semibold leading-6 text-gray-900 dark:text-white">Aktivität</h2>

    <div class="flow-root">
        <ul role="list" class="-mb-8 mt-2">
            {% for log in activity %}
                {% if log.isComment %}
                    <li>
                        <div class="relative pb-8">
                            {% if not loop.last %}
                                <span class="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-800"
                                      aria-hidden="true"></span>
                            {% endif %}
                            <div class="relative flex items-start space-x-3">
                                <div class="relative">
                                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-500 ring-8 ring-white dark:ring-gray-900">
                                        <span class="font-medium leading-none text-white">{{ log.createdBy.firstname|first|upper ~ log.createdBy.lastname|first|upper }}</span>
                                    </span>

                                    <span class="absolute -bottom-0.5 -right-1 rounded-tl bg-white dark:bg-gray-900 px-0.5 py-px">
                                        <twig:ux:icon name="ph:chat-dots" class="h-5 w-5 text-gray-400" aria-hidden="true" />
                                    </span>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div>
                                        <p class="text-sm">
                                            <span class="font-medium text-gray-900 dark:text-white"><a href="{{ path('admin_accounts_show', {uuid: log.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">{{ log.createdBy.name }}</a></span>
                                            <span class="text-gray-500 dark:text-gray-400">
                                                kommentierte
                                                {% if log.attendance|default(null) is not null %}
                                                    zu <span class="font-medium text-gray-900 dark:text-white"><a href="{{ path('admin_offers_show', {uuid: log.attendance.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">{{ log.attendance.offer.name }}</a></span>
                                                {% endif %}
                                                <time datetime="{{ log.createdAt|date('c') }}"
                                                      title="{{ log.createdAt|date('d.m.Y H:i:s') }}"
                                                      class="">{{ log.createdAt|ago }}
                                                </time>
                                            </span>
                                        </p>

                                    </div>
                                    <div class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                                        <p>{{ log.comment|nl2br }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                {% endif %}

                {% if log.isTransition|default and log.attendance|default(null) is not null %}
                    <li>
                        <div class="relative pb-8">
                            {% if not loop.last %}
                                <span class="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-800"
                                      aria-hidden="true"></span>
                            {% endif %}
                            <div class="relative flex items-start space-x-3">
                                <div>
                                    <div class="relative px-1">
                                        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 ring-8 ring-white dark:ring-gray-900">
                                            <twig:ux:icon name="ph:tag" class="h-5 w-5 text-gray-500 dark:text-gray-400" aria-hidden="true" />
                                        </div>
                                    </div>
                                </div>
                                <div class="min-w-0 flex-1 py-0">
                                    <div class="text-sm leading-6 text-gray-500 dark:text-gray-400">
                                        <span class="mr-0.5">
                                            <span class="font-medium text-gray-900 dark:text-white">
                                                {% if log.createdBy %}
                                                    <a href="{{ path('admin_accounts_show', {uuid: log.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">{{ log.createdBy.name }}</a>
                                                {% elseif log.applicationSystem|default %}
                                                    {{ "applicationSystem.#{log.applicationSystem}"|trans([], 'admin') }}
                                                {% endif %}
                                            </span>
                                            {{ log.transition.name == 'create' ? 'meldete' : 'setzte den Status von' }}
                                            {% if log.attendance.participant|default(null) is not null %}
                                                <span class="font-medium text-gray-900 dark:text-white"><a href="{{ path('admin_participants_show', {uuid: log.attendance.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">{{ log.attendance.participant.name }}</a></span>
                                                für
                                            {% endif %}
                                            <span class="font-medium text-gray-900 dark:text-white"><a href="{{ path('admin_offers_show', {uuid: log.attendance.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">{{ log.attendance.offer.name }}</a></span>
                                            {% if log.transition.tos is not empty and log.transition.tos|first is not empty %}
                                                {{ log.transition.name == 'create' ? 'an mit Status' : 'auf' }}
                                            {% else %}
                                                {{ log.transition.name == 'create' ? 'an' }}
                                            {% endif %}
                                        </span>
                                        {% if log.transition.tos is not empty and log.transition.tos|first %}
                                            <span class="mr-0.5">
                                                <twig:Admin:Badge attendance="{{ log.transition.tos|first }}" />
                                            </span>
                                        {% endif %}
                                        <span class="whitespace-nowrap">
                                            <time datetime="{{ log.createdAt|date('c') }}"
                                                  title="{{ log.createdAt|date('d.m.Y H:i:s') }}"
                                                  class="">{{ log.createdAt|ago }}
                                            </time>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                {% endif %}
                {% if log.isTransition|default and log.offer|default(null) is not null %}
                    <li>
                        <div class="relative pb-8">
                            {% if not loop.last %}
                                <span class="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-800"
                                      aria-hidden="true"></span>
                            {% endif %}
                            <div class="relative flex items-start space-x-3">
                                <div>
                                    <div class="relative px-1">
                                        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 ring-8 ring-white dark:ring-gray-900">
                                            <twig:ux:icon name="ph:tag" class="h-5 w-5 text-gray-500 dark:text-gray-400" aria-hidden="true" />
                                        </div>
                                    </div>
                                </div>
                                <div class="min-w-0 flex-1 py-0">
                                    <div class="text-sm leading-6 text-gray-500 dark:text-gray-400">
                                        <span class="mr-0.5">
                                            <span class="font-medium text-gray-900 dark:text-white"><a href="{{ path('admin_accounts_show', {uuid: log.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">{{ log.createdBy.name }}</a></span>
                                            {{ 'setzte Status auf' }}
                                        </span>
                                        {% if log.transition.tos is not empty %}
                                            <span class="mr-0.5">
                                                <twig:Admin:Badge offer="{{ log.transition.tos|first }}" />
                                            </span>
                                        {% endif %}
                                        <span class="whitespace-nowrap">
                                            <time datetime="{{ log.createdAt|date('c') }}"
                                                  title="{{ log.createdAt|date('d.m.Y H:i:s') }}"
                                                  class="">{{ log.createdAt|ago }}
                                            </time>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>


    <div class="mt-6 flex gap-x-3">
        <span class="flex-none inline-flex items-center justify-center h-6 w-6 rounded-full bg-gray-400">
            <span class="text-xs font-medium leading-none text-white">{{ app.user.firstname|first|upper ~ app.user.lastname|first|upper }}</span>
        </span>
        <form action="#" class="relative flex-auto">
            <div class="overflow-hidden rounded-lg pb-12 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus-within:ring-2 focus-within:ring-primary-600">
                <label for="comment" class="sr-only">Verfasse deinen Kommentar…</label>
                <textarea rows="2" name="comment" id="comment"
                          data-model="newComment"
                          class="block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-0 sm:text-sm sm:leading-6"
                          placeholder="Verfasse deinen Kommentar…"></textarea>
            </div>

            <div class="absolute inset-x-0 bottom-0 flex justify-end py-2 pl-3 pr-2">
                <twig:Admin:Button size="sm" type="submit" data-action="live#action:prevent" data-live-action-param="comment">Kommentieren</twig:Admin:Button>
            </div>
        </form>
    </div>

</div>
