{% for plugin in plugins %}
<div class="col-md-4 mb-3">
    <div class="card h-100 {% if plugin.featured %}border-primary{% endif %}">
        <div class="card-header d-flex justify-content-between align-items-center">
            <strong>
                <a href="{% url 'plugins:netbox_catalog:plugin_detail' name=plugin.name %}">
                    {{ plugin.name }}
                </a>
            </strong>
            {% if plugin.featured %}
            <span class="badge text-bg-primary">Featured</span>
            {% endif %}
        </div>
        <div class="card-body">
            <p class="card-text small">{{ plugin.summary|truncatewords:20 }}</p>

            <!-- Certification & Category -->
            <div class="mb-2">
                {% if plugin.certification == "certified" %}
                <span class="badge text-bg-success">Certified</span>
                {% elif plugin.certification == "compatible" %}
                <span class="badge text-bg-info">Compatible</span>
                {% elif plugin.certification == "deprecated" %}
                <span class="badge text-bg-danger">Deprecated</span>
                {% else %}
                <span class="badge text-bg-warning">Untested</span>
                {% endif %}
                <span class="badge text-bg-secondary">{{ plugin.category }}</span>
            </div>

            <!-- Compatibility -->
            <div class="mb-2">
                {% if plugin.is_compatible %}
                    {% if plugin.compatibility_source == "unknown" %}
                    <span class="text-warning small">
                        <i class="mdi mdi-help-circle"></i> Compatibility unknown
                    </span>
                    {% else %}
                    <span class="text-success small">
                        <i class="mdi mdi-check-circle"></i> Compatible
                    </span>
                    {% endif %}
                {% else %}
                <span class="text-danger small">
                    <i class="mdi mdi-close-circle"></i> {{ plugin.compatibility_reason }}
                </span>
                {% endif %}
            </div>

            <!-- Version & Author & Downloads -->
            <div class="small text-muted">
                <div class="d-flex justify-content-between">
                    <span>v{{ plugin.version }} by {{ plugin.author|default:"Unknown" }}</span>
                    {% if plugin.downloads_last_month %}
                    <span title="{{ plugin.downloads_last_month }} downloads last month"><i class="mdi mdi-download"></i> {{ plugin.downloads_display }}/mo</span>
                    {% endif %}
                </div>

                {% if plugin.installed_version %}
                <div class="text-success">
                    <i class="mdi mdi-check"></i>
                    Installed: v{{ plugin.installed_version }}
                    {% if plugin.is_activated %}
                    <span class="badge text-bg-success">Active</span>
                    {% else %}
                    <span class="badge text-bg-warning">Not Activated</span>
                    {% endif %}
                </div>
                {% if plugin.upgrade_available %}
                <div class="text-info">
                    <i class="mdi mdi-arrow-up"></i> Upgrade available
                </div>
                {% endif %}
                {% endif %}
            </div>
        </div>
        <div class="card-footer">
            <a href="{% url 'plugins:netbox_catalog:plugin_detail' name=plugin.name %}"
               class="btn btn-sm btn-outline-primary">Details</a>
            {% if plugin.is_compatible %}
                {% if not plugin.installed_version %}
                <a href="{% url 'plugins:netbox_catalog:plugin_install' name=plugin.name %}"
                   class="btn btn-sm btn-success">Install</a>
                {% elif plugin.upgrade_available %}
                <a href="{% url 'plugins:netbox_catalog:plugin_install' name=plugin.name %}"
                   class="btn btn-sm btn-info">Upgrade</a>
                {% endif %}
            {% else %}
            <button class="btn btn-sm btn-secondary" disabled>Incompatible</button>
            {% endif %}
        </div>
    </div>
</div>
{% empty %}
<div class="col-12">
    <div class="alert alert-info">
        <i class="mdi mdi-information"></i>
        No plugins found matching your criteria.
    </div>
</div>
{% endfor %}