<h2>Block</h2>

<h3>Info</h3>

<div class="blocks-navigation">
  <ul>
    <li><a href="/block/<%= block.data.message.slot.to_i - 1 %>">Prev. Slot</a></li>
    <li><a href="/block/<%= block.data.message.slot.to_i + 1 %>">Next Slot</a></li>
    <li><a href="/block/latest">Latest</a></li>
  </ul>
</div>

<table>
  <tr>
    <td>Slot:</td>
    <td><%= block.data.message.slot %></td>
  </tr>
  <tr>
    <td>Block:</td>
    <td><%= payload.block_number %></td>
  </tr>
  <tr>
    <td>Hash:</td>
    <td><%= payload.block_hash %></td>
  </tr>
  <tr>
    <td>Date:</td>
    <td><%= Time.unix(payload.timestamp.to_i) %></td>
  </tr>
</table>

<h3>Stateless</h3>

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <% verkle.@state.@state.each do |key, value| %>
    <tr>
      <td><%= key.to_s %></td>
      <td><%= value.to_s %></td>
    </tr>
  <% end %>
</table>

<h3>Account</h3>

<form x-data="AccountForm(<%= block.data.message.slot %>)" @submit.prevent="submitForm">
  <input type="hidden" name="slot" value="" x-model="formData.slot" />
  <div class="form-inputs">
    <div class="form-inputs">
      <label>Address:</label>
      <input type="text" name="address" required x-model="formData.address" />
    </div>
    <div class="form-inputs">
      <label>Storage:</label>
      <input type="text" name="storageKey" x-model="formData.storageKey" />
    </div>
    <button :disabled="formLoading" x-text="submitText"></button>
  </div>
  <div x-show="formData.account" style="display: none">
    <table>
      <tr>
        <td>Version:</td>
        <td x-text="formData.account.version"></td>
      </tr>
      <tr>
        <td>Balance:</td>
        <td x-text="formData.account.balance"></td>
      </tr>
      <tr>
        <td>Nonce:</td>
        <td x-text="formData.account.nonce"></td>
      </tr>
      <tr>
        <td>Code hash:</td>
        <td x-text="formData.account.code_hash"></td>
      </tr>
      <tr>
        <td>Bytecode:</td>
        <td x-text="formData.account.bytecode"></td>
      </tr>
      <tr>
        <td>Storage:</td>
        <td x-text="formData.account.storage_value"></td>
      </tr>
    </table>
  </div>
  <div x-show="formData.error">
    <p>Failed to read address:</p>
    <pre x-text="formData.error"></pre>
  </div>
</form>
