@model Ticker
@{
    ViewBag.Title = "Online Stratis ($STRAT) price ticker";
}
<div class="shadow-inset"></div>
<section class="welcome-area pb-4" id="welcome-1">
    <div class="header-token">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 align-self-center text-center">

                    @if (ViewBag.Features.Ticker)
                    {
                        <h1 class="m-0">The <strong>$STRAT</strong> price in real time.</h1>
                        <h1 class="align-middle">
                            <div class="d-lg-inline-block d-md-block align-middle">
                                <span class="click-edit" spellcheck="false">1</span> STRAT <span class="d-none d-lg-inline-block">=</span>
                            </div>
                            <span class="align-middle display-1 font-weight-bold" id="amount">@(Model.DisplayPrice.ToString("C2"))</span>
                            <span id="lastchange" class="d-block d-lg-inline-block change-@(Model.Last24Change > 0 ? "success":"danger") font-weight-bold"><sup> <span class="d-none d-lg-inline-block">@((Model.Last24Change > 0 ? "+" : ""))</span> <span class="inner">@(Model.Last24Change.ToString("P2"))</span></sup></span>
                        </h1>
                    }

                    <a asp-controller="BlockExplorer" asp-action="Index" class="btn-secondary-box"><i class="fa fa-cube"></i> Go to Block Explorer</a>
                </div>
            </div>
        </div>
    </div>
</section>
@section Scripts
{
    <script src="~/lib/@@aspnet/signalr/dist/browser/signalr.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var stratisPrice = @Model.DisplayPrice.ToString("N", new CultureInfo("en-US"));
            var stratisAmount = 1;
            function UpdateTicker() {
                NProgress.start();
                $.getJSON("/api/price?notApi=true&amount=" + stratisAmount, function(e) {
                    $("#amount").text(e.usdPrice);
                    $("#lastchange").find(".inner").text(e.last24Change);
                    NProgress.done(); 
                });
            }
            var signalr = new signalR.HubConnectionBuilder().withUrl("/update", { transport: signalR.HttpTransportType.LongPolling }).build();
            signalr.on("UpdateTicker", function (message) {
                UpdateTicker();
            });
            signalr.start();

            $(".click-edit").bind("keypress",function(e) {
                if (e.keyCode == 13) {
                    stratisAmount = $(this).text();
                    UpdateTicker();
                }
            }).click(function() {
                $(this).prop('contenteditable', true).focus().select();
            }).on("blur", function() {
                if ($.isNumeric($(this).text()) && parseFloat($(this).text()) > 1) {
                    stratisAmount = $(this).text();
                    UpdateTicker();
                } else {
                    $(this).text("1");
                    //$(this).text($(this).text());
                }
                $div.prop('contenteditable', false);
            });
        })
    </script>
}