<!doctype html>
<html lang="<%= lang === 'zh' ? 'zh-CN' : lang %>">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title><%= t('transactionDetail') %> · PLAIS EVM</title>
    <link rel="stylesheet" href="/css/admin.css?v=evm-wallet-tx-20260718-1">
    <style>
      .tx-shell { max-width: 980px; }
      .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
      .detail-row { border-top: 1px solid var(--wallet-line, #334155); padding: 16px 0; min-width: 0; }
      .detail-row span { display: block; color: #9fb0c8; font-size: 13px; margin-bottom: 7px; }
      .detail-row code, .detail-row strong { color: #f4f7fb; overflow-wrap: anywhere; white-space: normal; }
      .tx-hash { display: block; padding: 14px; margin: 14px 0; overflow-wrap: anywhere; }
      .language-row { display: flex; gap: 6px; flex-wrap: wrap; }
      .language-row .active { background: #2563eb; border-color: #3b82f6; color: #fff; }
      @media (max-width: 680px) { .detail-grid { grid-template-columns: 1fr; } }
    </style>
  </head>
  <body class="wallet-screen">
    <main class="shell explorer-shell wallet-app wallet-native tx-shell">
      <header class="topbar wallet-topbar">
        <div><p class="eyebrow">PLAIS EVM</p><h1><%= t('transactionDetail') %></h1></div>
        <div class="top-actions">
          <div class="language-row"><% languages.forEach(function(code) { %><a class="nav-button subtle <%= code === lang ? 'active' : '' %>" href="<%= langUrl(code) %>"><%= code.toUpperCase() %></a><% }) %></div>
          <a class="nav-button" href="<%= backUrl %>"><%= t('backWallet') %></a>
        </div>
      </header>
      <section class="panel">
        <div class="panel-title"><h2><%= t('txHash') %></h2><span><%= t(transaction.status === 'confirmed' ? 'confirmed' : (transaction.status === 'failed' ? 'failedStatus' : 'pending')) %></span></div>
        <code class="address-code tx-hash" id="transactionHash"><%= transaction.hash %></code>
        <button class="nav-button" type="button" onclick="copyHash(this)"><%= t('copyAddress') %></button>
        <div class="detail-grid">
          <div class="detail-row"><span><%= t('from') %></span><code><%= transaction.from %></code></div>
          <div class="detail-row"><span><%= t('to') %></span><code><%= transaction.to %></code></div>
          <div class="detail-row"><span><%= t('amount') %></span><strong><%= transaction.amount %> PLAIS</strong></div>
          <div class="detail-row"><span><%= t('fee') %></span><strong><%= transaction.fee || '-' %> PLAIS</strong></div>
          <div class="detail-row"><span><%= t('block') %></span><strong><%= transaction.blockNumber || '-' %></strong></div>
          <div class="detail-row"><span><%= t('nonce') %></span><strong><%= transaction.nonce %></strong></div>
          <div class="detail-row"><span><%= t('gasUsed') %></span><strong><%= transaction.gasUsed || '-' %></strong></div>
          <div class="detail-row"><span><%= t('memo') %></span><strong><%= transaction.memo || '-' %></strong></div>
        </div>
      </section>
    </main>
    <script>
      const copiedText = <%- JSON.stringify(t('copied')) %>;
      function copyHash(button) {
        navigator.clipboard.writeText(document.getElementById('transactionHash').textContent.trim()).then(function() {
          const previous = button.textContent;
          button.textContent = copiedText;
          setTimeout(function() { button.textContent = previous; }, 1200);
        });
      }
    </script>
  </body>
</html>
