@using BTCPayServer.Lightning
@model BTCPayServer.Components.StoreLightningBalance.StoreLightningBalanceViewModel

<div id="StoreLightningBalance-@Model.Store.Id" class="widget store-lightning-balance">
    <header class="mb-3">
        <h6>Lightning Balance</h6>
        <a
            asp-controller="UIPublicLightningNodeInfo"
            asp-action="ShowLightningNodeInfo"app-top-items
            asp-route-cryptoCode="@Model.CryptoCode"
            asp-route-storeId="@Model.Store.Id"
            target="_blank"
            id="PublicNodeInfo">
            Node Info
        </a>
    </header>
    
    @if (Model.Balance == null)
    {
        <p>@Model.ProblemDescription</p>
    }
    else
    {
        <div class="balances d-flex flex-wrap">
            <div class="balance me-3">
                <h3 class="d-inline-block me-1">@Model.TotalOffchain</h3>
                <span class="text-secondary fw-semibold text-nowrap">@Model.CryptoCode in channels</span>
                @if (Model.TotalOffchain != LightMoney.Zero && Model.Balance.OffchainBalance != null)
                {
                    <div class="balance-details collapse" id="balanceDetailsOffchain">
                        @if (Model.Balance.OffchainBalance.Opening != LightMoney.Zero)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold">@Model.Balance.OffchainBalance.Opening</span>
                                <span class="text-secondary text-nowrap">@Model.CryptoCode opening channels</span>
                            </div>
                        }
                        <div class="mt-2">
                            <span class="fw-semibold">@Model.Balance.OffchainBalance.Local</span>
                            <span class="text-secondary text-nowrap">@Model.CryptoCode local balance</span>
                        </div>
                        <div class="mt-2">
                            <span class="fw-semibold">@Model.Balance.OffchainBalance.Remote</span>
                            <span class="text-secondary text-nowrap">@Model.CryptoCode remote balance</span>
                        </div>
                        @if (Model.Balance.OffchainBalance.Closing != LightMoney.Zero)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold">@Model.Balance.OffchainBalance.Closing</span>
                                <span class="text-secondary text-nowrap">@Model.CryptoCode closing channels</span>
                            </div>
                        }
                    </div>
                }
            </div>
            <div class="balance">
                <h3 class="d-inline-block me-1">@Model.TotalOnchain</h3>
                <span class="text-secondary fw-semibold text-nowrap">@Model.CryptoCode on-chain</span>
                @if (Model.TotalOnchain != LightMoney.Zero && Model.Balance.OnchainBalance != null)
                {
                    <div class="balance-details collapse" id="balanceDetailsOnchain">
                        @if (Model.Balance.OnchainBalance.Confirmed != LightMoney.Zero)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold">@Model.Balance.OnchainBalance.Confirmed</span>
                                <span class="text-secondary text-nowrap">@Model.CryptoCode confirmed</span>
                            </div>
                        }
                        @if (Model.Balance.OnchainBalance.Unconfirmed != LightMoney.Zero)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold">@Model.Balance.OnchainBalance.Unconfirmed</span>
                                <span class="text-secondary text-nowrap">@Model.CryptoCode unconfirmed</span>
                            </div>
                        }
                        @if (Model.Balance.OnchainBalance.Reserved != LightMoney.Zero)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold">@Model.Balance.OnchainBalance.Reserved</span>
                                <span class="text-secondary text-nowrap">@Model.CryptoCode reserved</span>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
        @if (Model.Balance.OffchainBalance != null && Model.Balance.OnchainBalance != null && (Model.TotalOffchain != LightMoney.Zero || Model.TotalOnchain != LightMoney.Zero))
        {
            <a class="d-inline-block mt-3" role="button" data-bs-toggle="collapse" data-bs-target=".balance-details" aria-expanded="false" aria-controls="balanceDetailsOffchain balanceDetailsOnchain">Show details</a>
        }
    }
</div>