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