<div class="p-3 mb-2 bg-secondary text-white">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">hiSHtory</h1>
      <p class="lead">Your shell history in context, synced, and queryable</p>
    </div>
  </div>
</div>

<nav class="navbar navbar-light bg-light">
  <form class="form-inline my-2 my-lg-0 w-100" style="display:flex">
    <input
      type="search"
      name="q"
      id="search-input"
      autocomplete="off"
      placeholder="Search Query"
      value="{{ .SearchQuery }}"
      class="form-control mr-sm-2"
      hx-get="/htmx/results-table"
      hx-params="*"
      hx-trigger="input changed delay:500ms, search"
      hx-target="#search-results"
    />
    <button
      id="search-button"
      class="btn btn-outline-success my-2 my-sm-0 btn-light"
      type="submit"
    >
      Search
    </button>
  </form>
</nav>

<hr />

{{ block "resultsTable.html" . }}
  <div id="search-results" class="table-responsive">
    <table class="table">
      <thead>
        <tr class="table-info">
          {{ range .ColumnNames }}
            <th scope="col">{{ . }}</th>
          {{ end }}
        </tr>
      </thead>
      <tbody>
        {{ range .SearchResults }}
          <tr class="table-light">
            {{ range . }}
              <td>{{ . }}</td>
            {{ end }}
          </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
{{ end }}


<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/htmx.org@1.9.10/dist/htmx.min.js"
  integrity="sha256-s73PXHQYl6U2SLEgf/8EaaDWGQFCm6H26I+Y69hOZp4="
  crossorigin="anonymous"
></script>
