@inject BTCPayServer.HostedServices.NBXplorerDashboard dashboard
<!-- Modal -->
<div id="modalDialog" class="modal-dialog animated bounceInRight">

    <!-- 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>
                Some of your nodes are still synching...<br />
                BTCPay Server will not work correctly until it is over.
            </p>
            @foreach (var line in dashboard.GetAll())
            {
                <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 synched (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 synching... (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>
                    }
                }
            }
        </div>
    </div>

</div>

@*<link href="~/vendor/animatecss/animate.css" rel="stylesheet" />*@
<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>