<div class="p-6 fade-in">
    {% if success %}
    <div class="bg-sage-50 border border-sage-200 rounded-lg p-4">
        <div class="flex items-start gap-3">
            <svg class="w-6 h-6 text-sage-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div class="flex-1">
                <h3 class="font-medium text-sage-800">Payment Initialized Successfully</h3>
                <p class="text-sage-700 text-sm mt-1">{{ message }}</p>
                
                <div class="mt-4 space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-clay-600">Transaction Ref:</span>
                        <code class="bg-white px-2 py-0.5 rounded border border-clay-200 text-clay-800">{{ trans_ref }}</code>
                    </div>
                    {% if reference %}
                    <div class="flex justify-between text-sm">
                        <span class="text-clay-600">Your Reference:</span>
                        <code class="bg-white px-2 py-0.5 rounded border border-clay-200 text-clay-800">{{ reference }}</code>
                    </div>
                    {% endif %}
                </div>
                
                <div class="mt-4">
                    <a 
                        href="{{ authorization_url }}"
                        target="_blank"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-sage-600 text-white rounded-lg hover:bg-sage-700 transition-colors text-sm font-medium"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                        </svg>
                        Open Payment Page
                    </a>
                </div>
                
                <div class="mt-4 p-3 bg-white rounded border border-clay-200">
                    <p class="text-xs text-clay-500 mb-1">Authorization URL:</p>
                    <code class="text-xs text-clay-700 break-all">{{ authorization_url }}</code>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="bg-terra-50 border border-terra-200 rounded-lg p-4">
        <div class="flex items-start gap-3">
            <svg class="w-6 h-6 text-terra-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div>
                <h3 class="font-medium text-terra-800">Payment Initialization Failed</h3>
                <p class="text-terra-700 text-sm mt-1">{{ error }}</p>
                {% if details %}
                <pre class="mt-3 p-3 bg-terra-100 rounded text-xs overflow-x-auto"><code>{{ details }}</code></pre>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>
