<!-- Agent 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                <div>
                    <h3 class="text-2xl font-bold text-gray-900">{{ feature.name }}</h3>
                    <p class="text-sm text-gray-500">Custom Agent</p>
                </div>
            </div>
            <p class="text-gray-600 mt-2">{{ feature.description }}</p>
        </div>

        <!-- Source Badge -->
        <div class="flex-shrink-0 ml-4">
            <span class="px-3 py-1 text-sm rounded-full {% if feature.source == 'user' %}bg-blue-100 text-blue-800{% elif feature.source == 'plugin' %}bg-purple-100 text-purple-800{% else %}bg-green-100 text-green-800{% endif %}">
                {{ feature.source|upper }}
            </span>
        </div>
    </div>

    <!-- Agent Properties -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        {% if feature.model %}
        <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-500 mb-1">Preferred Model</div>
            <div class="text-sm text-gray-900 font-mono">{{ feature.model }}</div>
        </div>
        {% endif %}

        {% if feature.color %}
        <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-500 mb-1">Agent Color</div>
            <div class="flex items-center gap-2">
                <div class="w-6 h-6 rounded" style="background-color: {{ feature.color }}"></div>
                <span class="text-sm text-gray-900 font-mono">{{ feature.color }}</span>
            </div>
        </div>
        {% endif %}

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

    <!-- Allowed Tools -->
    {% if feature.tools %}
    <div class="mb-6">
        <h4 class="text-lg font-semibold text-gray-900 mb-3">Allowed Tools</h4>
        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
            <div class="flex flex-wrap gap-2">
                {% for tool in feature.tools %}
                <span class="px-2 py-1 bg-[#0770E3] bg-opacity-10 text-[#0770E3] rounded text-xs font-mono">{{ tool }}</span>
                {% endfor %}
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-2">This agent can only use these tools</p>
    </div>
    {% endif %}

    <!-- Inheritance Chain -->
    {% if feature.inheritance and feature.inheritance.levels|length > 1 %}
    <div class="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
        <div class="flex items-center gap-2 mb-3">
            <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <h4 class="text-sm font-semibold text-amber-900">Inheritance Chain</h4>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
            {% for level in feature.inheritance.levels %}
            <div class="flex items-center gap-2">
                <span class="px-2 py-1 text-xs rounded {% if level.source == 'user' %}bg-blue-200 text-blue-900{% elif level.source == 'plugin' %}bg-purple-200 text-purple-900{% else %}bg-green-200 text-green-900{% endif %}">
                    {{ level.source|upper }}
                </span>
                {% if not loop.last %}
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% if feature.inheritance.winner %}
        <p class="text-xs text-amber-700 mt-2">Active configuration from: <strong>{{ feature.inheritance.winner|upper }}</strong></p>
        {% endif %}
    </div>
    {% endif %}

    <!-- Agent Instructions -->
    {% if feature.instructions or feature.full_content %}
    <div class="mb-6">
        <h4 class="text-lg font-semibold text-gray-900 mb-3">Agent Instructions</h4>
        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
            <pre class="text-sm text-gray-800 whitespace-pre-wrap overflow-x-auto"><code>{{ feature.full_content or feature.instructions }}</code></pre>
        </div>
    </div>
    {% endif %}

    <!-- Info Box -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <div class="flex items-center gap-2 mb-2">
            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <h4 class="text-sm font-semibold text-blue-900">About Agents</h4>
        </div>
        <p class="text-sm text-blue-800">Custom agents provide specialized behavior and capabilities. They can be configured with specific instructions, tool access, and model preferences.</p>
    </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>
