{# ═══════ PENDING / PROCESSING / AWAITING VERIFICATION ═══════ #}
{% set is_processing = (status == 'processing') %}
{% set is_review = (status == 'pending_review' or status == 'awaiting_verification') %}

{% if is_processing %}
    {% set badge_text = 'Processing' %}
    {% set pending_msg = 'Your payment is being processed by the gateway. This usually takes a few moments.' %}
{% elseif is_review %}
    {% set badge_text = 'Under Review' %}
    {% set pending_msg = 'Your payment details have been submitted and are being verified by the merchant.' %}
{% else %}
    {% set badge_text = 'Pending' %}
    {% set pending_msg = 'Your payment is pending confirmation. You will receive a notification once processed.' %}
{% endif %}

<div class="st-card">
    <div class="st-header {% if is_processing %}st-header-processing{% elseif is_review %}st-header-review{% else %}st-header-pending{% endif %}">
        <div class="st-icon-wrap">
            <div class="st-icon-ring1 {% if is_processing %}st-icon-ring1-processing{% elseif is_review %}st-icon-ring1-review{% else %}st-icon-ring1-pending{% endif %}"></div>
            <div class="st-icon-ring2 {% if is_processing %}st-icon-ring2-processing{% elseif is_review %}st-icon-ring2-review{% else %}st-icon-ring2-pending{% endif %}"></div>
            <div class="st-icon-circle {% if is_processing %}st-icon-circle-processing{% elseif is_review %}st-icon-circle-review{% else %}st-icon-circle-pending{% endif %}">
                {% if is_processing %}
                    <div class="st-spinner-border-processing"></div>
                {% else %}
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                {% endif %}
            </div>
        </div>
        <span class="st-badge st-pulse {% if is_processing %}st-badge-processing{% elseif is_review %}st-badge-review{% else %}st-badge-pending{% endif %}">
            {% if is_processing %}
                <div class="st-pulse-spinner-processing"></div>
            {% else %}
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            {% endif %}
            {{ badge_text }}
        </span>
        <h1 class="st-title">{{ status_label }}</h1>
        <p class="st-subtitle">{{ lang.pending_msg ?? pending_msg }}</p>
    </div>

    <div class="st-body">
        <div class="st-details">
            <div class="st-row st-amount-row">
                <span class="st-row-label">Amount</span>
                <span class="st-row-value">{{ txn.currency_symbol ?? '৳' }}{{ txn.amount|default(0)|number_format(2) }} {{ txn.currency ?? 'BDT' }}</span>
            </div>
            <div class="st-row-divider"></div>
            <div class="st-row">
                <span class="st-row-label">Transaction ID</span>
                <span class="st-row-value">{{ txn.trx_id ?? '-' }}</span>
            </div>
            <div class="st-row-divider"></div>
            <div class="st-row">
                <span class="st-row-label">Gateway</span>
                <span class="st-row-value">{{ txn.gateway_slug ?? 'OwnPay' }}</span>
            </div>
            <div class="st-row-divider"></div>
            <div class="st-row">
                <span class="st-row-label">Merchant</span>
                <span class="st-row-value">{{ brand.name ?? 'OwnPay' }}</span>
            </div>
            <div class="st-row-divider"></div>
            <div class="st-row">
                <span class="st-row-label">Status</span>
                <span class="st-row-value {% if is_processing %}st-row-value-processing{% elseif is_review %}st-row-value-review{% else %}st-row-value-pending{% endif %}">{{ badge_text }}</span>
            </div>
        </div>
        <p class="st-refresh-tip">
            This page refreshes automatically…
        </p>
    </div>

    <div class="st-actions">
        <a href="#" data-action="refresh-status" class="st-btn">
            <div class="st-btn-icon {% if is_processing %}st-btn-icon-refresh-processing{% elseif is_review %}st-btn-icon-refresh-review{% else %}st-btn-icon-refresh-pending{% endif %}">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
            </div>
            <span class="st-btn-label">Refresh<br>Status</span>
        </a>
        <a href="/" class="st-btn">
            <div class="st-btn-icon st-btn-icon-return">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </div>
            <span class="st-btn-label">Return to<br>Merchant</span>
        </a>
    </div>
</div>

<div class="st-footer">
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
    Secured by <a href="/">{{ brand.name ?? 'OwnPay' }}</a> · 256-bit encryption
</div>