<!DOCTYPE html>
<html lang='en' data-theme="<%= theme %>">
<head>
  <%- include('partials/head') %>
  <%- include('partials/ace-deps') %>
  <%- include('partials/bootstrap-deps') %>
  <%- include('partials/head-tail') %>
</head>
<body class='container-fluid d-flex flex-column'>
  <header>
    <%
      const breadcrumb = [
        {
          href: '/',
          text: 'Tables',
        },
        {
          active: true,
          text: Table.TableName,
          badge: Table.ItemCount
        },
      ]
    %>
    <%- include('partials/breadcrumb', { breadcrumb }) %>

    <ul class='nav nav-tabs'>
      <li class='nav-item'>
        <a class='nav-link' href='/tables/<%= Table.TableName %>'>
          Items
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/tables/<%= Table.TableName %>/get">
          Get
        </a>
      </li>
      <li class='nav-item'>
        <a class='nav-link active' href='/tables/<%= Table.TableName %>/meta'>Meta</a>
      </li>
    </ul>
  </header>

  <main class="flex-fill d-flex flex-column">
    <div style="margin: 16px 0;">
      <button id="deleteTable" type="button" class="btn btn-danger">Delete table</button>
    </div>
    <div
        id="documentWrapper"
        class="flex-fill"
        style="position: relative;">
      <div id="documentArea" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"><%= JSON.stringify(Table, null, 2) %></div>
    </div>
  </main>
  <script>
      document.querySelector('#deleteTable').addEventListener('click', () => {
          fetch('/tables/<%= Table.TableName %>', {
              method: 'delete'
          }).then((response) => {
              if (!response.ok) {
                  throw new Error
              }
              window.location.href = '/'
          }).catch(() => {
              window.alert('There was an error when attempting to delete the table.')
          })
      });

      const documentWrapper = document.getElementById('documentWrapper')
      function setTextareaHeight (){
          documentWrapper.style.height = `${window.innerHeight - documentWrapper.offsetTop}px`
      }
      setTextareaHeight()


      const editor = ace.edit("documentArea");
      editor.resize();
      editor.getSession().setMode("ace/mode/json");
      editor.setTheme("ace/theme/monokai");
      editor.setReadOnly(true);
      editor.setFontSize(14);
    </script>
</body>
</html>
