{{ template "base" . }}
{{ define "title" }}Documents{{ end }}
{{ define "header" }}<a href="./documents">Documents</a>{{ end }}
{{ define "content" }}
  <div
    class="flex flex-col gap-2 grow p-4 mb-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="./documents"
      method="GET"
    >
      <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="search"
            name="search"
            class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 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="Search Author / Title"
          />
        </div>
      </div>
      <div class="lg:w-60">
        {{ template "component/button" (dict
          "Title" "Search"
          "Variant" "Secondary"
          )
        }}
      </div>
    </form>
  </div>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
    {{ range $doc := .Data }}
      {{ template "component/document-card" $doc }}
    {{ end }}
  </div>
  <div class="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
    {{ if .PreviousPage }}
      <a
        href="./documents?page={{ .PreviousPage }}&limit={{ .PageLimit }}"
        class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
        >◄</a
      >
    {{ end }}
    {{ if .NextPage }}
      <a
        href="./documents?page={{ .NextPage }}&limit={{ .PageLimit }}"
        class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
        >►</a
      >
    {{ end }}
  </div>
  <div
    class="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
  >
    <input type="checkbox" id="upload-file-button" class="hidden css-button" />
    <div
      class="absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2"
    >
      <form
        method="POST"
        enctype="multipart/form-data"
        action="./documents"
        class="flex flex-col gap-2"
      >
        <input
          type="file"
          accept=".epub"
          id="document_file"
          name="document_file"
        />
        <button
          class="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
          type="submit"
        >
          Upload File
        </button>
      </form>
      <label for="upload-file-button">
        <div
          class="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
        >
          Cancel Upload
        </div>
      </label>
    </div>
    <label
      class="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
      for="upload-file-button"
      >{{ template "svg/upload" (dict "Size" 34) }}</label
    >
  </div>
{{ end }}