{# Compact participant card with name, room, price, and edit button #}
{% set isCanceled = cardData.isCanceled is defined ? cardData.isCanceled : false %}
{% set isValid = cardData.isValid is defined ? cardData.isValid : true %}
{% set errorMessages = cardData.errorMessages|default([]) %}
{% set mode = mode|default('create') %}

<div id="participant-card-{{ index }}"
     class="{{ html_classes('border rounded p-4', { 'border-gray-400 bg-gray-50': isCanceled, 'border-red-700': not isValid }) }}">
    <div class="flex justify-between items-start">
        <div class="flex-1">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0"
                     {{ stimulus_controller('gravatar', {
                         url: gravatar_url(cardData.email),
                         alt: cardData.name
                     }, {
                         image: 'w-12 h-12 rounded-full'
                     }) }}
                     {{ qa_attribute('participant-avatar', index) }}>
                    {{ icon('user', 'w-12 h-12 text-gray-400') }}
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2">
                        <h3 class="font-semibold {{ isCanceled ? 'text-gray-600' : '' }}" {{ qa_attribute('participant-name', index) }}>
                            {{ cardData.name }}
                        </h3>
                        {% if isCanceled %}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-700 text-white" {{ qa_attribute('participant-canceled', index) }}>
                                storniert
                            </span>
                        {% endif %}
                        {% if not isValid %}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-700 text-white" {{ qa_attribute('participant-invalid', index) }}>
                                unvollständige oder fehlerhafte Daten
                            </span>
                        {% endif %}
                    </div>
                    <p class="text-sm text-gray-600" {{ qa_attribute('participant-room-name', index) }}>{{ cardData.roomName }}</p>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-4">
            <span class="font-medium {{ isCanceled ? 'text-gray-500' : '' }}" {{ qa_attribute('participant-price', index) }}>{{ cardData.price }}</span>
            {% if isCanceled %}
                <button type="button"
                        class="button bg-button bg-button--secondary opacity-50 cursor-not-allowed"
                        disabled
                        title="Stornierte Teilnehmer können nicht bearbeitet werden">
                    Bearbeiten
                </button>
            {% else %}
                {% if mode == 'edit' %}
                    <a href="{{ path('app_booking_edit_participant', {id: bookingId, index: index}) }}"
                       class="button bg-button bg-button--secondary"
                       {{ qa_attribute('btn-edit-participant', index) }}>
                        Bearbeiten
                    </a>
                {% else %}
                    <a href="{{ path('app_booking_create_step_2_participant', {index: index}) }}"
                       class="button bg-button bg-button--secondary"
                       {{ qa_attribute('btn-edit-participant', index) }}>
                        Bearbeiten
                    </a>
                {% endif %}
            {% endif %}
        </div>
    </div>
</div>