<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/css/style.css">
        <script src="/js/upload.js"></script>
    <title>Sign Up</title>
</head>
<body>
<section class="bg-gray-50">
    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0 ">
        <a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900">
            <img class="w-8 h-8 mr-2" src="/img/logo.svg" alt="logo">
            Search    
        </a>
        <div class="w-full bg-white rounded-lg shadow-xl shadow-slate-300 md:mt-0 sm:max-w-md xl:p-0 ">
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <h1 class="text-xl font-bold text-center leading-tight tracking-tight text-gray-900 md:text-2xl ">
                    Upload File
                </h1>
                <% if (isLoggedIn) { %>
                <form id="upload_form" class="space-y-4 md:space-y-6" action="/upload" method="POST" enctype="multipart/form-data">
                    <div>
                        <label for="source" class="block mb-2 text-sm font-medium text-gray-900 ">Source</label>
                        <input type="url" name="source" id="source" placeholder="https://example.com/file.pdf" class="block w-full rounded-md border border-gray-200 bg-gray-50 p-2.5 text-gray-900 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm">
                    </div>
                    <div class="grid grid-cols-2 gap-4 items-center">
                      <div class="flex items-center">
                    <div>
                        <label for="title" class="block mb-2 text-sm font-medium text-gray-900 ">Title</label>
                        <input type="text" name="title" id="title" placeholder="Moby Dick" class="block w-full rounded-md border border-gray-200 bg-gray-50 p-2.5 text-gray-900 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm">
                    </div>
                      </div>
                    <div>
                        <label for="author" class="block mb-2 text-sm font-medium text-gray-900 ">Author</label>
                        <input type="text" name="author" id="author" placeholder="Herman Melville" class="block w-full rounded-md border border-gray-200 bg-gray-50 p-2.5 text-gray-900 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm">
                    </div>
                    </div>
                    <div>
                      <label for="file" class="block mb-2 text-sm font-medium text-gray-900">File</label>
                      <div class="relative w-full h-24 sm:h-16 border hover:border-sky-500 hover:border-2 rounded-md border-gray-200 flex flex-col items-center justify-center">
                        <input type="file" id="drop_zone" name="file" class="absolute w-full h-full opacity-0 z-10 cursor-pointer" accept=".pdf,.epub," />
                        <div class="text-center text-sm text-gray-500">
                          <span>Drag and drop your Document</span>
                          <br />
                          <span>or</span>
                          <br />
                          <span>Click to add</span>
                        </div>
                      </div>
                    </div>
                    <button type="submit" class="w-full text-white bg-blue-400 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Upload</button>
                </form>
                <% } else { %>
                    <div class="text-center font-bold">
                        <p >You must be logged in to use this future.</p>
                        <a href="/login" class=" mb-6 text-primary-400 hover:underline">Login here</a>
                        </div>
                    <% } %>
            </div>
        </div>
    </div>
</section>
</body>