{% extends "base.html" %}
{% from "components/collection_card.html" import collection_card %}

{% block title %}Collections - CmdForge Registry{% endblock %}

{% block meta_description %}Browse curated collections of AI tools. Install multiple tools at once with a single command.{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Page Header -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <h1 class="text-3xl font-bold text-gray-900">Collections</h1>
            <p class="mt-2 text-gray-600">
                Curated groups of tools that work great together. Install an entire collection with a single command.
            </p>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {% if collections %}
        <!-- Results Header -->
        <div class="flex items-center justify-between mb-6">
            <p class="text-sm text-gray-600">
                {{ collections|length }} collection{{ 's' if collections|length != 1 else '' }} available
            </p>
        </div>

        <!-- Collections Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for collection in collections %}
            {{ collection_card(collection) }}
            {% endfor %}
        </div>
        {% else %}
        <!-- Empty State -->
        <div class="text-center py-16">
            <svg class="mx-auto w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
            </svg>
            <h3 class="mt-4 text-lg font-medium text-gray-900">No collections yet</h3>
            <p class="mt-2 text-gray-600">
                Collections are coming soon! They'll let you install groups of related tools together.
            </p>
            <a href="{{ url_for('web.tools') }}"
               class="mt-6 inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                Browse Individual Tools
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}