{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card shadow-lg mt-4">
            <div class="card-header border-0 pb-0 pt-4 text-center bg-transparent">
                <div class="mb-3">
                    <i class="bi bi-database-add" style="font-size: 2.5rem; color: var(--accent-primary);"></i>
                </div>
                <h3 class="fw-bold">Create Vector Database</h3>
                <p class="text-muted small">Upload your files to initialize a new AI knowledge base.</p>
            </div>
            
            <div class="card-body p-4 p-md-5 pt-3">
                <form method="post" enctype="multipart/form-data">
                    
                    <!-- Database Name Input -->
                    <div class="form-group mb-4">
                        <label for="db_name" class="form-label fw-semibold text-light mb-2">
                            Database Name
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-transparent border-end-0 border-secondary text-muted">
                                <i class="bi bi-hdd-network"></i>
                            </span>
                            <input type="text" id="db_name" name="db_name" class="form-control border-start-0 ps-0" 
                                placeholder="e.g., HR_Policies_2024" required>
                        </div>
                    </div>
                
                    <!-- Folder Upload Input -->
                    <div class="form-group mb-4">
                        <label for="folder" class="form-label fw-semibold text-light mb-2">
                            Select Folder to Upload
                        </label>
                        <div class="upload-area p-4 text-center rounded border border-secondary border-dashed" style="border-style: dashed !important; background: rgba(0,0,0,0.2);">
                            <i class="bi bi-folder2-open display-6 text-muted mb-2"></i>
                            <input type="file" id="folder" name="folder" class="form-control mb-2" 
                                webkitdirectory directory multiple required style="background: transparent; color: inherit;">
                            <small class="text-muted d-block mt-2">
                                <i class="bi bi-info-circle me-1"></i> Folder upload requires Chrome or Edge.
                            </small>
                        </div>
                    </div>
                
                    <!-- Submit Button -->
                    <div class="mt-5 text-center">
                        <button type="submit" class="btn btn-primary w-100 py-2 fs-5">
                            <i class="bi bi-cpu me-2"></i> Initialize Database
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}