{{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 bg-white shadow-lg 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}}