<div {{ attributes|raw }}>

    <h3 class="font-semibold text-base dark:text-white">{{ participant.name }}</h3>

    {% for attendance in attendances %}

        <div class="flex py-3">

            <div class="flex flex-col rounded-sm overflow-hidden border border-blue-100 divide-y divide-blue-100 dark:border-blue-900 dark:divide-blue-900">
                <button data-action="live#action"
                        data-live-action-param="upvote"
                        data-live-attendance-param="{{ attendance }}"
                        type="button"
                        class="px-3 py-1 bg-blue-50 text-blue-700 hover:bg-blue-700 hover:text-blue-50 text-center dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800 dark:hover:text-blue-100">

                    <twig:ux:icon name="lucide:chevron-up" class="size-6" />


                </button>

                <button data-action="live#action"
                        data-live-action-param="downvote"
                        data-live-attendance-param="{{ attendance }}"
                        type="button"
                        class="px-3 py-1 bg-blue-50 text-blue-700 hover:bg-blue-700 hover:text-blue-50 text-center dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800 dark:hover:text-blue-100">

                    <twig:ux:icon name="lucide:chevron-down" class="size-6" />

                </button>

            </div>

            <div class="ml-6 flex-1">

                {% if applicationSystem and applicationSystem.type == 'lot' and attendance.task and attendance.task.maxApplications %}
                    <div>
                        <p class="mt-0.5">
                            <span class="sr-only">{{ 'applicationList.header.priority'|trans({}, 'cms') }} {{ attendance.userPriority }}</span>
                            <span aria-hidden="true" class="flex items-center -ml-1">
                                {% for i in attendance.task.maxApplications..1 %}
                                    {% if attendance.userPriority > i %}
                                        <twig:ux:icon name="lucide:star" class="block h-4 w-4 text-gray-300" />
                                    {% else %}
                                        <twig:ux:icon name="lucide:star" class="block h-4 w-4 text-yellow-500" />
                                    {% endif %}
                                {% endfor %}
                            </span>
                        </p>

                    </div>
                {% endif %}

                <p>
                    <strong class="block font-medium dark:text-white/95">{{ attendance.offer.name }}</strong>
                    <span class="block text-gray-700 dark:text-white/75"><twig:Cms:OfferDate :dates="attendance.offer.dates" short /></span>
                </p>
            </div>
        </div>

    {% endfor %}

</div>
