{% 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-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 %}