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

106 lines
7.6 KiB
Twig

{% extends 'layout.html.twig' %}
{% block content %}
<div class="flex-1 flex flex-col min-h-0">
{# Header #}
<div class="shrink-0 px-4 lg:px-8 py-8 lg:py-16">
<h1 class="text-white uppercase pb-4">
Meine<br>Buchungen
</h1>
</div>
{# Scrollable content area #}
<div class="flex-1 overflow-y-auto p-4 lg:p-8 bg-primary-bg">
{% include '_partials/_flashes.html.twig' %}
<div class="space-y-8">
{% for booking in bookings %}
<div class="grid md:grid-cols-2 gap-4 p-2 bg-white rounded-md">
<div class="flex items-start space-x-4">
<div class="w-12 h-12 inline-flex flex-shrink-0 items-center justify-center rounded-full bg-primary-dark text-white text-2xl font-bold">
{{ loop.index }}
</div>
<div class="text-xl font-semibold">
{{ booking.travelName }}
</div>
</div>
<div>
<table class="mb-4">
<tr>
<th class="text-left border-r-2 border-gray-300 pr-2">
Reisedatum
</th>
<td class="pl-2">
{% if booking.travelData %}
{{ booking.travelData.dateFrom|date('d.m.Y') }} - {{ booking.travelData.dateTo|date('d.m.Y') }}
{% else %}
{{ booking.travelDate|date('d.m.Y') }}
{% endif %}
</td>
</tr>
<tr>
<th class="text-left border-r-2 border-gray-300 pr-2">
Buchungsnr.
</th>
<td class="pl-2">
{{ booking.bookingNumber }}
</td>
</tr>
<tr>
<th class="text-left border-r-2 border-gray-300">
Reisepreis
</th>
<td class="pl-2">
{{ booking.price|format_currency('EUR') }}
</td>
</tr>
<tr>
<th class="text-left border-r-2 border-gray-300">
offen
</th>
<td class="pl-2">
{{ booking.balance ? booking.balance|format_currency('EUR') : '-' }}
</td>
</tr>
<tr>
<th class="text-left border-r-2 border-gray-300">
Status
</th>
<td class="pl-2">
{{ booking.status|map_status }}
</td>
</tr>
</table>
<div class="flex space-x-2">
{% if booking.editable %}
<a href="{{ path('app_booking_edit', { 'id': booking.id }) }}"
{{ stimulus_action('loading', 'toggle') }}
class="button button--primary button--small"
title="Buchung bearbeiten">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="164" y1="92" x2="68" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="95.49" y1="215.49" x2="40.51" y2="160.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</a>
{% endif %}
<a href="{{ path('app_booking_invoice', { 'id': booking.id }) }}"
class="button button--secondary button--small"
title="Rechnung herunterladen"
target="_blank">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M64,56H40A16,16,0,0,0,24,72h0A16,16,0,0,0,40,88H56a16,16,0,0,1,16,16h0a16,16,0,0,1-16,16H28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="48" y1="48" x2="48" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="48" y1="120" x2="48" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M96,56H224V192a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="104" y1="104" x2="224" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="80" y1="152" x2="224" y2="152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168" y1="104" x2="168" y2="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</a>
{% if booking.travelInfoUrl is not null %}
<a href="{{ booking.travelInfoUrl }}"
class="button button--secondary button--small"
title="zu den Reiseinfos"
target="_blank">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M120,120a8,8,0,0,1,8,8v40a8,8,0,0,0,8,8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="124" cy="84" r="12"/></svg>
</a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}