@model LightningNodeViewModel
@{
    Layout = "_LayoutWalletSetup.cshtml";
    ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Connect to a Lightning node", Context.GetStoreData().StoreName);
}

@section Navbar {
    <a asp-controller="Stores" asp-action="UpdateStore" asp-route-storeId="@Model.StoreId">
        <vc:icon symbol="back" />
    </a>
}

<header class="text-center">
    <h1>@ViewData["Title"]</h1>
    <div class="d-flex mt-4 mb-5">
        <vc:icon symbol="warning" />
        <p class="text-secondary text-left mb-0">
            Please understand that the Lightning Network is still under active development and considered experimental.
            Before you proceed, take time to familiarize yourself with the risks.
            <a href="https://docs.btcpayserver.org/LightningNetwork/" target="_blank">More information</a>
        </p>
    </div>
</header>

<style>
    header .icon-warning {
        flex: 0 0 24px;
        height: 24px;
        align-self: center;
        margin-right: 2rem;
        color: var(--btcpay-color-warning);
    }
    #save { min-width: 7rem; }
    #InternalSetup, #CustomSetup, #LightningNodeType-Internal, #LightningNodeType-Custom { display: none; }
    #LightningNodeType-Internal:checked + * + * + * + #InternalSetup,
    #LightningNodeType-Custom:checked + * + *+ #CustomSetup { display: block; }
    #LightningNodeType-Internal:checked + label, #LightningNodeType-Custom:checked + label {
        color: var(--btcpay-color-white);
        background: var(--btcpay-color-primary);
    }
    label[for="LightningNodeType-Internal"], label[for="LightningNodeType-Custom"] {
        display: inline-block;
        padding: .75rem 2rem;
        color: var(--btcpay-color-primary);
        font-weight:  var(--btcpay-font-weight-semibold);
        border-radius: 1.5rem;
        cursor: pointer;
    }
    #LightningNodeType-Internal[disabled]:checked + label[for="LightningNodeType-Internal"] {
        background: var(--btcpay-color-secondary);
        color: var(--btcpay-color-white);
        opacity: .5;
    }
    #LightningNodeType-Internal[disabled] + label[for="LightningNodeType-Internal"] {
        color: var(--btcpay-color-secondary);
        opacity: .5;
    }
    #CustomSetup ul {
        list-style: none;
        padding-left: 0;
    }
    #CustomSetup ul li code, #CustomSetup ul li pre {
        color: var(--btcpay-code-color);
    }
    #CustomSetup ul li > code, #CustomSetup ul pre {
        display: block;
        color: var(--btcpay-code-color);
        background: var(--btcpay-code-bg);
        margin: .25rem 0;
        padding: .75rem 1rem;
        border-radius: .25rem;
    }
</style>

<form method="post" class="mt-n2 text-center">
    <input asp-for="LightningNodeType" value="@LightningNodeType.Internal" type="radio" id="LightningNodeType-@LightningNodeType.Internal" disabled="@(!Model.CanUseInternalNode)">
    <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Internal}")">Use internal node</label>
    <input asp-for="LightningNodeType" value="@LightningNodeType.Custom" type="radio" id="LightningNodeType-@LightningNodeType.Custom">
    <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Use custom node</label>
    <div id="InternalSetup" class="text-left">
        @if (Model.CanUseInternalNode)
        {
            <p class="my-4">That's it, no need to configure anything else.</p>
        }
        else
        {
            <p class="my-4">Your instance administrator has disabled the use of the Internal node for non-admin users.</p>
        }
    </div>
    <div id="CustomSetup" class="text-left">
        <label asp-for="ConnectionString" class="mt-4">Connection configuration for your custom Lightning node:</label>
        <div class="d-sm-flex">
            <input asp-for="ConnectionString" class="form-control mb-2 mr-2" placeholder="type=…;server=…;" value="@(Model.LightningNodeType == LightningNodeType.Internal ? "" : Model.ConnectionString)"/>
            <button id="test" name="command" type="submit" value="test" class="btn btn-secondary text-nowrap mb-2">Test connection</button>
        </div>
        <span asp-validation-for="ConnectionString" class="text-danger"></span>
        <p class="mt-4 mb-2">
            BTCPay Server currently supports:
            <span class="text-secondary">(click to show examples)</span>
        </p>
        <ul>
            <li>
                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#c-lightning-notes" role="button" aria-expanded="false" aria-controls="c-lightning-notes">c-lightning</a>
                via TCP or unix domain socket connection
                <div id="c-lightning-notes" class="collapse">
                    <ul class="py-2">
                        <li>
                            <code><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</code>
                        </li>
                        <li>
                            <code><b>type=</b>clightning;<b>server=</b>tcp://1.1.1.1:27743/</code>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#charge-notes" role="button" aria-expanded="false" aria-controls="charge-notes">Lightning Charge</a>
                via HTTPS
                <div id="charge-notes" class="collapse">
                    <ul class="py-2">
                        <li>
                            <code><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</code>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#eclair-notes" role="button" aria-expanded="false" aria-controls="eclair-notes">Eclair</a>
                via HTTPS
                <div id="eclair-notes" class="collapse">
                    <ul class="py-2">
                        <li>
                            <code><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</code>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">LND</a>
                via the REST proxy
                <div id="lnd-notes" class="collapse">
                    <ul class="py-2">
                        <li>
                            <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</code>
                        </li>
                        <li>
                            <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...;<b>certthumbprint=</b>abef263adfe...</code>
                        </li>
                    </ul>
                    <p class="mt-2">
                        For the macaroon options you need to provide the <code>admin.macaroon</code>.<br/>
                        The path to the LND data directory may vary, the following examples assume <code>/root/.lnd</code>.
                    </p>
                    <p class="mb-2">The <code>macaroon</code> parameter expects the HEX value, it can be obtained using this command:</p>
                    <pre class="mb-4">xxd -plain /root/.lnd/data/chain/bitcoin/mainnet/admin.macaroon | tr -d '\n'</pre>
                    <p class="mb-2">
                        You can omit <code>certthumbprint</code> if the certificate is trusted by your machine.<br/>
                        The <code>certthumbprint</code> can be obtained using this command:
                    </p>
                    <pre class="mb-4">openssl x509 -noout -fingerprint -sha256 -in /root/.lnd/tls.cert | sed -e 's/.*=//;s/://g'</pre>
                    <p class="mb-0">If your LND REST server is using HTTP or HTTPS with an untrusted certificate, you can set <code>allowinsecure=true</code> as a fallback.</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="text-left mt-4">
        <button id="save" name="command" type="submit" value="save" class="btn btn-primary mr-2">Save</button>
    </div>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}