<h2 style="color: #333; font-size: 18px; margin-bottom: 15px;">PAYMENT REQUIRED</h2>

<!-- Payment deadline -->
{% if reservation.payment.status.waitingUntil %}
    <p style="color: #51545E; font-size: 15px; line-height: 1.625; margin-bottom: 10px;">
        <strong>PAYMENT DEADLINE:</strong>
    </p>
    <p style="margin: 0 0 10px 0; font-size: 20px; font-weight: bold; color: #dc3545;">
        {{ reservation.payment.status.waitingUntil|date('D, M j, Y \\a\\t g:i A') }}
    </p>
    <p style="margin: 0 0 20px 0; font-size: 14px; color: #856404;">
        Reservation will be automatically cancelled if not paid by this time
    </p>
{% endif %}

<!-- Payment details -->
<p style="color: #51545E; font-size: 15px; line-height: 1.8; margin-bottom: 20px;">
    <strong>Payment Method:</strong> {{ reservation.payment.method.name }}<br/>
    <strong style="color: #dc3545;">Failure to pay on time will result in automatic cancellation</strong>
</p>

{% if reservation.payment.method.gateway != 'offline' %}
    <!-- Online payment -->
    <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin: 30px 0;">
        <tr>
            <td align="center">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
                    <tr>
                        <td align="center">
                            <a href="{{ reservation.payment.method.captureToken }}"
                               class="f-fallback button button--green"
                               target="_blank"
                               style="font-size: 16px; padding: 12px 24px;">
                                PAY NOW - SECURE PAYMENT
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <p style="text-align: center; color: #6c757d; font-size: 14px;">
        Secure payment processing • Your data is protected
    </p>

{% elseif contacts.bankAccount %}
    <!-- Bank transfer -->
    <h3 style="color: #333; font-size: 16px; margin-top: 25px; margin-bottom: 10px;">Bank Transfer Details</h3>

    <div style="background-color: #F4F4F7; padding: 20px; margin-bottom: 15px;">
        {{ contacts.bankAccount|raw }}
    </div>

    <p style="text-align: center; color: #51545E; font-size: 14px; margin-top: 15px;">
        Please include the reservation number in your transfer reference
    </p>
{% endif %}

<!-- Separator -->
<hr style="border: none; border-top: 1px solid #EAEAEC; margin: 30px 0;" />
