btcpayserver/BTCPayServer/Plugins/BoltcardBalance/Views/BalanceView.cshtml

@using BTCPayServer.Plugins.BoltcardBalance.ViewModels
@using BTCPayServer.Services
@inject DisplayFormatter DisplayFormatter

@model BalanceViewModel

@{
    Layout = null;
}

<div class="col col-12 col-lg-12 mb-4">
    <div class="bg-tile h-100 m-0 p-3 p-sm-5 rounded">
        <nav id="wizard-navbar">
            @if (this.ViewData["NoCancelWizard"] is not true)
            {
                @if (Model.ViewMode == Mode.TopUp)
                {
                    <button type="button" class="btn btn-secondary only-for-js mt-4" id="lnurlwithdraw-button">
                        <span class="fa fa-qrcode fa-2x" title="Deposit"></span>
                    </button>
                }
                <a href="#" id="CancelWizard" class="cancel mt-4">
                    <vc:icon symbol="close" />
                </a>
            }
        </nav>
        <div class="d-flex justify-content-center">
            <div class="d-flex flex-column justify-content-center align-items-center">
                <dl class="mb-0 mt-md-4">
                    <div class="d-flex d-print-inline-block flex-column mb-4">
                        <dt class="h4 fw-semibold text-nowrap text-primary text-print-default order-2 order-sm-1 mb-1">@DisplayFormatter.Currency(Model.AmountDue, Model.Currency)</dt>
                    </div>
                </dl>
                @if (Model.ViewMode == Mode.TopUp)
                {
                    <div class="lnurl-pay boltcard-details d-none">
                        <vc:qr-code data="@Model.LNUrlBech32" />
                    </div>
                }
            </div>
        </div>
        @if (Model.ViewMode == Mode.Reset)
        {
            @if (Model.AmountDue > 0)
            {
                <div class="d-flex justify-content-center">
                    <a class="btn btn-outline-primary" href="@Model.PullPaymentLink">Sweep remaining balance</a>
                </div>
            }
            <div class="d-flex justify-content-center nfc-supported mt-2">
                <div class="boltcard-reset boltcard-details text-center">

                    <div class="d-flex justify-content-center">
                        <div class="input-group">
                            <a class="btn btn-outline-danger form-control" href="@Model.BoltcardKeysResetLink">
                                <div style="margin-top:3px">Reset Boltcard</div>
                            </a>
                            <button type="button" class="btn btn-outline-danger input-group-btn" id="show-wipe-qr">
                                <span class="fa fa-qrcode fa-2x" title="Show wipe QR"></span>
                            </button>
                        </div>
                    </div>
                    <div id="wipe-qr" class="d-none mt-2 cursor-pointer" data-clipboard-target="#qr-wipe-code-data-input">
                        <div class="d-flex">
                            <vc:qr-code data="@Model.WipeData" />
                        </div>

                        <div class="d-flex">
                            <div class="input-group input-group-sm mt-3">
                                <input type="text" class="form-control" readonly value="@Model.WipeData" id="qr-wipe-code-data-input">
                                <button type="button" class="btn btn-outline-secondary px-3" data-clipboard-target="#qr-wipe-code-data-input">
                                    <vc:icon symbol="copy" />
                                </button>
                            </div>
                        </div>
                    </div>
                    <p class="text-secondary mt-2">Requires installing the <a href="https://play.google.com/store/apps/details?id=com.lightningnfcapp&hl=en&gl=US">Bolt Card Creator app</a></p>


                </div>
            </div>
        }
    </div>
</div>

@if (Model.Transactions.Any())
{
    <div class="col col-12 col-lg-12 mb-4">
        <div class="bg-tile h-100 m-0 p-3 p-sm-5 rounded table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th class="date-col">Date</th>
                        <th class="amount-col">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var tx in Model.Transactions)
                    {
                        <tr>
                            <td class="date-col">@tx.Date.ToBrowserDate(ViewsRazor.DateDisplayFormat.Relative)</td>
                            <td class="amount-col">
                                <span data-sensitive class="text-@(tx.Positive ? "success" : "danger")">@DisplayFormatter.Currency(tx.Balance, Model.Currency, DisplayFormatter.CurrencyFormat.Code)</span>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
}