<script>
  let thePage = new PaginateTable("/api/admin/table/{{ .Table }}");
</script>

<h1><a href="/admin/table/">&laquo;</a> Admin {{ .Table }}</h1>

<block x-data="thePage">
  <bar>
    <button type="button"><a href="/admin/new/table/{{ .Table }}/">New</a></button>
    <button type="button" @click="page -= 1">Prev</button>
    <button type="button" @click="page += 1">Next</button>
    <input type="text" x-model.debounce="search_query" name="search" size="40" placeholder="Search" />
  </bar>

  <table>
    <tr class="table-header">
      <th>#</th>
      <template x-for="header in headers">
        <th x-text="header"></th>
      </template>
    </tr>
    <template x-for="item in contents" :key="item.id">
      <tr class="table-row">
        <td>
          <a x-bind:href="'/admin/table/{{ .Table }}/' + item.id + '/'">
            #
          </a>
        </td>
        <template x-for="(value, key) in item">
          <td x-text="value"></td>
        </template>
      </tr>
    </template>
  </table>
</block>
