@model LightningWalletServices
@{
    ViewData.SetLayoutModel(new LayoutModel(nameof(ServerNavPages.Services), Model.WalletName)
        .SetCategory(WellKnownCategories.Server));
}

<div class="sticky-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a asp-action="Services" text-translate="true">Services</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page" text-translate="true">@ViewData["Title"]</li>
        </ol>
        <h2 text-translate="true">@ViewData["Title"]</h2>
    </nav>
</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 affect the performances of your server and might steal your funds.</span>
    </div>
}

@if (!ViewContext.ModelState.IsValid)
{
    <div asp-validation-summary="All"></div>
}

<h4 class="mb-3" text-translate="true">Full node connection</h4>
<p text-translate="true">This page exposes information to connect remotely to your full node via the RPC protocol.</p>

<h4 class="mb-3" text-translate="true">Compatible wallets</h4>
<div class="services-list">
    <a href="https://fullynoded.app/" target="_blank" class="service" rel="noreferrer noopener">
        <img src="~/img/fullynoded.png" width="100" height="100" asp-append-version="true" alt="Fully Noded" />
        <h6>Fully Noded</h6>
    </a>
    <a href="https://github.com/cryptoadvance/specter-desktop" target="_blank" class="service" rel="noreferrer noopener">
        <img src="~/img/specter.png" asp-append-version="true" alt="Specter Desktop" />
        <h6>Specter Desktop</h6>
    </a>
</div>

<h4 class="mt-4 mb-3" text-translate="true">QR Code connection</h4>
<p>@StringLocalizer["You can use QR Code to connect to your {0} from your mobile.", Model.WalletName]</p>

<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>
        <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a></p>
        <div id="detailsQR" class="collapse">
            <div class="form-group">
                <label class="form-label" text-translate="true">QR Code data</label>
                <input asp-for="ServiceLink" readonly class="form-control"/>
            </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>
    }
}