{%  extends 'layouts/emails/base.html.twig' %}

{% block body %}
        <tr>
            <td style="padding: 48px 24px 0; color: #161c2d; font-size: 18px; font-weight: 600;">
               <h3 class="text-center">{{ "Réservation confirmée" | capitalize }}</h3>
            </td>
        </tr>
    <tr>
        <td style="padding: 15px 24px 15px; color: #8492a6;">
            <div class="col-lg-12 col-md-12 mt-4 pt-2">
                <div class="text-center">
                    <img src="{{ vich_uploader_asset(event, 'logoFile') | imagine_filter('mimi') }}"  class="avatar avatar-medium shadow-lg rounded-pill" alt="{{ event.title }}">
                    <div class="content mt-3">
                        <p class="h3 text-dark">{{ event.title }}</p>
                        <hr>
                        <p class="h3 text-dark">{{ order.fullname  }}</p>
                        <p class="mt-3 mb-3">{% trans%} Vous trouverez votre billet en pièce jointe. Pour obtenir une facture, utilisez le lien au bas de cet email. Le paiement apparaitra sur votre relevé bancaire sous le nom de  {%endtrans%} {{ siteName }}</p>
                    </div>
                </div>
            </div>

        </td>
    </tr>

    <tr>
        <td style="padding: 24px 24px 0;">
            <table style="border: none;">
                <tbody>
                <tr>
                    <td style="min-width: 130px; padding-bottom: 8px;">{% trans %}Numéro de Facture{% endtrans %}. :</td>
                    <td style="color: #8492a6;">#{{ order.id }}</td>

                </tr>

                <tr>
                    <td style="min-width: 130px; padding-bottom: 8px;">Date :</td>
                    <td style="color: #8492a6;">{{ order.createdAt | date('d/m/Y H:s') }}</td>
                </tr>
{#                <tr>#}
{#                    <td style="min-width: 130px; padding-bottom: 8px;">{% trans %}Son Numéro{% endtrans %}:</td>#}
{#                    <td style="color: #8492a6;">{{ payment.debitedWallet.user.phone }}</td>#}
{#                </tr>#}
                </tbody>
            </table>
        </td>
    </tr>

    <tr>
        <td style="padding: 24px;">
{#            <div style="display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);">#}

            <div class="col-lg-12 col-md-12 mt-4 pt-2">
                <table cellpadding="0" cellspacing="0">
                    <thead class="bg-light">
                    <tr>
                        <th scope="col" style="text-align: left; vertical-align: bottom; border-top: 1px solid #dee2e6; padding: 12px;">No.</th>
                        <th scope="col" style="text-align: left; vertical-align: bottom; border-top: 1px solid #dee2e6; padding: 12px; width: 200px;">Item</th>
                        <th scope="col" style="text-align: left; vertical-align: bottom; border-top: 1px solid #dee2e6; padding: 12px; width: 200px;">{% trans%}Quantité {% endtrans%}</th>
                        <th scope="col" style="text-align: end; vertical-align: bottom; border-top: 1px solid #dee2e6; padding: 12px;">Total</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in order.orderDetails %}
                    <tr>
                        <th scope="row" style="text-align: left; padding: 12px; border-top: 1px solid #dee2e6;">#</th>
                        <td style="text-align: left; padding: 12px; border-top: 1px solid #dee2e6;">{{ item.ticket.title }}</td>
                        <td style="text-align: left; padding: 12px; border-top: 1px solid #dee2e6;">{{ item.quantity }}</td>
                        <td style="text-align: end; padding: 12px; border-top: 1px solid #dee2e6;">{{ item.price | format_currency(item.ticket.currency) }} x {{ item.quantity }}</td>
                    </tr>
                    {% endfor %}

                    <tr style="background-color: rgba(47, 85, 212, 0.2); color: #2f55d4; overflow-x: hidden;">
                        <th scope="row" style="text-align: left; padding: 12px; border-top: 1px solid rgba(47, 85, 212, 0.2);">Total</th>
                        <th scope="row" style="text-align: left; padding: 12px; border-top: 1px solid rgba(47, 85, 212, 0.2);"></th>
                        <td colspan="2" style="text-align: end; font-weight: 700; font-size: 18px; padding: 12px; border-top: 1px solid rgba(47, 85, 212, 0.2);">{{ order.totalPrice | format_currency(order.currency, locale = app.request.locale) }}</td>
                    </tr>
                    </tbody>

                </table>
            </div>
        </td>
    </tr>

{% endblock %}