{% load i18n %}

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">
            {% trans "Payment pending" %}
        </h3>
    </div>
    <div class="panel-body">
        <p>{% trans "Your payment is currently being processed. This usually takes just a few moments." %}</p>
        
        {% if payment.info_data.paystack_reference %}
            <p><strong>{% trans "Reference:" %}</strong> {{ payment.info_data.paystack_reference }}</p>
        {% endif %}
        
        <div class="alert alert-info">
            <i class="fa fa-clock-o"></i>
            {% trans "Please wait while we verify your payment with Paystack. You will be automatically redirected once the payment is confirmed." %}
        </div>
        
        <div class="text-center">
            <a href="{% url "presale:event.order.detail" organizer=order.event.organizer.slug event=order.event.slug order=order.code secret=order.secret %}" class="btn btn-default">
                {% trans "Back to order" %}
            </a>
        </div>
    </div>
</div>

<script>
// Auto-refresh page every 10 seconds to check for payment updates
setTimeout(function() {
    window.location.reload();
}, 10000);
</script>