<h2 style="color: #333; font-size: 18px; margin-bottom: 15px;">ТРЕБУЕТСЯ ОПЛАТА</h2>

<!-- Payment deadline -->
{% if reservation.payment.status.waitingUntil %}
    <p style="color: #51545E; font-size: 15px; line-height: 1.625; margin-bottom: 10px;">
        <strong>СРОК ОПЛАТЫ:</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;">
        Бронирование будет автоматически отменено, если оплата не поступит до этого времени
    </p>
{% endif %}

<!-- Payment details -->
<p style="color: #51545E; font-size: 15px; line-height: 1.8; margin-bottom: 20px;">
    <strong>Способ оплаты:</strong> {{ reservation.payment.method.name }}<br/>
    <strong style="color: #dc3545;">Несвоевременная оплата приведёт к автоматической отмене бронирования</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;">
                                ОПЛАТИТЬ СЕЙЧАС - БЕЗОПАСНАЯ ОПЛАТА
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <p style="text-align: center; color: #6c757d; font-size: 14px;">
        Безопасная обработка платежей • Ваши данные защищены
    </p>

{% elseif contacts.bankAccount %}
    <!-- Bank transfer -->
    <h3 style="color: #333; font-size: 16px; margin-top: 25px; margin-bottom: 10px;">Реквизиты для банковского перевода</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;">
        Пожалуйста, укажите номер бронирования в назначении платежа
    </p>
{% endif %}

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