{% extends "base.html" %}
{% from "components/help_macros.html" import tooltip, help_panel, help_step, help_tip %}

{% block title %}Document Collections - Deep Research System{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/collections.css">
{% endblock %}

{% block content %}
<div class="ldr-rag-manager-container">
    <div class="ldr-rag-header">
        <h1><i aria-hidden="true" class="fas fa-folder-open"></i> Document Collections</h1>
        <p class="ldr-subtitle">Manage your document collections for {{ tooltip("RAG-enabled searches", "Upload your documents, index them, then select a collection as 'search engine' when researching. AI will search YOUR files instead of the web.") }}</p>
    </div>

    <!-- How Collections Work Help Panel -->
    {% call help_panel('collections-how', 'Understanding Document Collections', icon='folder-open', collapsed=true, dismissible=true) %}
    <div class="ldr-help-steps">
        {{ help_step(1, "Create Collections", "Collections are folders for organizing your documents by topic, project, or any criteria you choose.") }}
        {{ help_step(2, "Upload Documents", "Add PDF, TXT, MD, or HTML files. Text is extracted and stored securely in your database.") }}
        {{ help_step(3, "Index for Search", "Indexing converts documents into searchable embeddings. This enables semantic search by meaning, not just keywords.") }}
        {{ help_step(4, "Use in Research", "Select a collection as your search engine when starting research to search your own documents instead of the web.") }}
    </div>
    {{ help_tip("<strong>Tip:</strong> The default 'Library' collection automatically contains all documents. Create custom collections for specific topics.") }}
    {% endcall %}

    <!-- Collections Section -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-folder"></i> My Collections</h2>
            <div style="display: flex; align-items: center; gap: 20px;">
                <!-- Auto-Index Toggle -->
                <label class="ldr-checkbox-label" style="display: flex; align-items: center; cursor: pointer; gap: 8px; font-size: 14px;">
                    <input type="checkbox"
                           id="auto-index-toggle"
                           class="ldr-settings-checkbox"
                           style="width: 16px; height: 16px;">
                    <span><i aria-hidden="true" class="fas fa-magic"></i> {{ tooltip("Auto-index new documents", "When enabled, documents uploaded or downloaded to any collection are automatically indexed for semantic search.") }}</span>
                </label>
                <a href="/library/collections/create" id="create-collection-btn" class="ldr-btn-collections ldr-btn-collections-primary">
                    <i aria-hidden="true" class="fas fa-plus"></i> Create Collection
                </a>
            </div>
        </div>

        <div id="collections-container" class="ldr-collections-grid">
            <!-- Collections will be loaded here -->
        </div>

        <div id="no-collections-message" class="ldr-empty-state" style="display: none;">
            <i aria-hidden="true" class="fas fa-folder-open fa-3x"></i>
            <p>No collections yet</p>
            <p class="ldr-text-muted">Create your first collection to organize your documents</p>
        </div>
    </div>
</div>

<!-- Create Collection Modal -->
<div id="create-collection-modal" class="ldr-modal">
    <div class="ldr-modal-content">
        <div class="ldr-modal-header">
            <h3>Create New Collection</h3>
            <span class="ldr-close">&times;</span>
        </div>
        <div class="ldr-modal-body">
            <form id="create-collection-modal-form">
                <div class="ldr-form-group">
                    <label for="modal-collection-name">Collection Name *</label>
                    <input type="text" id="modal-collection-name" name="name" required placeholder="e.g., Research Papers, Work Documents">
                </div>
                <div class="ldr-form-group">
                    <label for="modal-collection-description">Description</label>
                    <textarea id="modal-collection-description" name="description" rows="3" placeholder="Describe what this collection is for..."></textarea>
                </div>
                <div class="ldr-form-actions">
                    <button type="button" class="ldr-btn-collections ldr-btn-collections-secondary" id="cancel-create-btn">Cancel</button>
                    <button type="submit" class="ldr-btn-collections ldr-btn-collections-primary">Create Collection</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script defer src="/static/js/collections_manager.js"></script>
{% endblock %}