<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/{{ .ID }}">
        <img
          class="rounded object-cover h-full"
          src="./documents/{{ .ID }}/cover"
        />
      </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 .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 .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">{{ .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 .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={{ .ID }}">{{ template "svg/activity" }}</a>
      {{ if .Filepath }}
        <a href="./documents/{{ .ID }}/file">{{ template "svg/download" }}</a>
      {{ else }}
        {{ template "svg/download" (dict "Disabled" true) }}
      {{ end }}
    </div>
  </div>
</div>