<!doctype html>
<html lang="<%= lang %>">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= text.detailText.canonicalBlock %></title>
    <link rel="stylesheet" href="/css/admin.css">
  </head>
  <body>
    <main class="shell explorer-shell explorer-wide">
      <% const d = text.detailText; %>
      <header class="topbar explorer-topbar">
        <div><p class="eyebrow"><%= text.networkLabel %></p><h1><%= d.canonicalBlock %></h1></div>
        <div class="top-actions"><a class="nav-button subtle" href="<%= urlWithLang('/explorer') %>">Explorer</a><a class="nav-button subtle" href="/status"><%= d.networkStatus %></a></div>
      </header>
      <% if (!block) { %>
        <section class="panel"><h2><%= d.canonicalBlockNotFound %></h2></section>
      <% } else { %>
        <section class="panel explorer-detail-hero">
          <div>
            <p class="eyebrow"><%= d.finalizedBlock %></p>
            <h2><%= d.block %> #<%= block.number %></h2>
            <code class="hash-block"><%= block.hash %></code>
          </div>
          <div class="detail-status-stack"><span class="badge badge-ok">FINALIZED_QBFT</span></div>
        </section>
        <section class="grid metrics explorer-metrics">
          <article><strong><%= block.transactionCount %></strong><span><%= d.transactions %></span></article>
          <article><strong><%= block.gasUsed %></strong><span><%= d.gasUsed %></span></article>
          <article><strong><%= block.gasLimit %></strong><span><%= d.gasLimit %></span></article>
          <article><strong><%= testnet.canonical.validatorCount || 0 %></strong><span><%= d.qbftValidators %></span></article>
        </section>
        <section class="panel">
          <div class="panel-title"><h2><%= d.canonicalBlockIdentity %></h2><span><%= d.chainId %> <%= testnet.canonical.chainId %></span></div>
          <div class="stat-list compact">
            <div class="stat-row"><span><%= text.transferText.hash %></span><code><%= block.hash %></code></div>
            <div class="stat-row"><span><%= d.parentHash %></span><code><%= block.parentHash %></code></div>
            <div class="stat-row"><span><%= d.proposer %></span><code><%= block.miner || '-' %></code></div>
            <div class="stat-row"><span><%= d.created %></span><strong><%= block.createdAt %></strong></div>
            <div class="stat-row"><span><%= d.baseFee %></span><strong><%= block.baseFeePerGas %></strong></div>
          </div>
        </section>
        <section class="panel">
          <div class="panel-title"><h2><%= d.transactions %></h2><span><%= block.transactionCount %></span></div>
          <% if (!block.transactions.length) { %><p class="empty"><%= d.noBlockTx %></p><% } %>
          <% block.transactions.forEach(function(hash) { %>
            <div class="item explorer-item"><a href="<%= urlWithLang('/explorer/tx/' + encodeURIComponent(hash)) %>"><code><%= hash %></code></a></div>
          <% }) %>
        </section>
      <% } %>
    </main>
  </body>
</html>
