@inject BTCPayServerEnvironment env
@using BTCPayServer.Controllers
@using BTCPayServer.Components.QRCode
@using BTCPayServer.Services
@model BTCPayServer.Controllers.WalletReceiveViewModel
@{
    var walletId = Context.GetRouteValue("walletId").ToString();
    var returnUrl = Model.ReturnUrl ?? Url.Action(nameof(UIWalletsController.WalletTransactions), new { walletId });
    Layout = "_LayoutWizard";
    ViewData.SetActivePage(WalletsNavPages.Receive, $"Receive {Model.CryptoCode}", walletId);
}

@section PageHeadContent
{
    <link href="~/main/qrcode.css" rel="stylesheet" asp-append-version="true"/>
    <link href="~/vendor/tom-select/tom-select.bootstrap5.min.css" asp-append-version="true" rel="stylesheet">
    <script src="~/vendor/tom-select/tom-select.complete.min.js" asp-append-version="true"></script>
}

@section Navbar {
	<a href="@Url.EnsureLocal(returnUrl, Context.Request)" id="CancelWizard" class="cancel">
        <vc:icon symbol="close" />
    </a>
}

<header class="text-center">
    <h1 class="mb-4">@ViewData["Title"]</h1>
</header>

<form method="post" asp-action="WalletReceive">
    <input type="hidden" asp-for="ReturnUrl" />
    @if (string.IsNullOrEmpty(Model.Address))
    {
        <div class="d-grid gap-3 col-sm-10 col-md-8 col-lg-7 col-xxl-6 mx-auto">
            <button id="generateButton" class="btn btn-primary" type="submit" name="command" value="generate-new-address">Generate next available @Model.CryptoCode address</button>
            @if (env.CheatMode)
            {
                <button type="submit" name="command" value="fill-wallet" class="btn btn-info">Cheat Mode: Send transactions to this wallet</button>
            }
        </div>
    }
    else
    {
        <noscript>
            <div class="form-group">
                <input type="text" class="form-control " readonly="readonly" asp-for="Address" id="address"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" readonly="readonly" asp-for="PaymentLink" id="payment-link"/>
            </div>
            <div class="row mt-4">
                <div class="col-12 col-sm-6">
                    <button type="submit" name="command" value="generate-new-address" class="btn btn-primary w-100">Generate another address</button>
                </div>
                <div class="col-12 col-sm-6 mt-4 mt-sm-0">
                    <button type="submit" name="command" value="unreserve-current-address" class="btn btn-secondary w-100">Unreserve this address</button>
                </div>
            </div>
        </noscript>
        <div class="nav flex-wrap align-items-center justify-content-center gap-2 mb-4">
            <a class="btcpay-pill active" data-bs-toggle="tab" href="#address-tab">Address</a>
            <a class="btcpay-pill " data-bs-toggle="tab" href="#link-tab">Link</a>
        </div>
        <div class="only-for-js col-sm-10 col-xxl-8 mx-auto" id="app">
            <div class="tab-content text-center">
                <div class="tab-pane payment-box" id="link-tab" role="tabpanel">
                    <div class="qr-container" data-clipboard="@Model.PaymentLink">
                        <vc:qr-code data="@Model.PaymentLink"/>
                        <img src="@Model.CryptoImage" class="qr-icon" alt="@Model.CryptoCode"/>
                    </div>
                    <div class="input-group mt-3">
                        <div class="form-floating">
                            <input id="PaymentLink" class="form-control-plaintext" readonly="readonly" value="@Model.PaymentLink">
                            <label for="PaymentLink">Payment Link</label>
                        </div>
                        <button type="button" class="btn btn-link" data-clipboard-target="#PaymentLink">
                            <vc:icon symbol="copy" />
                        </button>
                    </div>
                </div>
                <div class="tab-pane payment-box show active" id="address-tab" role="tabpanel">
                    <div class="qr-container" data-clipboard="@Model.Address">
                        <vc:qr-code data="@Model.Address"/>
                        <img src="@Model.CryptoImage" class="qr-icon" alt="@Model.CryptoCode"/>
                    </div>
                    <div class="input-group mt-3">
                        <div class="form-floating">
                            <input id="Address" class="form-control-plaintext" readonly="readonly" value="@Model.Address">
                            <label for="Address">Address</label>
                        </div>
                        <button type="button" class="btn btn-link" data-clipboard-target="#Address">
                            <vc:icon symbol="copy" />
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="payment-box">
            <div class="my-3">
                <div class="input-group">
                    <div class="form-floating">
                        <vc:label-manager selected-labels="Model.SelectedLabels" wallet-object-id="new WalletObjectId(WalletId.Parse(walletId), WalletObjectData.Types.Address, Model.Address)" />
                        <label>Labels</label>
                    </div>
                </div>
            </div>
    
            <div class="d-grid gap-3 mt-5">
                <button type="submit" name="command" value="generate-new-address" class="btn btn-primary w-100">Generate another address</button>
                <button type="submit" name="command" value="unreserve-current-address" class="btn btn-secondary w-100">Unreserve this address</button>
            </div>
        </div>
    }
</form>