{{template "base" .}} {{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"
            >
              {{ template "svg/search2" (dict "Size" 15) }}
            </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"
          >
	    {{ template "svg/documents" (dict "Size" 15) }}
          </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="source"
            name="source"
          >
            <option value="Annas Archive">Annas Archive</option>
            <option value="LibGen Fiction">LibGen Fiction</option>
            <option value="LibGen Non-fiction">LibGen 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="source"
                  name="source"
                  value="{{ $.Source }}"
                />
                <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 }}">
                  {{ template "svg/download" }}
                </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}}