<x-layouts.account-inner title="{{ ucfirst($transaction->type) }}">
    <center>
        @include('partials.transaction.top-details')
    </center>


    <div class="d-block my-4 btn btn-lg bgdarkandwhite border  p-1">
        <center></center>
        <div class="tfs mt-0 row m-0 p-0">

            <div class="col-4 darkandgray my-2" align="left">Date</div>
            <div class="col-8 my-2" align="right">{{ $transaction->date->format('d/m/Y, h:i A') }}</div>

            <div class="col-4 darkandgray my-2" align="left">Status</div>

            <div class="col-8 my-2 fw-bold darkandyellow" align="right">
                <span @class([ 'tj-success2'=> $transaction->status == 'completed',
                    'text-info' => $transaction->status == 'pending',
                    ])>
                    <i @class([ 'bi' , 'bi-currency-exchange'=> $transaction->type == 'swap',
                        'bi-upload' => $transaction->type == 'send',
                        'bi-receive' => $transaction->type == 'receive',
                        ])
                        ></i>
                    {{ ucfirst($transaction->status) }}
                </span>
            </div>

            <div class="col-4 darkandgray my-2" align="left" x-data>
                Network Fee <x-widgets.fee-alert />
            </div>
            <div class="col-8 my-2 wbrk" align="right">
                <font class="cfrom">{{ $transaction->details?->network_fee }}</font>
            </div>
        </div>
    </div>

    @include("partials.transaction.$transaction->type")

    {{-- <a wire:navigate href="{{ route('account.earn') }}">
        <div class="col-12 mt-5" align="center">
            <img src="/slide/sl1.png" id="image1" class="w-100" style="display: none;">
            <img src="/slide/sl2.png" id="image2" class="w-100" style="display: none;">
        </div>
    </a>
    <style>
        #image1,
        #image2 {
            display: none;
        }
    </style>
    <script src="/js/blink.js" data-navigate-once></script> --}}
</x-layouts.account-inner>