{% extends "base.html" %}

{% block page_container -%}
  <div class="container-fluid">
    <div class="row my-3"><div class="col">
      <div class="card bg-light"><div class="card-body">
        <div class="h5">Transaction</div>
        <table class="table table-hover" style="table-layout:fixed;">
          <tbody class="font-monospace">
            <tr>
              <th class="col-2"><i class="bi-hash" />&nbsp;&nbsp;ID</th>
              <td>{{ transaction.txid }}</td>
            </tr>
            <tr>
              <th class="col-2"><i class="bi-box" />&nbsp;&nbsp;Block</th>
              <td>{% for block_dao in transaction_dao.blocks %}<a class="text-dark" href="{{ url_for('browser.block_view', block_hash=block_dao.block_hash) }}">{{ block_dao.block_hash }}</a><br/>{% else %}None{% endfor %}</td>
            </tr>
            <tr>
              <th class="col-2"><i class="bi-outlet" />&nbsp;&nbsp;Version</th>
              <td>{{ transaction.version }}</td>
            </tr>
            <tr>
              <th class="col-2"><i class="bi-clock" />&nbsp;&nbsp;Timestamp</th>
              <td>{{ transaction.timestamp_dt | utc_datetime }}</td>
            </tr>
            <tr>
              <th class="col-2"><i class="bi-wallet2" />&nbsp;&nbsp;Address</th>
              <td>{{ transaction.address }}</td>
            </tr>
            <tr>
              <th class="col-2"><i class="bi-key" />&nbsp;&nbsp;Public Key</th>
              <td>{{ transaction.public_key or None }}</td>
            </tr>
            <tr>
              <th class="col-2"><i class="bi-check" />&nbsp;&nbsp;Signature</th>
              <td>{{ transaction.signature or None }}</td>
            </tr>
          </tbody>
        </table>
      </div></div>
    </div></div>

    <div class="row my-3"><div class="col">
      <div class="card bg-light"><div class="card-body">
        <div class="h5">UTXO Inflows</div>
        <table class="table table-hover" style="table-layout:fixed;">
          <thead>
            <tr>
              <th class="col-8">Outflow Transaction ID</th>
              <th class="col-1">Outflow Index</th>
              <th class="col-3">Amount</th>
            </tr>
          </thead>
          <tbody class="font-monospace">
            {%- for i in inflows %}
            <tr class="clickable" style="cursor: pointer;" onclick="window.location='{{ url_for('browser.transaction_view', txid=i[0].outflow_txid) }}'">
              <td>{{ i[0].outflow_txid }}</td>
              <td>{{ i[0].outflow_idx }}</td>
              <td>{{ i[2].amount }}</td>
            </tr>
            {%- else %}
            <tr>
              <td>No Inflows</td>
              <td></td>
              <td></td>
            </tr>
            {%- endfor %}
          </tbody>
          {%- if inflows %}
          <tfoot class="font-monospace">
            <tr>
              <td></td>
              <td></td>
              <td>{{ inflow_total }}</td>
            </tr>
          </tfoot>
          {%- endif %}
        </table>
      </div></div>
    </div></div>

    <div class="row my-3"><div class="col">
      <div class="card bg-light"><div class="card-body">
        <div class="h5">UTXO Outflows</div>
        <table class="table table-hover" style="table-layout:fixed;">
          <thead>
            <tr>
              <th class="col-1">Index</th>
              <th class="col-3">Address</th>
              <th class="col-2">Subject</th>
              <th class="col-2">Forgive</th>
              <th class="col-2">Support</th>
              <th class="col-2">Amount</th>
            </tr>
          </thead>
          <tbody class="font-monospace">
            {%- for o in outflows %}
              <tr>
                <td class="col-1">{{ loop.index0 }}</td>
                <td class="col-3">{{ o.address or None }}</td>
                <td class="col-2">{{ o.subject }}{% if o.subject %} <em>({{ o.subject | human_subject }})</em>{% endif %}</td>
                <td class="col-2">{{ o.forgive }}{% if o.forgive %} <em>({{ o.forgive | human_subject }})</em>{% endif %}</td>
                <td class="col-2">{{ o.support }}{% if o.support %} <em>({{ o.support | human_subject }})</em>{% endif %}</td>
                <td class="col-2">{{ o.amount }}</td>
              </tr>
            {%- endfor %}
          </tbody>
          <tfoot class="font-monospace">
            <tr>
              <td class="col-1"></td>
              <td class="col-3"></td>
              <td class="col-2"></td>
              <td class="col-2"></td>
              <td class="col-2"></td>
              <td class="col-2">{{ outflow_total }}</td>
            </tr>
          </tfoot>
        </table>
      </div></div>
    </div></div>
  </div>
{%- endblock %}
