@addTagHelper *, BundlerMinifier.TagHelpers
@model BTCPayServer.Controllers.WalletReceiveViewModel
@{
    var walletId = Context.GetRouteValue("walletId").ToString();
    Layout = "../Shared/_NavLayout.cshtml";
    ViewData.SetActivePage(WalletsNavPages.Receive, $"Receive {Model.CryptoCode}", walletId);
}

@section PageHeadContent
{
    <link href="~/main/qrcode.css" rel="stylesheet" asp-append-version="true"/>
}

<div class="row no-gutters">
    <div class="col-xl-8 col-xxl-constrain">
        <form method="post" asp-action="WalletReceive">
            @if (string.IsNullOrEmpty(Model.Address))
            {
                <button id="generateButton" class="btn btn-primary" type="submit" name="command" value="generate-new-address">Generate next available @Model.CryptoCode address</button>
            }
            else
            {
                <h3 class="mb-4">@Model.CryptoCode&nbsp;Address</h3>
                <noscript>
                    <div class="m-sm-0 p-sm-0">
                        <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>
                    </div>
                </noscript>
                <div class="only-for-js m-sm-0 p-sm-0" id="app">
                    <div class="mb-5">
                        <div class="tab-content">
                            <div class="tab-pane" id="link-tab" role="tabpanel">
                                <div class="qr-container mb-3">
                                    <img src="@Model.CryptoImage" class="qr-icon" alt="@Model.CryptoCode"/>
                                    <vc:qr-code data="@Model.PaymentLink"/>
                                </div>
                                <div class="form-group">
                                    <div class="input-group" data-clipboard="@Model.PaymentLink">
                                        <input type="text" class="form-control" style="cursor:copy" readonly="readonly" value="@Model.PaymentLink" id="payment-link"/>
                                        <button type="button" class="btn btn-outline-secondary p-2" style="width:7em;" data-clipboard-confirm>
                                            <vc:icon symbol="copy"/>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane show active" id="address-tab" role="tabpanel">
                                <div class="qr-container mb-3">
                                    <img src="@Model.CryptoImage" class="qr-icon" alt="@Model.CryptoCode"/>
                                    <vc:qr-code data="@Model.Address"/>
                                </div>
                                <div class="form-group">
                                    <div class="input-group" data-clipboard="@Model.Address">
                                        <input type="text" class="form-control" style="cursor:copy" readonly="readonly" value="@Model.Address" id="address"/>
                                        <button type="button" class="input-group-text btn btn-outline-secondary p-2" style="width:7em;" data-clipboard-confirm>
                                            <vc:icon symbol="copy"/>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nav">
                            <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>
                    
                    <div class="row">
                        <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>
                </div>
            }
        </form>
    </div>
</div>