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

78 lines
4.3 KiB
Twig

{# Compact participant card with name, room, price, and edit button #}
{% set isCanceled = isCanceled|default(false) %}
{% set hasErrors = hasErrors|default(false) %}
{% set errorMessages = errorMessages|default([]) %}
{% set mode = mode|default('create') %}
<div id="participant-card-{{ index }}"
class="border rounded p-4
{{ isCanceled ? 'border-gray-400 bg-gray-50' : (hasErrors ? 'border-red-500 bg-red-50' : '') }}">
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-center gap-2">
<h3 class="font-semibold {{ hasErrors ? 'text-red-800' : (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>
{% elseif hasErrors %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800" {{ qa_attribute('participant-incomplete', index) }}>
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
Unvollständig
</span>
{% endif %}
</div>
<p class="text-sm text-gray-600" {{ qa_attribute('participant-room-name', index) }}>{{ cardData.roomName }}</p>
{# Display specific error messages #}
{% if hasErrors and errorMessages|length > 0 %}
<div class="mt-2 space-y-1" {{ qa_attribute('participant-errors', index) }}>
{% for errorMessage in errorMessages %}
<p class="text-sm text-red-700">
<svg class="w-4 h-4 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
{{ errorMessage }}
</p>
{% endfor %}
</div>
{% endif %}
</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' %}
<button type="button"
class="button bg-button {{ hasErrors ? 'bg-button--primary' : 'bg-button--secondary' }}"
hx-get="{{ path('app_booking_edit_participant', {id: bookingId, index: index}) }}"
hx-target="#main-content"
hx-swap="innerHTML"
{{ qa_attribute('btn-edit-participant', index) }}>
Bearbeiten
</button>
{% else %}
<button type="button"
class="button bg-button {{ hasErrors ? 'bg-button--primary' : 'bg-button--secondary' }}"
hx-get="{{ path('app_booking_create_step_2_participant', {index: index}) }}"
hx-target="#main-content"
hx-swap="innerHTML"
{{ qa_attribute('btn-edit-participant', index) }}>
Bearbeiten
</button>
{% endif %}
{% endif %}
</div>
</div>
</div>