@extends('layouts.home')
@section('styles')
    <style>
        .price-wrapper>:nth-last-child(1) {
            border-style: none !important;
        }
    </style>
@endsection
@section('body')
    <section id="pay_bridge_page">
        <div class="container">
            <div class="pay_bridge">
                <div class="pay_bridge_col1">
                    <div>
                        <lottie-player src="https://assets8.lottiefiles.com/packages/lf20_ph09qu41.json"
                            background="transparent" speed="1" loop autoplay>
                        </lottie-player>
                        <p>Sorry, your payment failed.</p>
                    </div>
                    <div class="pay_bridge_ctas">
                        <button class="proceed_btn">
                            <a href={{ route('retry.payment', ['tx_ref' => $tx_ref]) }}>
                                Try another method</a>
                        </button>
                        <button class="cancel_pay_btn">
                            <a href={{ route('pricing') }}>
                                I don't wish to proceed</a></button>
                    </div>
                </div>
                <div class="pay_bridge_col2">
                    <div>
                        <ion-icon name="chevron-back-outline"></ion-icon>
                        <p><a href={{ route('pricing') }}>Back to Pricing page</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>