{{template "base.html" .}} {{define "title"}}Search{{end}} {{define "header"}}
<a href="./search">Search</a>
{{end}} {{define "content"}}
<div class="w-full flex flex-col md:flex-row gap-4">
  <div class="flex flex-col gap-4 grow">
    <div
      class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
    >
      <form class="flex gap-4 flex-col lg:flex-row" action="./search">
        <div class="flex flex-col w-full grow">
          <div class="flex relative">
            <span
              class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
            >
              <svg
                width="15"
                height="15"
                viewBox="0 0 24 24"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect width="24" height="24" fill="none" />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C11.8487 18 13.551 17.3729 14.9056 16.3199L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L16.3199 14.9056C17.3729 13.551 18 11.8487 18 10C18 5.58172 14.4183 2 10 2Z"
                />
              </svg>
            </span>
            <input
              type="text"
              id="query"
              name="query"
              class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
              placeholder="Query"
            />
          </div>
        </div>

        <div class="flex relative min-w-[12em]">
          <span
            class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
          >
            <svg
              width="15"
              height="15"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M5.65517 2.22732C5.2225 2.34037 4.9438 2.50021 4.72718 2.71244C4.42179 3.01165 4.22268 3.43172 4.11382 4.225C4.00176 5.04159 4 6.12387 4 7.67568V16.2442C4.38867 15.9781 4.82674 15.7756 5.29899 15.6517C5.41296 15.6217 5.53103 15.5983 5.65517 15.5799V2.22732Z"
              />
              <path
                d="M7.31034 15.5135C7.32206 15.5135 7.33382 15.5135 7.34563 15.5135L20 15.5135V7.67568C20 6.12387 19.9982 5.04159 19.8862 4.22499C19.7773 3.43172 19.5782 3.01165 19.2728 2.71244C18.9674 2.41324 18.5387 2.21816 17.729 2.11151C16.8955 2.00172 15.7908 2 14.2069 2H9.7931C8.79138 2 7.98133 2.00069 7.31034 2.02897V15.5135Z"
              />
              <path
                d="M7.47341 17.1351C6.39395 17.1351 6.01657 17.1421 5.72738 17.218C4.93365 17.4264 4.30088 18.0044 4.02952 18.7558C4.0463 19.1382 4.07259 19.4746 4.11382 19.775C4.22268 20.5683 4.42179 20.9884 4.72718 21.2876C5.03258 21.5868 5.46135 21.7818 6.27103 21.8885C7.10452 21.9983 8.2092 22 9.7931 22H14.2069C15.7908 22 16.8955 21.9983 17.729 21.8885C18.5387 21.7818 18.9674 21.5868 19.2728 21.2876C19.5782 20.9884 19.7773 20.5683 19.8862 19.775C19.9776 19.1088 19.9956 18.2657 19.9991 17.1351H7.47341Z"
              />
            </svg>
          </span>
          <select
            class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
            id="book_type"
            name="book_type"
          >
            <option value="FICTION">Fiction</option>
            <option value="NON_FICTION">Non-Fiction</option>
          </select>
        </div>

        <button
          type="submit"
          class="px-10 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"
        >
          <span class="w-full">Search</span>
        </button>
      </form>
      {{ if .SearchErrorMessage }}
      <span class="text-red-400 text-xs">{{ .SearchErrorMessage }}</span>
      {{ end }}
    </div>
    <div class="inline-block min-w-full overflow-hidden rounded shadow">
      <table
        class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm md:text-sm"
      >
        <thead class="text-gray-800 dark:text-gray-400">
          <tr>
            <th
              scope="col"
              class="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
            ></th>
            <th
              scope="col"
              class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
            >
              Document
            </th>
            <th
              scope="col"
              class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
            >
              Series
            </th>
            <th
              scope="col"
              class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
            >
              Type
            </th>
            <th
              scope="col"
              class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
            >
              Size
            </th>
            <th
              scope="col"
              class="p-3 hidden md:block font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
            >
              Date
            </th>
          </tr>
        </thead>
        <tbody class="text-black dark:text-white">
          {{ if not .Data }}
          <tr>
            <td class="text-center p-3" colspan="6">No Results</td>
          </tr>
          {{ end }} {{range $item := .Data }}
          <tr>
            <td
              class="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500"
            >
              <form action="./search" method="POST">
                <input
                  class="hidden"
                  type="text"
                  id="book_type"
                  name="book_type"
                  value="{{ $.BookType }}"
                />
                <input
                  class="hidden"
                  type="text"
                  id="title"
                  name="title"
                  value="{{ $item.Title }}"
                />
                <input
                  class="hidden"
                  type="text"
                  id="author"
                  name="author"
                  value="{{ $item.Author }}"
                />
                <button name="id" value="{{ $item.ID }}">
                  <svg
                    width="24"
                    height="24"
                    class="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12ZM12 6.25C12.4142 6.25 12.75 6.58579 12.75 7V12.1893L14.4697 10.4697C14.7626 10.1768 15.2374 10.1768 15.5303 10.4697C15.8232 10.7626 15.8232 11.2374 15.5303 11.5303L12.5303 14.5303C12.3897 14.671 12.1989 14.75 12 14.75C11.8011 14.75 11.6103 14.671 11.4697 14.5303L8.46967 11.5303C8.17678 11.2374 8.17678 10.7626 8.46967 10.4697C8.76256 10.1768 9.23744 10.1768 9.53033 10.4697L11.25 12.1893V7C11.25 6.58579 11.5858 6.25 12 6.25ZM8 16.25C7.58579 16.25 7.25 16.5858 7.25 17C7.25 17.4142 7.58579 17.75 8 17.75H16C16.4142 17.75 16.75 17.4142 16.75 17C16.75 16.5858 16.4142 16.25 16 16.25H8Z"
                    ></path>
                  </svg>
                </button>
              </form>
            </td>
            <td class="p-3 border-b border-gray-200">
              {{ $item.Author }} - {{ $item.Title }}
            </td>
            <td class="p-3 border-b border-gray-200">
              <p>{{ or $item.Series "N/A" }}</p>
            </td>
            <td class="p-3 border-b border-gray-200">
              <p>{{ or $item.FileType "N/A" }}</p>
            </td>
            <td class="p-3 border-b border-gray-200">
              <p>{{ or $item.FileSize "N/A" }}</p>
            </td>
            <td class="hidden md:table-cell p-3 border-b border-gray-200">
              <p>{{ or $item.UploadDate "N/A" }}</p>
            </td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>
{{end}}