{{ 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 }}