{include file="index/layout_header" title="区块详情 #$blockNum"}

<div class="mb-3">
    <a href="/blocks" class="text-secondary small">← 返回区块列表</a>
</div>

{if condition="!empty($block)"}
<div class="card bg-dark border-secondary mb-3">
    <div class="card-header border-secondary">
        <h5 class="mb-0 fw-bold">区块详情 <span class="text-primary">#{$block.number}</span></h5>
    </div>
    <div class="card-body">
        <table class="table table-dark table-borderless mb-0">
            <tbody>
                <tr>
                    <td class="text-secondary" style="width:200px">区块号</td>
                    <td class="fw-bold text-primary">
                    #{$block.number}
                    <span class="badge bg-{$block.blockTypeBadge} ms-2" title="{$block.blockTypeNote}">{$block.blockTypeLabel}</span>
                    {if condition="$block.isHeartbeat"}
                    <br><small class="text-warning mt-1 d-block" style="font-size:0.8em">{$block.blockTypeNote}</small>
                    {/if}
                </td>
                </tr>
                <tr>
                    <td class="text-secondary">区块哈希（SHA3-384）</td>
                    <td class="font-monospace text-info small" style="word-break:break-all">{$block.hash|default='N/A'}</td>
                </tr>
                <tr>
                    <td class="text-secondary">父区块哈希</td>
                    <td class="font-monospace text-secondary small" style="word-break:break-all">
                        {if condition="$block.number > 1"}
                        <a href="/block?n={$block.prevNumber}" class="text-secondary">{$block.parentHash|default='N/A'}</a>
                        {else}
                        创世区块
                        {/if}
                    </td>
                </tr>
                <tr>
                    <td class="text-secondary">出块时间</td>
                    <td>
                        {$block.formatTime|default='N/A'}
                        <span class="text-secondary small ms-2">({$block.timeAgo|default=''})</span>
                    </td>
                </tr>
                <tr>
                    <td class="text-secondary">出块节点</td>
                    <td class="font-monospace small">{$block.validator|default='N/A'}</td>
                </tr>
                <tr>
                    <td class="text-secondary">CBPP 轮次</td>
                    <td>{$block.cbppRound|default='—'}</td>
                </tr>
                <tr>
                    <td class="text-secondary">交易数</td>
                    <td>{$block.txCount|default=0}</td>
                </tr>
                <tr>
                    <td class="text-secondary">区块大小</td>
                    <td>{$block.size|default=0} 字节</td>
                </tr>
                <tr>
                    <td class="text-secondary">宪法层</td>
                    <td>
                        <span class="badge {$block.constitutionBadge|default='bg-secondary'}">{$block.constitutionText|default='未知'}</span>
                    </td>
                </tr>
                <tr>
                    <td class="text-secondary">状态根</td>
                    <td class="font-monospace text-secondary small" style="word-break:break-all">{$block.stateRoot|default='N/A'}</td>
                </tr>
                <tr>
                    <td class="text-secondary">交易根</td>
                    <td class="font-monospace text-secondary small" style="word-break:break-all">{$block.txRoot|default='N/A'}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 交易列表 -->
{if condition="!empty($transactions)"}
<div class="card bg-dark border-secondary mb-3">
    <div class="card-header border-secondary">
        <span class="fw-bold">区块内交易（{$txCount|default=0} 笔）</span>
    </div>
    <div class="table-responsive">
        <table class="table table-dark table-hover mb-0">
            <thead>
                <tr class="text-secondary small">
                    <th>交易哈希</th>
                    <th>发送方</th>
                    <th>接收方</th>
                    <th>金额</th>
                    <th>类型</th>
                </tr>
            </thead>
            <tbody>
                {volist name="transactions" id="tx"}
                <tr>
                    <td class="font-monospace small text-info">{$tx.shortHash}</td>
                    <td class="font-monospace small text-secondary">{$tx.shortFrom}</td>
                    <td class="font-monospace small text-secondary">{$tx.shortTo}</td>
                    <td>{$tx.value|default=0} XTZH</td>
                    <td><span class="badge bg-secondary">{$tx.type|default='transfer'}</span></td>
                </tr>
                {/volist}
            </tbody>
        </table>
    </div>
</div>
{else}
<div class="card bg-dark border-secondary mb-3">
    <div class="card-body text-center text-secondary py-4">
        本区块无交易记录
    </div>
</div>
{/if}

<!-- 上一个 / 下一个 -->
<div class="d-flex justify-content-between mt-3">
    {if condition="$block.number > 1"}
    <a href="/block?n={$block.prevNumber}" class="btn btn-sm btn-outline-secondary">← 上一区块</a>
    {else}
    <span></span>
    {/if}
    <a href="/block?n={$block.nextNumber}" class="btn btn-sm btn-outline-primary">下一区块 →</a>
</div>

{else}
<div class="card bg-dark border-secondary">
    <div class="card-body text-center py-5">
        <div class="text-danger fs-1 mb-3">⚠</div>
        <h5 class="text-secondary">区块不存在</h5>
        <p class="text-muted">区块号 #{$blockNum|default=''} 不存在或尚未生产</p>
        <a href="/blocks" class="btn btn-outline-primary mt-2">返回区块列表</a>
    </div>
</div>
{/if}

{include file="index/layout_footer"}