<!DOCTYPE html>
<html>
<head>
    <script src="static/js/script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/build/pdf.min.js"></script>
    <link rel="stylesheet" href="static/css/styles.css">
</head>
<body>
<form id='url' class="search-container">
    <input type="text" name="pdf-url" placeholder="Enter PDF URL">
    <button type="submit">Submit</button>
</form>

<p style="color: black; margin: 10px; /* padding: 10px; */ /* border-radius: 10px; */ /* background-color: grey; */ width: fit-content; /* max-width: 80%; */ text-align: start; overflow-wrap: break-word; /* font-style: normal; */ font-variant-caps: normal; /* font-weight: normal; */ /* font-stretch: normal; */ font-size: 1.5em; line-height: normal; font-family: Roboto;">or</p>

<form id="up" style="margin-top: 30px; margin-left: 15px;" enctype="multipart/form-data">
    <label for="file-input" class="upload-btn">Upload PDF</label>
    <input type="file" accept=".pdf" id="file-input"/>
</form>

<div id="container">
    <iframe id="pdf-viewer" class="pdf-viewer" style="border-width: 0"></iframe>
    <div style="width: 40%; height: 100vh; border: none; background-color: black; display: flex; flex-direction: column; align-items: center; justify-content: space-between;">
        <div id="chat" style="height: 100%; overflow-y: scroll; background-color: black;">
            <!-- Chat messages go here -->
        </div>
        <form style="display: flex; padding-left: 10px; margin-bottom: 10px; width: 100%;">
            <input type="text" name='chat' style="font-size: 14px; flex-grow: 2; padding: 10px; border: none; background-color: black; color: white;" placeholder="Ask a question..." />
            <button id="send" style="background-color: transparent; border: none; padding: 10px 20px;">
                <img src="static/send-icon.png" style="width: 20px; height: 20px;" />
            </button>
        </form>
    </div>
</div>
</body>
</html>
