@model WalletPSBTReadyViewModel
@{
    Layout = "../Shared/_Layout.cshtml";
}
<section>
    <div class="container">
        @if (Model.GlobalError != null)
        {
            <div class="alert alert-danger alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <span>@Model.GlobalError</span><br />
            </div>
        }
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Transaction review</h2>
                <hr class="primary">
                @if (Model.CanCalculateBalance)
                {
                    <p>
                        If you broadcast this transaction, your balance will change: @if (Model.Positive)
                        {
                            <span style="color:green;">@Model.BalanceChange</span>
                        }
                        else
                        {
                            <span style="color:red;">@Model.BalanceChange</span>
                        }, do you want to continue?
                    </p>
                }
                else
                {
                    <p>This PSBT is already finalized. We can't properly detect which input or output belongs to you.</p>
                }
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 text-center"></div>
            <div class="col-lg-6 text-center">
                <h4 class="text-left">Inputs</h4>
                <table class="table table-sm table-responsive-lg">
                    <thead class="thead-inverse">
                        <tr>
                            <th style="text-align:left" class="col-md-auto">
                                Index
                            </th>
                            <th style="text-align:right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var input in Model.Inputs)
                        {
                            <tr>
                                @if (input.Error != null)
                                {
                                    <td style="text-align:left">@input.Index <span class="fa fa-exclamation-triangle" style="color:red;" title="@input.Error"></span></td>
                                }
                                else
                                {
                                    <td style="text-align:left">@input.Index</td>
                                }

                                @if (input.Positive)
                                {
                                    <td style="text-align:right; color:green;">@input.BalanceChange</td>
                                }
                                else
                                {
                                    <td style="text-align:right; color:red;">@input.BalanceChange</td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <div class="col-lg-3 text-center"></div>
        </div>

        <div class="row">
            <div class="col-lg-3 text-center"></div>
            <div class="col-lg-6 text-center">
                <h4 class="text-left">Outputs</h4>
                <table class="table table-sm table-responsive-lg">
                    <thead class="thead-inverse">
                        <tr>
                            <th style="text-align:left" class="col-md-auto">
                                Destination
                            </th>
                            <th style="text-align:right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var destination in Model.Destinations)
                        {
                            <tr>
                                <td style="text-align:left">@destination.Destination</td>
                                @if (destination.Positive)
                                {
                                    <td style="text-align:right; color:green;">@destination.Balance</td>
                                }
                                else
                                {
                                    <td style="text-align:right; color:red;">@destination.Balance</td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <div class="col-lg-3 text-center"></div>
        </div>
        @if (Model.FeeRate != null)
        {
            <div class="row">
                <div class="col-lg-3 text-center"></div>
                <div class="col-lg-6 text-right">
                    <p class="text-muted">Transaction fee rate: <b>@Model.FeeRate</b></p>
                </div>
                <div class="col-lg-3 text-center"></div>
            </div>
        }
        <div class="row">
            <div class="col-lg-12 text-center">
                <form method="post" asp-action="WalletPSBTReady">
                    <input type="hidden" asp-for="PSBT" />
                    <input type="hidden" asp-for="SigningKey" />
                    <input type="hidden" asp-for="SigningKeyPath" />
                    @if (!Model.HasErrors)
                    {
                        <button type="submit" class="btn btn-primary" name="command" value="broadcast">Broadcast it</button> <span> or </span>
                    }
                    <button type="submit" class="btn btn-secondary" name="command" value="analyze-psbt">Export as PSBT</button>
                </form>
            </div>
        </div>
    </div>
</section>