@inject BTCPayServer.HostedServices.NBXplorerDashboard dashboard

@if (!dashboard.IsFullySynched())
{
    <!-- Modal -->
    <div id="modalDialog" class="modal-dialog animated bounceInRight"
         style="z-index:1000">
        @* Z-Index less then other bootstrap modals (1050) *@

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Your nodes are synching...</h4>
                <button type="button" class="close" onclick="dismissSyncModal()">&times;</button>
            </div>
            <div class="modal-body">
                <p>
                    Your node is synching the entire blockchain and validating the consensus rules...
                </p>
                @foreach (var line in dashboard.GetAll().Where(summary => summary.Network.ShowSyncSummary))
                {
                    <h4>@line.Network.CryptoCode</h4>
                    @if (line.Status == null)
                    {
                        <ul>
                            <li>The node is offline</li>
                            @if (line.Error != null)
                            {
                                <li>Last error: @line.Error</li>
                            }
                        </ul>
                    }
                    else
                    {
                        <ul>
                            <li>NBXplorer headers height: @line.Status.ChainHeight</li>
                            @if (line.Status.BitcoinStatus == null)
                            {
                                if (line.State == BTCPayServer.HostedServices.NBXplorerState.Synching)
                                {
                                    <li>The node is starting...</li>
                                }
                                else
                                {
                                    <li>The node is offline</li>
                                    @if (line.Error != null)
                                    {
                                        <li>Last error: @line.Error</li>
                                    }
                                }
                            }
                            else if (line.Status.BitcoinStatus.IsSynched)
                            {
                                <li>The node is synchronized (Height: @line.Status.BitcoinStatus.Headers)</li>
                                @if (line.Status.BitcoinStatus.IsSynched &&
                               line.Status.SyncHeight.HasValue &&
                               line.Status.SyncHeight.Value < line.Status.BitcoinStatus.Headers)
                                {
                                    <li>NBXplorer is synchronizing... (Height: @line.Status.SyncHeight.Value)</li>
                                }
                            }
                            else
                            {
                                <li>Node headers height: @line.Status.BitcoinStatus.Headers</li>
                                <li>Validated blocks: @line.Status.BitcoinStatus.Blocks</li>
                            }
                        </ul>
                        @if (!line.Status.IsFullySynched && line.Status.BitcoinStatus != null)
                        {
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))"
                                     aria-valuemin="0" aria-valuemax="100" style="width:@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))%">
                                    @((int)(line.Status.BitcoinStatus.VerificationProgress * 100))%
                                </div>
                            </div>
                        }
                    }
                }
                <p>
                    <a href="https://www.youtube.com/watch?v=OrYDehC-8TU" target="_blank">Watch this video</a> to understand the importance of blockchain synchronization.
                </p>

                <p>If you really don't want to synch and you are familiar with the command line, check <a href="https://github.com/btcpayserver/btcpayserver-docker/blob/master/contrib/FastSync/README.md" target="_blank">FastSync</a>.</p>
            </div>

        </div>

    </div>

    @*<link href="~/vendor/animatecss/animate.css" rel="stylesheet" asp-append-version="true" />*@
    <script type="text/javascript">
        function dismissSyncModal() {
            $("#modalDialog").addClass('animated bounceOutRight')
        }
    </script>

    <style type="text/css">
        #modalDialog {
            position: fixed;
            bottom: 20px;
            right: 20px;
            margin: 0px;
        }
    </style>

}