{{ 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>
          <div class="lg:w-60">
            {{ template "component/button" (dict
              "Title" "Search"
              "Variant" "Secondary"
              )
            }}
          </div>
        </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 }}