<!doctype html>
<html lang="<%= lang %>">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= text.detailText.proofDetail %> - <%= service.name %></title>
    <link rel="stylesheet" href="/css/admin.css">
  </head>
  <body>
    <main class="shell explorer-shell">
      <% const d = text.detailText; %>
      <header class="topbar explorer-topbar">
        <div>
          <p class="eyebrow"><%= service.mode %></p>
          <h1><%= d.proofDetail %></h1>
        </div>
        <div class="top-actions">
          <a class="nav-button subtle" href="https://aisfor.kr/chain-wallet?next=/wallet/evm">EVM Wallet</a>
          <a class="nav-button subtle" href="<%= urlWithLang('/explorer') %>">Explorer</a>
          <a class="nav-button subtle" href="<%= urlWithLang('/admin') %>"><%= text.admin %></a>
        </div>
      </header>

      <% if (!proof) { %>
        <section class="panel"><h2><%= d.proofNotFound %></h2><p class="empty"><%= d.proofNotFoundDesc %></p></section>
      <% } else { %>
        <section class="panel explorer-detail-hero">
          <div>
            <p class="eyebrow"><%= proof.sourceService || 'AISFOR' %></p>
            <h2><%= proof.proofType || 'PROOF' %></h2>
            <code class="hash-block"><%= proof.id || proof.proofHash || '-' %></code>
          </div>
          <div class="detail-status-stack">
            <span class="badge badge-ok"><%= proof.status || 'recorded' %></span>
            <% if (block) { %><a class="nav-button" href="<%= urlWithLang('/explorer/legacy/block/' + encodeURIComponent(block.height)) %>"><%= d.legacyBlock %> #<%= block.height %></a><% } %>
            <% if (chainTx) { %><a class="nav-button subtle" href="<%= urlWithLang('/explorer/tx/' + encodeURIComponent(chainTx.txHash || chainTx.id)) %>"><%= d.viewTx %></a><% } %>
          </div>
        </section>

        <section class="grid detail-grid">
          <article class="panel">
            <div class="panel-title"><h2><%= d.proofSummary %></h2><span><%= d.ledger %></span></div>
            <div class="stat-list compact">
              <div class="stat-row"><span><%= d.actor %></span><code><%= proof.actorId || '-' %></code></div>
              <div class="stat-row"><span><%= d.target %></span><code><%= proof.targetId || '-' %></code></div>
              <div class="stat-row"><span><%= d.node %></span><code><%= proof.nodeId || '-' %></code></div>
              <div class="stat-row"><span><%= d.device %></span><code><%= proof.deviceId || '-' %></code></div>
              <div class="stat-row"><span><%= d.created %></span><strong><%= proof.createdAt || '-' %></strong></div>
              <div class="stat-row"><span><%= d.mined %></span><strong><%= proof.minedAt || '-' %></strong></div>
            </div>
          </article>
          <article class="panel">
            <div class="panel-title"><h2><%= d.hashes %></h2><span><%= d.privacySafe %></span></div>
            <div class="stat-list compact">
              <div class="stat-row"><span><%= d.proofHash %></span><code><%= proof.proofHash || '-' %></code></div>
              <div class="stat-row"><span><%= d.contentHash %></span><code><%= proof.contentHash || '-' %></code></div>
              <div class="stat-row"><span><%= d.chunkHash %></span><code><%= proof.chunkHash || '-' %></code></div>
              <div class="stat-row"><span><%= d.payloadHash %></span><code><%= proof.payloadHash || '-' %></code></div>
              <div class="stat-row"><span><%= d.merkleRoot %></span><code><%= proof.merkleRoot || '-' %></code></div>
            </div>
          </article>
        </section>
      <% } %>
    </main>
  </body>
</html>
