{% extends "base.html" %}

{% block title %}Create New Collection{% endblock %}

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

{% block content %}
<div class="ldr-rag-manager-container">
    <!-- Header -->
    <div class="ldr-rag-header">
        <div class="ldr-flex-row">
            <a href="/library/collections" class="ldr-btn-collections ldr-btn-collections-secondary">
                <i aria-hidden="true" class="fas fa-arrow-left"></i> Back to Collections
            </a>
        </div>
        <h1><i aria-hidden="true" class="fas fa-plus-circle"></i> Create New Collection</h1>
        <p class="ldr-subtitle">Set up a new collection to organize and index your documents</p>
    </div>

    <!-- Create Collection Form -->
    <div class="ldr-rag-section ldr-featured-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-plus-circle"></i> Collection Details</h2>
        </div>

        <form id="create-collection-form">
            <div class="ldr-form-group">
                <label for="collection-name">Collection Name *</label>
                <input type="text" id="collection-name" name="name" required
                       placeholder="Enter a descriptive name for your collection"
                       maxlength="100">
                <div class="ldr-form-help">Choose a name that clearly describes what documents will be in this collection (e.g., "Research Papers on AI Ethics", "Product Documentation 2025")</div>
                <div id="name-counter" class="ldr-char-counter">100 characters remaining</div>
            </div>

            <div class="ldr-form-group">
                <label for="collection-description">Description</label>
                <textarea id="collection-description" name="description" rows="4"
                          placeholder="Optional: Add a brief description of what this collection contains..."></textarea>
                <div class="ldr-form-help">Optional: Provide context about the collection contents and purpose</div>
            </div>

            <div class="ldr-form-group">
                <label class="ldr-collection-public-label">
                    <input type="checkbox" id="collection-is-public" name="is_public">
                    Public collection (content is not sensitive)
                </label>
                <div class="ldr-form-help">
                    Leave unchecked (default) for <strong>private</strong> collections: they
                    stay off the public internet under Public-only / Adaptive egress scope and
                    force local LLM/embeddings inference when used, so their contents never
                    reach a cloud model. Check this only for non-sensitive content you're happy
                    to process with cloud inference.
                </div>
            </div>

            <div class="ldr-form-group">
                <label class="ldr-collection-public-label">
                    <input type="checkbox" id="collection-agent-enabled" name="agent_enabled" checked>
                    Available to the research agent
                </label>
                <div class="ldr-form-help">
                    Checked (default): the LangGraph research agent can search this
                    collection as one of its tools. Uncheck to keep the collection out
                    of the agent's tool list when you don't need it for agentic research.
                    This is a usability switch only — it does not change privacy or egress.
                </div>
            </div>

            <div class="ldr-form-actions">
                <button type="button" class="ldr-btn-collections ldr-btn-collections-secondary" onclick="window.location.href='/library/collections'">
                    <i aria-hidden="true" class="fas fa-times"></i> Cancel
                </button>
                <button type="submit" class="ldr-btn-collections ldr-btn-collections-primary ldr-btn-lg ldr-btn-featured" id="create-collection-btn">
                    <i aria-hidden="true" class="fas fa-folder-plus"></i> Create Collection
                </button>
            </div>
        </form>

        <!-- Results display area -->
        <div id="create-results" class="ldr-hidden"></div>
    </div>

    <!-- Quick Info Section -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-info-circle"></i> What's Next?</h2>
        </div>

        <div class="ldr-content-padding">
            <p class="ldr-info-text">
                After creating your collection, you can upload documents and index them for semantic search.
                Collections help you organize documents by topic, project, or time period.
            </p>

            <div class="ldr-quick-tips">
                <div class="ldr-tip-item">
                    <i aria-hidden="true" class="fas fa-lightbulb"></i>
                    <div>
                        <strong>Tip:</strong> Use descriptive names like "AI Research 2024" instead of generic names
                    </div>
                </div>
                <div class="ldr-tip-item">
                    <i aria-hidden="true" class="fas fa-folder"></i>
                    <div>
                        <strong>Tip:</strong> Group related documents together for better semantic search results
                    </div>
                </div>
            </div>

            <div class="ldr-section-footer">
                <a href="/library/collections" class="ldr-btn-collections ldr-btn-collections-secondary ldr-link-button">
                    <i aria-hidden="true" class="fas fa-arrow-left"></i> Back to Collections
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Pass collection_id placeholder (not used) to JavaScript -->
<script>
    const COLLECTION_ID = null; // Not needed for create page
</script>
<script defer src="/static/js/collection_create.js"></script>
{% endblock %}
