<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JustEmbed - Upload to {{ kb_name }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="mb-6">
            <a href="/?tab=kbs" class="text-blue-600 hover:text-blue-800 flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Back to Knowledge Bases
            </a>
        </div>

        <div class="bg-white rounded-lg shadow-lg p-8">
            <div class="mb-6">
                <h1 class="text-3xl font-bold text-gray-900 mb-2">Upload to {{ kb_name }}</h1>
                <p class="text-gray-600">
                    Model: 
                    {% if model_type == 'custom' %}
                    <span class="text-purple-600 font-medium">🎯 Custom: {{ model_name }}</span>
                    {% else %}
                    <span class="text-blue-600 font-medium">🔤 General (E5-Small)</span>
                    {% endif %}
                </p>
            </div>

            <form method="post" action="/upload" enctype="multipart/form-data" class="space-y-6">
                <input type="hidden" name="kb" value="{{ kb_name }}">
                
                <div>
                    <label for="file" class="block text-sm font-medium text-gray-700 mb-2">
                        Select Document (TXT or MD)
                    </label>
                    <input 
                        type="file" 
                        name="file" 
                        id="file" 
                        accept=".txt,.md" 
                        required
                        class="w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-colors cursor-pointer hover:border-gray-400"
                    >
                    <p class="mt-2 text-sm text-gray-500">
                        Maximum file size: 10MB
                    </p>
                </div>

                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-blue-900 mb-2">What happens next?</h3>
                    <ol class="list-decimal list-inside space-y-1 text-sm text-blue-800">
                        <li>Your document will be split into chunks</li>
                        <li>You can preview and adjust the chunking</li>
                        <li>Chunks will be embedded using the KB's model</li>
                        <li>Knowledge will be added to {{ kb_name }}</li>
                    </ol>
                </div>

                <div class="flex space-x-4">
                    <button 
                        type="submit" 
                        class="flex-1 px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium"
                    >
                        Upload & Preview Chunks
                    </button>
                    <a 
                        href="/?tab=kbs" 
                        class="px-6 py-3 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors font-medium"
                    >
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>

    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <p class="text-center text-sm text-gray-500">
                Copyright © Krishnamoorthy Sankaran | 
                <a href="https://github.com/sekarkrishna/justembed" target="_blank" class="text-blue-600 hover:text-blue-800">GitHub</a> | 
                <a href="https://pypi.org/project/justembed" target="_blank" class="text-blue-600 hover:text-blue-800">PyPI</a>
            </p>
        </div>
    </footer>
</body>
</html>
