<!doctype html>
<html lang="<%= lang %>">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= text.detailText.canonicalTx %></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.canonicalTx %></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>
      <section class="panel explorer-detail-hero">
        <div><p class="eyebrow"><%= d.canonicalTransaction %></p><h2><%= d.transaction %></h2><code class="hash-block"><%= transaction.hash %></code></div>
        <div class="detail-status-stack"><span class="badge <%= transaction.status === 1 ? 'badge-ok' : 'badge-warn' %>"><%= transaction.status === 1 ? 'CONFIRMED_QBFT' : (transaction.status === 0 ? 'REVERTED' : 'PENDING') %></span></div>
      </section>
      <section class="grid detail-grid">
        <article class="panel">
          <div class="panel-title"><h2><%= d.transaction %></h2><span><%= d.chainId %> <%= testnet.canonical.chainId %></span></div>
          <div class="stat-list compact">
            <div class="stat-row"><span><%= text.transferText.from %></span><code><%= transaction.from %></code></div>
            <div class="stat-row"><span><%= text.transferText.to %></span><code><%= transaction.to || '-' %></code></div>
            <div class="stat-row"><span><%= d.valueWei %></span><strong><%= transaction.value %></strong></div>
            <div class="stat-row"><span><%= d.nonce %></span><strong><%= transaction.nonce %></strong></div>
            <div class="stat-row"><span><%= d.gasLimit %></span><strong><%= transaction.gasLimit %></strong></div>
            <div class="stat-row"><span><%= d.gasUsed %></span><strong><%= transaction.gasUsed || '-' %></strong></div>
          </div>
        </article>
        <article class="panel">
          <div class="panel-title"><h2><%= d.canonicalInclusion %></h2><span>QBFT</span></div>
          <div class="stat-list compact">
            <div class="stat-row"><span><%= d.block %></span><a href="<%= urlWithLang('/explorer/block/' + encodeURIComponent(transaction.blockNumber)) %>"><strong>#<%= transaction.blockNumber %></strong></a></div>
            <div class="stat-row"><span><%= d.blockHash %></span><code><%= transaction.blockHash || '-' %></code></div>
            <div class="stat-row"><span><%= d.contract %></span><code><%= transaction.contractAddress || '-' %></code></div>
            <div class="stat-row"><span><%= d.input %></span><code><%= transaction.data %></code></div>
          </div>
        </article>
      </section>
    </main>
  </body>
</html>
