{# Tool card macro #}
{% macro tool_card(tool=none, owner=none, name=none, description=none, category=none, downloads=none, version=none, tags=none, rating=none, rating_count=none, has_issues=none) %}
{% if tool is none %}
{% set tool = {
    "owner": owner,
    "name": name,
    "description": description,
    "category": category,
    "downloads": downloads,
    "version": version,
    "tags": tags,
    "rating": rating,
    "rating_count": rating_count,
    "has_issues": has_issues
} %}
{% endif %}
<article class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow p-4 relative">
    <!-- Category badge -->
    {% if tool.category %}
    <span class="absolute top-3 right-3 px-2 py-1 bg-cyan-500 text-white text-xs font-medium rounded">
        {{ tool.category }}
    </span>
    {% endif %}

    <!-- Tool icon and name -->
    <div class="flex items-start space-x-3">
        <div class="flex-shrink-0 w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
            <span class="text-indigo-600 font-bold text-sm">{{ tool.name[0]|upper }}</span>
        </div>
        <div class="flex-1 min-w-0">
            <h3 class="text-lg font-semibold text-gray-900 truncate">
                <a href="{{ url_for('web.tool_detail', owner=tool.owner, name=tool.name) }}"
                   class="hover:text-indigo-600 transition-colors">
                    {{ tool.name }}
                </a>
            </h3>
            <p class="text-sm text-gray-500">by {{ tool.owner }}</p>
        </div>
    </div>

    <!-- Description -->
    <p class="mt-3 text-sm text-gray-600 line-clamp-2">
        {{ tool.description or 'No description available.' }}
    </p>

    <!-- Tags -->
    {% if tool.tags %}
    <div class="mt-3 flex flex-wrap gap-1">
        {% for tag in tool.tags[:5] %}
        <a href="{{ url_for('web.search', tags=tag) }}"
           class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700 hover:bg-indigo-100 hover:text-indigo-700 transition-colors">
            {{ tag }}
        </a>
        {% endfor %}
        {% if tool.tags|length > 5 %}
        <span class="inline-flex items-center px-2 py-0.5 text-xs text-gray-500">
            +{{ tool.tags|length - 5 }} more
        </span>
        {% endif %}
    </div>
    {% endif %}

    <!-- Meta info -->
    <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
        <div class="flex items-center gap-3">
            <span class="flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                </svg>
                {{ tool.downloads|default(0)|format_number if tool.downloads else 0 }}
            </span>
            {% if tool.rating and tool.rating > 0 %}
            <span class="flex items-center">
                <svg class="w-4 h-4 mr-0.5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                </svg>
                {{ "%.1f"|format(tool.rating) }}{% if tool.rating_count %}<span class="text-gray-400 text-xs ml-0.5">({{ tool.rating_count }})</span>{% endif %}
            </span>
            {% endif %}
            {% if tool.has_issues %}
            <span class="flex items-center text-red-500" title="Has open issues">
                <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </span>
            {% endif %}
        </div>
        <span class="text-xs text-gray-600">v{{ tool.version }}</span>
    </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 {{ tool.owner }}/{{ tool.name }}
            </code>
            <button type="button"
                    onclick="copyToClipboard('cmdforge install {{ tool.owner }}/{{ tool.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 %}