<!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',
        },
        {
          href: `/tables/${TableName}`,
          text: Table.TableName,
          badge: Table.ItemCount,
        },
      ]

      if (Item.id) {
        breadcrumb.push({ text: Item.id })
      } else {
        breadcrumb.push({ text: 'Item' })
      }
    %>
    <%- include('partials/breadcrumb', { breadcrumb }) %>
  </header>

  <main class='flex-fill d-flex flex-column'>
    <nav>
      <script>
      function handleEditClick () {
        const saveButton = document.getElementById('saveButton')

        fetch(document.location.pathname, {
          method: 'put',
          headers: {
            'Content-Type': 'application/json'
          },
          body: editor.getValue()
        }).then((response) => {
          if (response.ok) {
            return response.json()
          } else {
            throw new Error()
          }
        }).then((json) => {
          if (document.location.pathname.endsWith('/add-item')) {
            const urlPart1 = document.location.pathname.replace('/add-item', '')
            const param = encodeURIComponent(Object.values(json).join(','))

            window.location = `${urlPart1}/items/${param}`
            return
          }
          editor.setValue(JSON.stringify(json, null, 2));
          editor.focus()
          saveButton.classList.remove('btn-primary')
          saveButton.classList.add('btn-success')
          setTimeout(() => {
            saveButton.classList.add('btn-primary')
            saveButton.classList.remove('btn-success')
          }, 2000)
        }).catch((error) => {
          editor.focus()
          saveButton.classList.remove('btn-primary')
          saveButton.classList.add('btn-warning')
          setTimeout(() => {
            saveButton.classList.add('btn-primary')
            saveButton.classList.remove('btn-warning')
          }, 2000)
          console.error(error)
        })
      }
      </script>
      <button
        class='btn btn-primary'
        id='saveButton'
        onclick='handleEditClick()'
        type='button'
      >
        Save
      </button>

      <script>
      function handleDeleteClick (event) {
        event.preventDefault()
        fetch(document.location.pathname, {
          method: 'delete'
        }).then((response) => {
          if (response.ok) {
            window.location = `/tables/<%= TableName %>`
          }
        }).catch((error) => {
          console.error(error)
          alert('There was an error.')
        })
      }
      </script>
      <% if (!isNew) { %>
        <button
          class='btn btn-danger'
          onclick='handleDeleteClick(event)'
          type='button'
        >
          Delete
        </button>
      <% } %>
    </nav>
    <article
        id="documentWrapper"
        class="flex-fill"
        style='position: relative; margin-top: 16px; width: 100%; height: 100%'>
      <div id='documentTextarea' style='
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;'><%= JSON.stringify(Item, null, 2) %></div>
      <script>
      const editor = ace.edit("documentTextarea")
      editor.resize()
      editor.getSession().setMode("ace/mode/json")
      editor.setTheme("ace/theme/monokai")
      editor.setFontSize(14)
      editor.focus();
      </script>
    </article>
  </main>
</body>
</html>
