# templates/document_collections/list.html
{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Document Collections</h1>
    <a href="{% url 'document_collections:create' %}" class="btn btn-primary">Create Collection</a>
</div>

<div class="row">
    {% if collections %}
        {% for collection in collections %}
            <div class="col-md-4 mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ collection.name }}</h5>
                        <p class="card-text">{{ collection.description|truncatewords:30 }}</p>
                        <div class="small text-muted mb-3">
                            <div>Documents: {{ collection.document_count }}</div>
                            <div>Chat Sessions: {{ collection.chat_count }}</div>
                            <div>Created: {{ collection.created_at|date:"M d, Y" }}</div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'document_collections:detail' collection.pk %}" class="btn btn-primary">View</a>
                            <a href="{% url 'chat:session' collection.pk %}" class="btn btn-success">Chat</a>
                            <a href="{% url 'document_collections:delete' collection.pk %}" class="btn btn-danger">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="col">
            <div class="alert alert-info">
                No collections found. Create your first collection to get started!
            </div>
        </div>
    {% endif %}
</div>

{% if messages %}
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    {% for message in messages %}
        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header {% if message.tags %}bg-{{ message.tags }}{% endif %} text-white">
                <strong class="me-auto">Notification</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                {{ message }}
            </div>
        </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all toasts
    var toasts = document.querySelectorAll('.toast');
    toasts.forEach(function(toast) {
        // Auto hide after 3 seconds
        setTimeout(function() {
            toast.classList.remove('show');
        }, 3000);
        
        // Handle close button
        toast.querySelector('.btn-close').addEventListener('click', function() {
            toast.classList.remove('show');
        });
    });
});
</script>
{% endblock %}