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

    <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>
</div>

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  {{range $doc := .Data }}
  <div class="w-full relative">
    <div class="flex gap-4 w-full h-full p-4 shadow-lg bg-white dark:bg-gray-700 rounded">
      <div class="min-w-fit my-auto h-48 relative">
	<a href="./documents/{{$doc.ID}}">
	  <img class="rounded object-cover h-full" src="./documents/{{$doc.ID}}/cover"></img>
	</a>
      </div>
      <div class="flex flex-col justify-around dark:text-white w-full text-sm">
        <div class="inline-flex shrink-0 items-center">
          <div>
              <p class="text-gray-400">Title</p>
              <p class="font-medium">
                {{ or $doc.Title "Unknown" }}
              </p>
          </div>
        </div>
        <div class="inline-flex shrink-0 items-center">
          <div>
              <p class="text-gray-400">Author</p>
              <p class="font-medium">
                {{ or $doc.Author "Unknown" }}
              </p>
          </div>
        </div>
        <div class="inline-flex shrink-0 items-center">
          <div>
              <p class="text-gray-400">Progress</p>
              <p class="font-medium">
	      {{ $doc.Percentage }}%
              </p>
          </div>
        </div>
        <div class="inline-flex shrink-0 items-center">
          <div>
              <p class="text-gray-400">Time Read</p>
              <p class="font-medium">
	      {{ niceSeconds $doc.TotalTimeSeconds }}
              </p>
          </div>
        </div>
      </div>
      <div class="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400">
	<a href="./activity?document={{ $doc.ID }}">{{ template "svg/activity" }}</a>

	{{ if $doc.Filepath }}
	  <a href="./documents/{{$doc.ID}}/file">{{ template "svg/download" }}</a>
	{{ else }}
	  {{ template "svg/download" (dict "Disabled" true) }}
	{{ end }}
      </div>
    </div>
  </div>
  {{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="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>

<style>
  .css-button:checked + div {
    display: block;
    opacity: 1;
  }

  .css-button + div {
    display: none;
    opacity: 0;
  }

  .css-button:checked + div + label {
    display: none;
  }
</style>
{{end}}