@addTagHelper *, BundlerMinifier.TagHelpers
@inject BTCPayServer.HostedServices.CssThemeManager themeManager

@model BTCPayServer.Controllers.ShowLightningNodeInfoViewModel
@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <title>@Model.CryptoCode LN Node Info</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" href="~/img/icons/icon-512x512.png">
    <link rel="apple-touch-startup-image" href="~/img/splash.png">

    <link rel="manifest" href="~/manifest.json">

    <link href="@this.Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
    <link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

    <bundle name="wwwroot/bundles/lightning-node-info-bundle.min.js" />
    <script type="text/javascript">
        var srvModel = @Safe.Json(Model);


        window.onload = function() {
            Vue.use(Toasted);
            var app = new Vue({
                el: '#app',
                components: {
                    qrcode: VueQrcode
                },
                data: {
                    srvModel: srvModel
                },
                mounted: function() {

                    this.$nextTick(function() {
                        var copyInput = new Clipboard('.copy');

                        copyInput.on("success",
                            function(e) {
                                Vue.toasted.show('Copied',
                                    {
                                        iconPack: "fontawesome",
                                        icon: "copy",
                                        duration: 5000
                                    });
                            });
                    });
                }
            });


        }
    </script>
    <style>
        .qr-icon {
            height: 64px;
            width: 64px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .qr-container {
            position: relative;
            text-align: center;
        }

            .qr-container svg {
                width: 256px;
                height: 256px;
            }

        .copy {
            cursor: copy;
        }
    </style>
</head>
<body>
    <noscript>
        <div class="container">
            <div class="row " style="height: 100vh">
                <div class="col-md-8 col-sm-12 col-lg-6 mx-auto my-auto ">
                    <div class="col-md-8 col-sm-12 col-lg-6 mx-auto my-auto ">
                        <div class="card border-0">
                            <div class="row"></div>
                            <h1 class="card-title text-center">
                                @Model.CryptoCode Lightning Node - @(Model.Available ? "Online" : "Unavailable")
                                <small class="@(Model.Available ? "text-success" : "text-danger")">
                                    <span class="fa fa-circle "></span>
                                </small>
                            </h1>
                            @if (Model.Available)
                            {
                                <div class="card-body m-sm-0 p-sm-0">
                                    <div class="input-group">
                                        <input type="text" class="form-control " readonly="readonly" asp-for="NodeInfo" id="peer-info" />
                                        <div class="input-group-append">
                                            <span class="input-group-text fa fa-copy"> </span>
                                        </div>
                                    </div>
                                </div>
                            }

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </noscript>
    <div id="app" class="container">
        <div class="row " style="height: 100vh">
            <div class="col-md-8 col-sm-12 col-lg-6 mx-auto my-auto ">
                <div class="card border-0">
                    <div class="row"></div>
                    <h1 class="card-title text-center">
                        {{srvModel.cryptoCode}} Lightning Node
                        - {{srvModel.available? "Online" : "Unavailable"}}
                        <small v-bind:class="{ 'text-success': srvModel.available, 'text-danger': !srvModel.available }">
                            <span class="fa fa-circle "></span>
                        </small>
                    </h1>
                    <div class="card-body m-sm-0 p-sm-0" v-if="srvModel.available">
                        <div class="qr-container mb-2">
                            <img v-bind:src="srvModel.cryptoImage" class="qr-icon" />
                            <qrcode v-bind:value="srvModel.nodeInfo" :options="{ width: 256, margin: 0, color: {dark:'#000', light:'#fff'} }" tag="svg">
                            </qrcode>
                        </div>
                        <div class="input-group copy" data-clipboard-target="#vue-peer-info">
                            <input type="text" class=" form-control " readonly="readonly" :value="srvModel.nodeInfo" id="vue-peer-info" />
                            <div class="input-group-append">
                                <span class="input-group-text fa fa-copy"> </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
