@model LightningWalletServices
@{
    ViewData.SetActivePageAndTitle(ServerNavPages.Services);
}


<h4>@Model.WalletName</h4>
<partial name="_StatusMessage" />

@if (Model.ShowQR)
{
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div>
            <span><b>CONFIDENTIAL:</b> This QR Code is confidential, close this window as soon as you don't need it anymore.<br /></span>
            <span>A malicious actor with access to this QR Code can <b>affect the performances of your server</b> and <b>might steal your funds</b>.</span>
        </div>
    </div>
}

<div class="row">
    <div class="col-md-6">
        <div asp-validation-summary="All" class="text-danger"></div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="form-group">
            <h5>Full node connection</h5>
            <p>
                <span>This page exposes information to connect remotely to your full node via the RPC protocol.</span>
            </p>
        </div>
        <div class="form-group">
            <h5>Compatible wallets</h5>
        </div>
        <div class="row">
            <div class="col-lg-3 ml-auto text-center">
                <a href="https://apps.apple.com/us/app/fully-noded/id1436425586" target="_blank">
                    <img src="~/img/fullynoded.png" height="100" asp-append-version="true" />
                </a>
                <p><a href="https://apps.apple.com/us/app/fully-noded/id1436425586" target="_blank">Fully Noded</a></p>
            </div>
            <div class="col-lg-3 mr-auto text-center">
                <a href="https://github.com/cryptoadvance/specter-desktop" target="_blank">
                    <img src="~/img/Specter.png" height="100" asp-append-version="true" />
                </a>
                <p><a href="https://github.com/cryptoadvance/specter-desktop" target="_blank">Specter</a></p>
            </div>
            <div class="col-lg-3 mr-auto text-center">

            </div>
            <div class="col-lg-3 mr-auto text-center">

            </div>
        </div>
        <div class="form-group">
            <h5>QR Code connection</h5>
            <p>
                <span>You can use QR Code to connect to @Model.WalletName with compatible wallets.<br /></span>
            </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">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-toggle="collapse">here</a></p>
                <div id="detailsQR" class="collapse">
                    <div class="form-group">
                        <label>QR Code data</label>
                        <input asp-for="ServiceLink" readonly class="form-control" />
                    </div>
                </div>
            }
        </div>
    </div>
</div>

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")

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