{% extends "base.html" %}

{% 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 class="fas fa-folder-open"></i> Document Collections</h1>
        <p class="ldr-subtitle">Manage your document collections for RAG-enabled searches</p>
    </div>

    <!-- Collections Section -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i class="fas fa-folder"></i> My Collections</h2>
            <a href="/library/collections/create" id="create-collection-btn" class="ldr-btn-collections ldr-btn-collections-primary">
                <i class="fas fa-plus"></i> Create Collection
            </a>
        </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 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 src="/static/js/collections_manager.js"></script>
{% endblock %}