@model LightningWalletServices
@{
    ViewData.SetLayoutModel(new LayoutModel(nameof(ServerNavPages.Services), Model.WalletName)
        .SetCategory(WellKnownCategories.Server));
    ViewData.SetBreadcrumbs([new(StringLocalizer["Services"], Action: nameof(BTCPayServer.Controllers.UIServerController.Services))]);
}

<div class="sticky-header">
    <vc:title-header />
</div>
<partial name="_StatusMessage" />

@if (Model.ShowQR)
{
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="@StringLocalizer["Close"]">
            <vc:icon symbol="close" />
        </button>
        <span text-translate="true">CONFIDENTIAL: This QR Code is confidential, close this window as soon as you don't need it anymore.</span>
        <span text-translate="true">A malicious actor with access to this QR Code could steal the funds on your lightning wallet.</span>
    </div>
}

<div class="row">
    <div class="col-md-8">
        @if (!ViewContext.ModelState.IsValid)
        {
            <div asp-validation-summary="All"></div>
        }
        <div class="form-group">
            <h5 text-translate="true">Browser connection</h5>
            <p>
                <span>You can go to @Model.WalletName from your browser by <a href="@Model.ServiceLink" rel="noreferrer noopener">clicking here</a><br/></span>
            </p>
        </div>

        <div class="form-group">
            <h5 text-translate="true">QR Code connection</h5>
            <p>@StringLocalizer["You can use QR Code to connect to your {0} from your mobile.", Model.WalletName]</p>
        </div>
        <div class="form-group">
            @if (!Model.ShowQR)
            {
                <div class="form-group">
                    <form method="get">
                        <input type="hidden" asp-for="ShowQR" value="true"/>
                        <button type="submit" class="btn btn-primary" text-translate="true">Show Confidential QR Code</button>
                    </form>
                </div>
            }
            else
            {
                <div class="form-group">
                    <div id="qrCode"></div>
                    <div id="qrCodeData" data-url="@Model.ServiceLink"></div>
                </div>
            }
        </div>
    </div>
</div>

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />

    @if (Model.ShowQR)
    {
        <script src="~/js/qrcode.js" asp-append-version="true"></script>
        <script>
            new QRCode(document.getElementById("qrCode"), {
                text: @Safe.Json(Model.ServiceLink),
                width: 200,
                height: 200,
                useSVG: true,
                correctLevel : QRCode.CorrectLevel.M
            });
        </script>
    }
}