{{define "txdetail"}}{{$addr := .AddrStr}}{{$tx := .Tx}}{{$data := .}}
<div class="tx-detail">
    <div class="row head">
        <div class="col-xs-7 col-md-8">
            <a href="/tx/{{$tx.Txid}}" class="ellipsis copyable txid">{{$tx.Txid}}</a>
            {{if $tx.Rbf}}<span class="ps-1" tt="Replace-by-Fee (RBF) transaction, could be overridden"> RBF</span>{{end}}
        </div>
        {{if $tx.Blocktime}}<div class="col-xs-5 col-md-4 text-end">{{if $tx.Confirmations}}mined{{else}}first seen{{end}} <span class="txvalue ms-1">{{unixTimeSpan $tx.Blocktime}}</span></div>{{end}}
        {{if $tx.ConfirmationETABlocks}}<div class="col-12 text-end">
            <span class="badge bg-info fw-bold" style="text-transform: none;" tt="Estimated first potential confirmation of this transaction.">confirmation estimated in {{relativeTime $tx.ConfirmationETASeconds}} <span class="fw-normal ps-1">({{$tx.ConfirmationETABlocks}} blocks)</span></span>
        </div>
        {{end}}
    </div>
    <div class="row body">
        <div class="col-md-5">
            <div class="row tx-in">
                {{range $vin := $tx.Vin}}
                <div class="col-12{{if $vin.IsOwn}} tx-own{{end}}">
                    {{range $a := $vin.Addresses}}
                    <span class="ellipsis copyable">
                        {{if and (ne $a $addr) $vin.IsAddress}}<a href="/address/{{$a}}">{{$a}}</a>{{else}}{{$a}}{{end}}
                    </span>
                    {{else}}
                    {{if $vin.Hex}}Unparsed address{{else}}No Inputs (Newly Generated Coins){{end}}
                    {{end}}
                    {{if $vin.Txid}}
                    <a class="outpoint" href="/tx/{{$vin.Txid}}" tt="Outpoint {{$vin.Txid}},{{$vin.Vout}}">←</a>
                    {{end}}
                    {{if $vin.Addresses}}{{amountSpan $vin.ValueSat $data "tx-amt copyable"}}{{end}}
                </div>
                {{else}}
                <div class="col-12">No Inputs</div>
                {{end}}
            </div>
        </div>
        <div class="col-md-1 col-xs-12 text-center">&nbsp;<span class="octicon"></span></div>
        <div class="col-md-6">
            <div class="row tx-out">
                {{range $vout := $tx.Vout}}
                <div class="col-12{{if $vout.IsOwn}} tx-own{{end}}">
                    {{range $a := $vout.Addresses}}
                    <span class="ellipsis copyable">
                        {{if and (ne $a $addr) $vout.IsAddress}}<a href="/address/{{$a}}">{{$a}}</a>{{else}}{{$a}}{{end}}
                    </span>
                    {{else}}
                    Unparsed address
                    {{end}}
                    <span class="tx-amt">
                        {{amountSpan $vout.ValueSat $data "copyable"}}{{if $vout.Spent}}<a class="spent" href="{{if $vout.SpentTxID}}/tx/{{$vout.SpentTxID}}{{else}}/spending/{{$tx.Txid}}/{{$vout.N}}{{end}}" tt="Spent">→</a>{{else}}<span class="unspent" tt="Unspent">×</span>
                        {{end}}
                    </span>
                    </td>
                </div>
                {{else}}
                <div class="col-12">No Outputs</div>
                {{end}}
            </div>
        </div>
    </div>
    <div class="row footer">
        <div class="col-sm-12 col-md-4">
            {{if $tx.FeesSat}}{{$fpb := feePerByte $tx}}
            Fee {{amountSpan $tx.FeesSat $data "txvalue copyable ms-3"}}{{if $fpb}} <span class="fw-normal small">({{$fpb}})</span>{{end}}
            {{end}}
        </div>
        <div class="col-sm-12 col-md-8 text-end">
            <span class="me-4">
            {{if $tx.Confirmations}}
            <span class="txvalue">{{formatUint32 $tx.Confirmations}}</span> confirmations
            {{else}}
            <span class="txvalue unconfirmed">Unconfirmed Transaction!</span>
            {{end}}
            </span>
            {{amountSpan $tx.ValueOutSat $data "txvalue copyable"}}
        </div>
    </div>
    <div class="d-flex flex-column p-4 rounded-4" style="background-color: var(--bs-border-color); color: var(--bs-dark); ">
        <span class="fw-bold">FLO Data</span>
        <span class="fst-normal copyable"></span>
        <script type="text/javascript">
            (function(){
                let _script = document.currentScript;
                let floData = ({{$tx.CoinSpecificData}}).floData;
                if(floData) {
                    _script.previousElementSibling.textContent = floData;
                    _script.remove();
                } else _script.parentElement.remove();
            })()
        </script>
    </div>
</div>
{{end}}