{% extends "base.html" %}
{% block content %}
{% if alert_err %}<div class="alert alert-err">{{ alert_err }}</div>{% endif %}
<div class="card">
  <form method="GET">
    <div class="form-group">
      <label>Address (twelve dot-separated words)</label>
      <input name="addr" value="{{ addr }}" placeholder="word1.word2.word3...">
    </div>
    <button type="submit">Look up</button>
  </form>
</div>
{% if addr == BURN_ADDRESS %}
<div class="card" style="border-color:var(--accent)">
  &#128293; This is the burn address: a fixed word sequence (see
  <code>crypto.burn_address()</code>), not derived from any key the way a
  real address is, so there's no key to hold in the first place. Every
  node also enforces this directly: consensus rejects any transaction
  claiming to spend from it, outright, regardless of what it claims to
  prove. Anything sent here, including every <a href="/board">board</a>
  post's fee, is gone for good.
</div>
{% endif %}
{% if holder_count %}
<div class="card wealth">
  <div class="card-title">Wealth distribution ({{ holder_count }} holder{{ 's' if holder_count != 1 }})</div>
  <div class="histo">
  {% for label, count in histogram %}
  <a class="histo-row" href="/address/distribution/{{ loop.index0 }}">
    <span class="histo-label">{{ label }}</span>
    <div class="histo-track">
      <div class="histo-bar" style="width:{{ '%.2f' % (count / histogram_max * 100 if histogram_max else 0) }}%"></div>
    </div>
    <span class="histo-count">{{ count }}</span>
  </a>
  {% endfor %}
  </div>
  <div class="wealth-caption">balance buckets in whole LAPSE, log-scaled</div>
</div>
<style>
  .wealth-caption { font-size:.68rem; color:var(--muted); margin-top:.4rem }

  .histo { display:flex; flex-direction:column; gap:.22rem }
  .histo-row { display:grid; grid-template-columns:11rem 1fr 2.5rem; align-items:center; gap:.6rem; font-size:.74rem; text-decoration:none; color:inherit }
  .histo-row:hover .histo-bar { background:var(--green) }
  .histo-label { color:var(--muted); font-family:var(--mono); text-align:right; white-space:nowrap }
  .histo-track { background:var(--paper-2); border:1px solid var(--rule-lt); overflow:hidden; height:.95rem }
  .histo-bar { height:100%; min-width:3px; background:var(--ink); }
  .histo-count { text-align:right; font-family:var(--mono); color:var(--ink) }

  @media (max-width: 640px) {
    .histo-row { grid-template-columns:6.5rem 1fr 2.25rem; font-size:.7rem }
    .histo-label { white-space:normal }
  }
</style>
{% endif %}
{% if history is not none %}
<div class="stats">
  <div class="stat"><div class="stat-label">Balance</div><div class="stat-value" style="color:var(--green)">{{ fmt_balance(balance) }}</div></div>
  <div class="stat"><div class="stat-label">Txs sent</div><div class="stat-value">{{ tx_count }}</div></div>
  <div class="stat"><div class="stat-label">Transactions</div><div class="stat-value">{{ history | length }}</div></div>
</div>
<div class="card">
  <div class="card-title">History</div>
  <div class="table-wrap">
  <table class="stacked">
    <thead><tr><th>Height</th><th>Hash</th><th>Direction</th><th>Amount</th></tr></thead>
    <tbody>
    {% if history %}
      {% for height, h, direction, payload, kind in history %}
      <tr>
        <td data-label="Height">{{ height }}</td>
        {% if kind == "block" %}
        <td data-label="Hash"><a href="/explorer/block/{{ height }}">{{ h[:20] }}…</a></td>
        {% else %}
        <td data-label="Hash"><a href="/explorer/tx/{{ h }}">{{ h[:20] }}…</a></td>
        {% endif %}
        <td data-label="Direction" style="color:{{ 'var(--ink)' if kind == 'block' else ('var(--red)' if direction == 'sent' else 'var(--green)') }}">{{ direction }}</td>
        <td data-label="Amount">{{ payload if kind == "block" else (payload.outputs | sum(attribute='amount')) }}</td>
      </tr>
      {% endfor %}
    {% else %}
      <tr><td colspan="4" style="color:var(--muted);text-align:center">No transactions</td></tr>
    {% endif %}
    </tbody>
  </table>
  </div>
</div>
{% if total_pages > 1 %}
<nav class="pager" aria-label="Pagination">
  {% if has_prev %}<a href="/address?addr={{ addr }}&page={{ page - 1 }}">Prev</a>{% endif %}
  {% for p in page_window %}
    {% if p is none %}<span class="pager-ellipsis">&hellip;</span>
    {% elif p == page %}<span class="pager-current">{{ p }}</span>
    {% else %}<a href="/address?addr={{ addr }}&page={{ p }}">{{ p }}</a>
    {% endif %}
  {% endfor %}
  {% if has_next %}<a href="/address?addr={{ addr }}&page={{ page + 1 }}">Next</a>{% endif %}
</nav>
{% endif %}
{% endif %}
{% endblock %}