<!DOCTYPE html>
<html lang="en">
<head>
    <title>KnowledgeBase</title>
    {{template "views/partials/header"}}
</head>
<body class="bg-gray-900 p-4 text-white font-sans">
    {{template "views/partials/menu"}}
    <header class="text-center mb-8">
        <h1 class="text-3xl md:text-5xl font-bold">Knowledgebase (items: {{.KnowledgebaseItemsCount}})</h1>
    </header>
    <div class="max-w-4xl mx-auto">
        <!-- Add Site Form -->
        <div class="section-box">
            <form action="/knowledgebase" method="POST">
                <h2>Add sites to KB</h2>
                <label for="url">URL:</label>
                <input type="text" name="url" id="url" placeholder="Enter URL here">
                <label for="chunk_size">Chunk size:</label>
                <input type="text" name="chunk_size" id="chunk_size" placeholder="Enter chunk size here">
                <button type="submit">Add Site</button>
            </form>
        </div>

        <!-- File Upload Form -->
        <div class="section-box">
            <form id='form' hx-encoding='multipart/form-data' hx-post='/knowledgebase/upload'>
                <h2>Upload File</h2>
                <label for="file">File:</label>
                <input type='file' name='file' id='file'>
                <label for="chunk_size">Chunk size:</label>
                <input type="text" name="chunk_size" id="chunk_size" placeholder="Enter chunk size here">
                <button type="submit">Upload File</button>
                <progress id='progress' value='0' max='100'></progress>
            </form>
        </div>

        <!-- Reset Knowledge Base -->
        <div class="section-box">
            <button hx-swap="none" hx-trigger="click" hx-delete="/knowledgebase/reset">Reset Knowledge Base</button>
        </div>
    </div>
    <script>
        htmx.on('#form', 'htmx:xhr:progress', function(evt) {
            htmx.find('#progress').setAttribute('value', evt.detail.loaded / evt.detail.total * 100);
        });
    </script>
</body>
</html>
