<!DOCTYPE html>
<html lang='en' data-theme="<%= theme %>">

<head>
  <%- include('partials/head') %>
  <%- include('partials/bootstrap-deps') %>
  <%- include('partials/head-tail') %>
</head>

<body class='container'>
  <header>
    <%
      const breadcrumb = [
        {
          active: true,
          href: '/',
          text: 'Tables',
        },
      ]
    %>
    <%- include('partials/breadcrumb', { breadcrumb }) %>
  </header>
  <main>
    <script>
    $(document).ready(() => {
      $('#filter-input')
        .on('input', event => {
          const query = event.target.value.trim().toLowerCase()
          const words = query.split(' ').map(word => word.trim()).filter(word => word)
          $('#table-list .list-group-item').show().each((index, element) => {
            const lowerTableName = element.dataset.tableName.toLowerCase()
            for (const word of words) {
              if (!lowerTableName.includes(word)) {
                $(element).hide()
                return
              }
            }
            $(element).show()
          })
        })
        .trigger('input')
    })

    function deleteTable(TableName) {
      if (!confirm(`Are you sure you want to delete table "${TableName}" ?`)) {
        return
      }

      fetch(`/tables/${TableName}`, {
        method: 'delete'
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error
          }
          location.reload()
        })
        .catch((err) => {
          window.alert(`There was an error when attempting to delete the table:\n\n${err}`)
        })
    }

    function purgeTable(TableName) {
      if (!confirm(`Are you sure you want to purge all records from table "${TableName}" ?`)) {
        return
      }

      fetch(`/tables/${TableName}/all`, {
        method: 'delete'
      }).then((response) => {
        if (!response.ok) {
          throw new Error
        }
        location.reload()
      }).catch(() => {
        window.alert('There was an error when attempting to purge the table.')
      })
    }

      function purgeAllTables () {
        if (!confirm('Are you sure you want to purge all tables?')) {
          return
        }
        fetch('/tables-purge', {
          method: 'delete'
        }).then((response) => {
          if (!response.ok) {
            throw new Error
          }
          response.text().then(text => {
            window.alert(text)
            location.reload()
          })
        }).catch(() => {
          window.alert('There was an error when attempting to purge all tables.')
        })
      }

      function deleteAllTables () {
        if (!confirm('Are you sure you want to delete all tables?')) {
          return
        }
        fetch('/tables', {
          method: 'delete'
        }).then((response) => {
          if (!response.ok) {
            throw new Error
          }
          response.text().then(text => {
            window.alert(text)
            location.reload()
          })
        }).catch(() => {
          window.alert('There was an error when attempting to delete all tables.')
        })
      }

    </script>

    <div class="form-group">
      <input type="text" class="form-control mb-3" id="filter-input" placeholder="Filter tables">
    </div>

    <ul class="list-group" id="table-list">
      <% for(var i = 0; i < data.length; i++) { %>
        <li class="list-group-item" data-table-name="<%= data[i].TableName %>">
          <a href='/tables/<%= data[i].TableName %>'>
            <%= data[i].TableName %>
          </a>
          <a href="#" onClick="deleteTable('<%= data[i].TableName %>'); return false"
              class="badge badge-danger badge-pill float-right ml-1">
            Delete
          </a>
          <a href="/" onClick="purgeTable('<%= data[i].TableName %>'); return false"
             class="badge badge-warning badge-pill float-right ml-1">
            Purge
          </a>
          <span class="badge badge-secondary badge-pill float-right ml-1">
            <%= data[i].ItemCount %>
          </span>
        </li>
      <% } %>
    </ul>
    <div style="margin-top: 12px; display: flex; justify-content: space-between;">
      <a href='/create-table' class="btn btn-primary">
        Create table
      </a>
      <div>
        <a href='#' class="btn btn-warning" onclick="purgeAllTables(); return false;">
          Purge all tables
        </a>
        <a href='#' class="btn btn-danger" onclick="deleteAllTables(); return false;">
          Delete all tables
        </a>
      </div>
    </div>
  </main>
</body>
</html>
