{{define "notebooks:list"}}
<div
  id="all_types_search"
  class="w3-panel w3-border w3-round-large w3-display-container"
  style="display: none"
>
  <form
    class="w3-container"
    method="POST"
    hx-post="/notebooks"
    hx-target="#notebooks"
  >
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
    <div class="w3-row">
      <div class="w3-half" style="padding-right: 4px">
        <label for="notebook-title">Title</label>
        <input
          name="Title"
          class="w3-input w3-border"
          id="notebook-title"
          type="text"
          value=""
        />
      </div>
    </div>
    <div class="w3-bar" style="padding-top: 8px; padding-bottom: 8px">
      <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large">
        <i class="bi bi-search"></i> Find
      </button>
    </div>
  </form>
</div>
<div id="notebooks" style="overflow-x:auto;">
  <table class="w3-table-all w3-striped">
    <thead>
      <tr>
        <th>Title</th>
        <th class="w3-right-align">
          <a
            class="w3-button w3-small w3-border w3-round-large w3-metro-dark-blue"
            hx-get="/notebook/create"
            hx-push-url="true"
            hx-target="#page-content"><i class="bi bi-plus-circle"></i></a>
          <a
            class="w3-button w3-small w3-border w3-round-large w3-metro-blue"
            href="#"
            _="on click toggle the *display of #all_types_search"><i class="bi bi-search"></i></a>
        </th>
      </tr>
    </thead>
    <tbody>
      {{
        range .notebooks
      }}
      <tr>
        <td class="title" data-label="Title">
          <i class="{{.Icon}}"></i> {{.Title}}
        </td>
        <td class="w3-right-align">
          <button
            class="w3-button w3-edit w3-small w3-border w3-round-large"
            hx-get="/notebook/update/{{.Id}}"
            hx-push-url="true"
            hx-target="#page-content">
            <i class="bi bi-pencil"></i>
          </button>
          <button
            class="w3-button w3-delete w3-small w3-border w3-round-large"
            hx-delete="/notebook/delete/{{.Id}}"
            hx-target="closest tr"
            hx-swap="outerHTML swap:1s"
            hx-trigger="confirmed"
            onClick="bm_show_confirm(this, 'Notebooks', 'Delete this notebook ?')">
            <i class="bi bi-trash"></i>
          </button>
        </td>
      </tr>
      {{
        end
      }}
    </tbody>
  </table>
</div>
{{ end }}