Files
myep/templates/booking/_participant_card.html.twig
T

69 lines
3.6 KiB
Twig

{# 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>