{# Collection card macro #}
{% macro collection_card(collection) %}
<article class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow p-5">
    <!-- Collection header -->
    <div class="flex items-start space-x-4">
        <div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
            {% if collection.icon %}
            <span class="text-2xl">{{ collection.icon }}</span>
            {% else %}
            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
            {% endif %}
        </div>
        <div class="flex-1 min-w-0">
            <h3 class="text-lg font-semibold text-gray-900">
                <a href="{{ url_for('web.collection_detail', name=collection.name) }}"
                   class="hover:text-purple-600 transition-colors">
                    {{ collection.display_name }}
                </a>
            </h3>
            <p class="text-sm text-gray-500">by {{ collection.maintainer }}</p>
        </div>
    </div>

    <!-- Description -->
    <p class="mt-3 text-sm text-gray-600 line-clamp-2">
        {{ collection.description or 'A curated collection of tools.' }}
    </p>

    <!-- Meta info -->
    <div class="mt-4 flex items-center justify-between text-sm">
        <span class="flex items-center text-purple-600">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
            </svg>
            {{ collection.tool_count }} tools
        </span>
        {% if collection.tags %}
        <div class="flex flex-wrap gap-1">
            {% for tag in collection.tags[:3] %}
            <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">{{ tag }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <!-- Install command -->
    <div class="mt-4">
        <div class="flex items-center bg-gray-100 rounded px-3 py-2 group">
            <code class="text-xs text-gray-700 flex-1 truncate font-mono">
                cmdforge install --collection {{ collection.name }}
            </code>
            <button type="button"
                    onclick="copyToClipboard('cmdforge install --collection {{ collection.name }}')"
                    class="ml-2 p-1 text-gray-400 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity"
                    aria-label="Copy install command">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                </svg>
            </button>
        </div>
    </div>
</article>
{% endmacro %}