{{ template "base" . }}
{{ define "title" }}Documents{{ end }}
{{ define "header" }}<a href="/documents">Documents</a>{{ end }}
{{ define "content" }}
  <div class="h-full w-full relative">
    <!-- Document Info -->
    <div
      class="h-full w-full overflow-scroll bg-white shadow-lg dark:bg-gray-700 rounded dark:text-white p-4"
    >
      <div
        class="flex flex-col gap-2 float-left w-44 md:w-60 lg:w-80 mr-4 mb-2 relative"
      >
        <label class="z-10 cursor-pointer" for="edit-cover-button">
          <img
            class="rounded object-fill w-full"
            src="/documents/{{ .Data.ID }}/cover"
          />
        </label>
        {{ if .Data.Filepath }}
          <a
            href="/reader#id={{ .Data.ID }}&type=REMOTE"
            class="z-10 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
            >Read</a
          >
        {{ end }}
        <div class="flex flex-wrap-reverse justify-between z-20 gap-2 relative">
          <div class="min-w-[50%] md:mr-2">
            <div class="flex gap-1 text-sm">
              <p class="text-gray-500">ISBN-10:</p>
              <p class="font-medium">{{ or .Data.Isbn10 "N/A" }}</p>
            </div>
            <div class="flex gap-1 text-sm">
              <p class="text-gray-500">ISBN-13:</p>
              <p class="font-medium">{{ or .Data.Isbn13 "N/A" }}</p>
            </div>
          </div>
          <div
            class="flex grow justify-between my-auto text-gray-500 dark:text-gray-500"
          >
            <input
              type="checkbox"
              id="edit-cover-button"
              class="hidden css-button"
            />
            <div
              class="absolute z-30 flex flex-col gap-2 top-0 left-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
            >
              <form
                method="POST"
                enctype="multipart/form-data"
                action="./{{ .Data.ID }}/edit"
                class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"
              >
                <input type="file" id="cover_file" name="cover_file" />
                {{ template "component/button" (dict "Title" "Upload Cover") }}
              </form>
              <form
                method="POST"
                action="./{{ .Data.ID }}/edit"
                class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"
              >
                <input
                  type="checkbox"
                  checked
                  id="remove_cover"
                  name="remove_cover"
                  class="hidden"
                />
                {{ template "component/button" (dict "Title" "Remove Cover") }}
              </form>
            </div>
            <div class="relative">
              <label for="delete-button" class="cursor-pointer"
                >{{ template "svg/delete" (dict "Size" 28) }}</label
              >
              <input
                type="checkbox"
                id="delete-button"
                class="hidden css-button"
              />
              <div
                class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
              >
                <form
                  method="POST"
                  action="./{{ .Data.ID }}/delete"
                  class="text-black dark:text-white text-sm w-24"
                >
                  {{ template "component/button" (dict "Title" "Delete") }}
                </form>
              </div>
            </div>
            <a href="../activity?document={{ .Data.ID }}"
              >{{ template "svg/activity" (dict "Size" 28) }}</a
            >
            <div class="relative">
              <label for="search-button"
                >{{ template "svg/search" (dict "Size" 28) }}</label
              >
              <input
                type="checkbox"
                id="search-button"
                class="hidden css-button"
              />
              <div
                class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
              >
                <form
                  method="POST"
                  action="./{{ .Data.ID }}/identify"
                  class="flex flex-col gap-2 text-black dark:text-white text-sm"
                >
                  <input
                    type="text"
                    id="title"
                    name="title"
                    placeholder="Title"
                    value="{{ or .Data.Title nil }}"
                    class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
                  />
                  <input
                    type="text"
                    id="author"
                    name="author"
                    placeholder="Author"
                    value="{{ or .Data.Author nil }}"
                    class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
                  />
                  <input
                    type="text"
                    id="isbn"
                    name="isbn"
                    placeholder="ISBN 10 / ISBN 13"
                    value="{{ or .Data.Isbn13 (or .Data.Isbn10 nil) }}"
                    class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
                  />
                  {{ template "component/button" (dict "Title" "Identify") }}
                </form>
              </div>
            </div>
            {{ if .Data.Filepath }}
              <a href="./{{ .Data.ID }}/file"
                >{{ template "svg/download" (dict "Size" 28) }}</a
              >
            {{ else }}
              {{ template "svg/download" (dict "Size" 28 "Disabled" true) }}
            {{ end }}
          </div>
        </div>
      </div>
      <div class="grid sm:grid-cols-2 justify-between gap-4 pb-4">
        {{ template "component/key-val-edit" (dict
          "Title" "Title"
          "Value" .Data.Title
          "URL" (printf "./%s/edit" .Data.ID)
          "FormValue" "title"
          )
        }}
        {{ template "component/key-val-edit" (dict
          "Title" "Author"
          "Value" .Data.Author
          "URL" (printf "./%s/edit" .Data.ID)
          "FormValue" "author"
          )
        }}
        <div class="relative">
          <div class="text-gray-500 inline-flex gap-2 relative">
            <p>Time Read</p>
            <label class="my-auto" for="progress-info-button"
              >{{ template "svg/info" (dict "Size" 18) }}</label
            >
            <input
              type="checkbox"
              id="progress-info-button"
              class="hidden css-button"
            />
            <div
              class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
            >
              <div class="text-xs flex">
                <p class="text-gray-400 w-32">Seconds / Percent</p>
                <p class="font-medium dark:text-white">
                  {{ .Data.SecondsPerPercent }}
                </p>
              </div>
              <div class="text-xs flex">
                <p class="text-gray-400 w-32">Words / Minute</p>
                <p class="font-medium dark:text-white">{{ .Data.Wpm }}</p>
              </div>
              <div class="text-xs flex">
                <p class="text-gray-400 w-32">Est. Time Left</p>
                <p class="font-medium dark:text-white whitespace-nowrap">
                  {{ niceSeconds .TotalTimeLeftSeconds }}
                </p>
              </div>
            </div>
          </div>
          <p class="font-medium text-lg">
            {{ niceSeconds .Data.TotalTimeSeconds }}
          </p>
        </div>
        <div>
          <p class="text-gray-500">Progress</p>
          <p class="font-medium text-lg">{{ .Data.Percentage }}%</p>
        </div>
      </div>
      <div class="relative">
        <div class="text-gray-500 inline-flex gap-2 relative">
          <p>Description</p>
          <label class="my-auto" for="edit-description-button"
            >{{ template "svg/edit" (dict "Size" 18) }}</label
          >
        </div>
      </div>
      <div class="relative font-medium text-justify hyphens-auto">
        <input
          type="checkbox"
          id="edit-description-button"
          class="hidden css-button"
        />
        <div
          class="absolute h-full w-full min-h-[10em] z-30 top-1 right-0 gap-4 flex transition-all duration-200"
        >
          <img
            class="hidden md:block invisible rounded w-44 md:w-60 lg:w-80 object-fill"
            src="/documents/{{ .Data.ID }}/cover"
          />
          <form
            method="POST"
            action="./{{ .Data.ID }}/edit"
            class="flex flex-col gap-2 w-full text-black bg-gray-200 rounded shadow-lg shadow-gray-500 dark:text-white dark:shadow-gray-900 dark:bg-gray-600 text-sm p-3"
          >
            <textarea
              type="text"
              id="description"
              name="description"
              class="h-full w-full p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
            >
{{ or .Data.Description "N/A" }}</textarea
            >
            {{ template "component/button" (dict "Title" "Save") }}
          </form>
        </div>
        <p>{{ or .Data.Description "N/A" }}</p>
      </div>
    </div>
    {{ template "component/metadata" (dict
      "ID" .Data.ID
      "Metadata" .Metadata
      "Error" .MetadataError
      )
    }}
  </div>
{{ end }}