<!-- Plugin Detail Template -->
<div class="bg-white border border-gray-200 rounded-lg shadow-lg p-6 mt-6">
    <!-- Header -->
    <div class="flex items-start justify-between mb-6 border-b border-gray-200 pb-4">
        <div class="flex-1">
            <div class="flex items-center gap-3 mb-2">
                <svg class="w-8 h-8 text-[#0770E3]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path>
                </svg>
                <div>
                    <h3 class="text-2xl font-bold text-gray-900">{{ feature.name }}</h3>
                    <p class="text-sm text-gray-500">Plugin v{{ feature.version }}</p>
                </div>
            </div>
            <p class="text-gray-600 mt-2">{{ feature.description }}</p>
        </div>

        <!-- Enabled Badge -->
        <div class="flex-shrink-0 ml-4">
            <span class="px-3 py-1 text-sm rounded-full {% if feature.enabled %}bg-green-100 text-green-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                {% if feature.enabled %}ENABLED{% else %}DISABLED{% endif %}
            </span>
        </div>
    </div>

    <!-- Metadata Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        {% if feature.author %}
        <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-500 mb-1">Author</div>
            <div class="text-sm text-gray-900">{{ feature.author }}</div>
        </div>
        {% endif %}

        {% if feature.license %}
        <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-500 mb-1">License</div>
            <div class="text-sm text-gray-900">{{ feature.license }}</div>
        </div>
        {% endif %}

        <div class="bg-gray-50 rounded-lg p-4 {% if not feature.author and not feature.license %}md:col-span-2{% endif %}">
            <div class="text-sm font-medium text-gray-500 mb-1">Installation Path</div>
            <div class="text-sm text-gray-900 font-mono break-all">{{ feature.install_path }}</div>
        </div>
    </div>

    <!-- Keywords -->
    {% if feature.keywords %}
    <div class="mb-6">
        <h4 class="text-sm font-medium text-gray-500 mb-2">Keywords</h4>
        <div class="flex flex-wrap gap-2">
            {% for keyword in feature.keywords %}
            <span class="px-2 py-1 bg-gray-200 text-gray-700 rounded text-xs">{{ keyword }}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Features Provided -->
    <div class="bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg p-4 mb-6">
        <h4 class="text-sm font-semibold text-gray-900 mb-3">Features Provided by this Plugin</h4>
        <div class="text-sm text-gray-600">
            <p>This plugin may provide skills, commands, agents, hooks, and MCP servers. Switch to the respective tabs to view features from this plugin source.</p>
        </div>
    </div>

    <!-- Close Button -->
    <div class="flex justify-end pt-4 border-t border-gray-200">
        <button onclick="document.getElementById('detail-panel').innerHTML = ''" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
            Close
        </button>
    </div>
</div>
