{{#if newNodeVersionAvailable}}
<div class="alert alert-dismissible alert-warning">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Heads up!</strong> A new Nano Node version
  <strong>{{newNodeVersionAvailable}}</strong> is available.
  <a class="alert-link" href="https://github.com/nanocurrency/nano-node/releases/latest" target="_blank" rel="noopener">Download it here!</a>
</div>
{{/if}}

{{#if nanoNodeAccount}}
<div class="row">
  <div class="col">
    <h3>Node Account</h3>
    <ul class="list-group mb-4">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span class="mr-3 pl-2">Address</span>
        <a href="{{nanoNodeAccountUrl}}" target="_blank" rel="noopener" class="truncate">{{nanoNodeAccount}}</a>
        <button id="copyAccount" class="btn btn-sm btn-link btn-clipboard" data-clipboard-text="{{nanoNodeAccount}}" title="Copy">
          <i class="fas fa-clipboard fa-lg"></i>
        </button>
      </li>
    </ul>
  </div>
</div>
{{/if}}

<div class="row">
  <div class="col-lg-3">
    <h3>Node</h3>
    <div class="card mb-4">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <span class="float-left-truncate">Version</span>
          <span class="float-right-truncate">{{version}}</span>
        {{#if store_vendor}} <!--Node V21-->
        <li class="list-group-item">
          <span class="float-left-truncate">Database</span>
          <span class="float-right-truncate">{{store_vendor}}</span>
        </li>
        {{/if}}
        </li>
        <li class="list-group-item">
          <span class="float-left-truncate">Node Uptime</span>
          <span class="float-right-truncate">{{formatSeconds nodeUptimeStartup}}</span>
        </li>
        <li class="list-group-item">
          <span class="float-left-truncate">Peers</span>
          <span class="float-right-truncate">{{formatNumber numPeers}}</span>
        </li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <h3>Blocks</h3>
    <div class="card mb-4">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <span class="float-left-truncate">Current Block</span>
          <span class="float-right-truncate">{{formatNumber currentBlock}}</span>
        </li>
        <li class="list-group-item">
          <span class="float-left-truncate">Cemented Blocks</span>
          <span class="float-right-truncate">{{formatNumber cementedBlocks}}</span>
        </li>
        <li class="list-group-item">
          <span class="float-left-truncate">Unchecked Blocks</span>
          <span class="float-right-truncate">{{formatNumber uncheckedBlocks}}</span>
        </li>
        <li class="list-group-item">         
          <span class="float-left-truncate">Sync Status</span>
          <span class="float-right-truncate">
            {{#if blockSync}}
              {{formatNumber blockSync}} %
            {{else}} 
              N/A 
            {{/if}}
            </span>
        </li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <h3>Node Account</h3>
    <ul class="list-group mb-4">
      <li class="list-group-item">
        <span class="float-left-truncate">Balance</span>
        <span class="float-right-truncate">{{formatNano accBalanceMnano}} {{currencySymbol}}</span>
      </li>
      <li class="list-group-item">
        <span class="float-left-truncate">Pending</span>
        <span class="float-right-truncate">{{formatNano accPendingMnano 6}} {{currencySymbol}}</span>
      </li>
      <li class="list-group-item">
        <span class="float-left-truncate">Representative</span>
        <span class="float-right-truncate">
           {{#if repAccount}}
           <a href="{{repAccountUrl}}" target="_blank" rel="noopener">{{repAccount}}</a>
           {{else}} Account not opened {{/if}}
        </span>
      </li>
      <li class="list-group-item">
        <span class="float-left-truncate">Voting Weight</span>
        <span class="float-right-truncate">{{formatNano votingWeight 6}} {{currencySymbol}}</span>       
      </li>
    </ul>
  </div>

  <div class="col-lg-3">
    <h3>System</h3>
    <ul class="list-group mb-4">
      <li class="list-group-item">
        <span class="float-left-truncate">Host</span>
        <span class="float-right-truncate">{{nanoNodeName}}</span>        
      </li>
      <li class="list-group-item">
        <span class="float-left-truncate">Location</span>
        <span class="float-right-truncate">
          {{#if nodeLocation}}
            {{nodeLocation}}
          {{else}}
            N/A
          {{/if}}
        </span>
      </li>
      <li class="list-group-item">
        <span class="float-left-truncate">Load</span>
        <span class="float-right-truncate">{{formatNumber systemLoad}}</span>
      </li>
      <li class="list-group-item">
        <span class="float-left-truncate">Memory Used</span>
        <span class="float-right-truncate">{{formatNumber usedMem}} / {{formatNumber totalMem}} MB</span>
      </li>
    </ul>
  </div>
</div>